Question

我正在使用twitter bootstrap模式和jquery在该模态中提交表单。在AJAX响应之后，我无法再次提交此表单。在AJAX响应中，使用此内容获取html数据：

<form action="/foo" id="UserCommentViewForm" method="post" accept-charset="utf-8">
<input name="data[UserComment][to_email]" type="text"  id="UserCommentToEmail"/>
<div class="error_notice">Enter email</div>
</form>

这是模态的内容：

<div id="modal_product_share" class="modal hide fade int" style="display: none; ">
<div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Info</h3>
</div>

<div class="modal-body">
    <form action="/foo" id="UserCommentViewForm" method="post" accept-charset="utf-8">
        <input name="data[UserComment][to_email]" type="text" id="UserCommentToEmail"/>
    </form> 
</div>

<div class="modal-footer">
    <a href="javascript:void(0);" class="btn btn-success" id="submit">Send</a>
    <a href="javascript:void(0);" class="btn" data-dismiss="modal">Close</a>
</div>
</div>

这是我的JS：

function product_share()
{
var el_body = $("#modal_product_share .modal-body");
var el_form = $("#UserCommentViewForm");
this.init = function(){
$("#submit").click(function(){
    el_form.submit();
});

el_form.submit(function(event){
    event.preventDefault();
    $.post( '/products/product_share/', el_form.serialize(), function( data )
    {
    el_body.html(data);
    });
});
};

this.init();
}

在文件的头部是：

$(document).ready(function() {
    obj_product_share = new product_share();
});

所以，我猜这是与ajax对模态或某事的响应没有约束形式有关...

Answer 1

感谢我的同事，我的问题得到了解答。像魅力一样工作：）

function product_share(){

var obj = this;
obj.el_body = $("#modal_product_share .modal-body");
obj.button_id = '#submit';
obj.form_id = '#UserCommentViewForm';
obj.el_form = null;

obj.init = function() {

    obj.el_form = $(obj.form_id);

    $(obj.button_id).click(function(){
        obj.el_form.submit();
    });

    obj.setup_form();

};

obj.setup_form = function() {

    obj.el_form.submit(function(e){
        e.preventDefault();
        $.post( '/products/product_share/', obj.el_form.serialize(), function( data ) {
            obj.el_body.html(data);
            obj.el_form = obj.el_body.find(obj.form_id);
            obj.setup_form();
        });
    });

};

obj.init();
}

引导模式中的Ajax响应

1 个答案: