Question

我对Ajax完全不熟悉，但试图获得django工作的反馈模块，这是一个提示用户提交反馈的标签。

这是模板：

<div id="feedback_button" class="white left normal"><a href="/feedback/">feedback</a></div>
<div class="hiding">
<div id="feedback_popup" class="colorbox" style="width: 500px">
    <h1>Feedback</h1>
    {% if not feedback_text %}
        <p style="margin-bottom: 0">We would be happy to consider any feedback you have.</p>
    {% else %}
        {{feedback_text}}
    {% endif %}
    <form class="feedback" action="{% url feedback.views.handle_ajax %}" method="POST" style="margin: 0">{% csrf_token %}
        <div style="display: none"><input name="body" value="..."/></div>
        <label for="email">email (optional)</label>
            <input name="email" value="{{user.email}}"/>
             <div class="email error"> </div>
        <label for="subject">subject (optional)</label>
            <input name="subject"/>
             <div class="subject error"> </div>
        <label for="text">message</label>
            <textarea name="text"></textarea>
            <div class="text error"> </div>
        <div class="buttons">
            <button>Send</button>
        </div>
    </form>
    <div class="thanks hiding">Thank you for your feedback!</div>
    <div class="general error hiding"></div>
</div>
</div>
<script>
    $(function(){
        feedback.init({
            'button':$('#feedback_button'),
            'drop':$('#feedback_drop'),
            'popup':$('#feedback_popup')
        });
        if (document.cookie == "") {
            // CSRF protection requires a cookie to be set already.
            $('#feedback_button').hide();
        }
    });
</script>

我看到了反馈按钮，但是当我点击它时，没有任何反应。因为我是jquery / ajax的新手，不确定从哪里开始调试这个...任何提示？

以下是我在base.html模板中调用的地方：

<body class="{% block body_class %}{% endblock %}">
    {% include "feedback/button.html" %}
        <div id="wrapper">

这是相关的jquery：

var feedback = {};
feedback.init = function(config) {
    if (!(config.button && config.drop && config.popup))
        throw "invalid params";
    config.popup.find('form.feedback').ajaxSubmit({
        'onstart':function(){
            config.popup.addClass('loading');
        },
        'onend':function(){
            config.popup.removeClass('loading');
        },
        'onerror':function(why){
            alert('Error! '+why);
        },
        'onsuccess':feedback.done(config)
    });

    config.button.click(function(){
        config.drop.removeClass('hiding');
        config.popup.removeClass('hiding');
        config.popup.find('input[name=email]').focus();
    });
    config.popup.find('.close').click(feedback.closeit(config));
};

Answer 1

您的JS附件/static/uni_form/uni-form.jquery.js未加载 - 返回403 Forbidden
在第config.popup.find('form.feedback').ajaxSubmit({行的main.js中，ajaxSubmit返回错误。也许你会将feedback.init或所有main.js放在$(document).ready(function(){...});等之间...但是请确保ajaxSubmit在该执行点可用。

Answer 2

ajaxSubmit（）会立即提交表单。使用ajaxForm（）和：提交按钮，或连接按钮单击事件以执行submit（）。或者在按钮单击事件期间执行ajaxSubmit（）。这样的事情应该有效（未经尝试）......

feedback.init = function(config) {
    if (!(config.button && config.drop && config.popup))
        throw "invalid params";
    config.popup.find('form.feedback').ajaxForm({
        'onstart':function(){
            config.popup.addClass('loading');
        },
        'onend':function(){
            config.popup.removeClass('loading');
        },
        'onerror':function(why){
            alert('Error! '+why);
        },
        'onsuccess':feedback.done(config)
    });

    config.button.click(function(){
        config.drop.removeClass('hiding');
        config.popup.removeClass('hiding');
        config.popup.find('input[name=email]').focus();
        config.popup.find('form.feedback').ajaxSubmit();
    });
    config.popup.find('.close').click(feedback.closeit(config));
};

弹出窗口不能使用Jquery / Ajax

2 个答案: