1

我正在以模式呈现表单并通过 jquery 处理表单提交。如果服务器返回表单，我会在模式中重新显示表单以向用户显示表单错误。如果表单在服务器上验证，服务器将在内部重新引导并向用户返回成功页面。

这是通过这个小脚本（简化版）完成的：

function submitItemModalFormBind(url){
         //bind the form. prevent default behavior and submit form via ajax instead
         $('#ajax_form_modal_result').find(":submit").click(function(ev){
             var button = ev.target;
             var the_form = jQuery(this).parents("form");
             var data = the_form.serialize();
             data = data + "&" + button.name + "=" + button.value;

             $.ajax({
                type: "POST",
                url: url,
                data: data,
                success:function(response, textStatus, jqXHR){
                     var form = $("#ajax_form_modal_result_div", response);
                     //form is returned if it is not valid. update modal with returned form
                     //change this "if" to check for a specific return code which should be set in the view
                     if (form.html()) {
                        //update modal div
                         $('#ajax_form_modal_result_div').html(form);
                         $("#itemFormModal").modal('show');
                         //rebind the form
                         submitItemModalFormBind(url);
                      }
                      //form is not returned if form submission succeeded
                      else{
                        //update the entire document with the response received
                        document.open();
                        document.write(response);
                        document.close();
                        $("#itemFormModal").modal('hide');
                        }
                },
                error: function (request, status, error) {
                            if (request.status == 0){
                                 //status == 0 = server is unreachable or access denied
                                modalBody = $('#itemFormModal').find('.modal-body');
                                errorMessage = "<div class=\"alert alert-error\"><button class=\"close\" data-dismiss=\"alert\">x</button>Due to connection problems we could not process your request.. Please try again later. </br> ";
                                errorMessage = errorMessage + "If the problem persists check your internet connection and contact your system administrator.</div>" ;
                                modalBody.prepend(errorMessage);
                            };
                        }
                    });
                    return false;
                });
              }

在大多数情况下，这似乎工作正常。但是，它可能不是最好的方法，并且不能与此脚本一起正常工作：

$(document).ready(function() {
              form_bind_update();
              form_bind_hide();
              $("#id_project").select2({ width: 'resolve' });
              $("#id_year").select2({ width: 'resolve' });
              $("#id_month").select2({ width: 'resolve' });
              $("#id_purchase_order_membership").select2({ width: 'resolve' });
              $("#id_action").select2({ width: 'resolve' });
            });

文档的第一次加载工作正常。但是当通过 document.write() 函数加载这些数据时，$("id_project") 的选择会崩溃。似乎在 document.write() 完成之前触发了 document.ready() 。

有什么建议可以更好地处理这个用例吗？

4

0 回答 0