Jquery Forms,Bootstrap和浏览器以及操作系统提交的奇怪问题

时间:2014-04-24 20:09:14

标签: jquery ajax twitter-bootstrap form-submit

我正在处理页面提交表单,我遇到的问题是在MAC OS 10.5 - 10.8浏览器 - FF,Chrome和Safari都正常工作,但在Windows 7上使用浏览器IE 8 +11,即使在说成功之后,Chrome也没有通过提交。在Windows 7上的FireFox v28上,只有在某些计算机上才能正确提交和更新表单。该网站是在Bootstrap上。 这是HTML:

<div class="modal fade bs-preview-modal-lg" id="preview-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
  <div class="modal-body">
    <div class="section-header">
      <h4 id="title-out"></h4>
    </div>
    <div class="content">
      <div class="row">
        <div class="media media-out"></div>
        <div class="info info-out"></div>
        <div class="body body-out"></div>
        <div class="faq faq-out"></div>
        <div class="external-links external-links-out"></div>
      </div>
    </div>
    </div>
    </div>
 </div>
</div>
<div class="modal fade" id="ajax-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-body">
    <p>Updating&hellip;</p>
  </div>
 </div>
</div>
 </div>

并且页脚中的jquery ajax加载是

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="/assets/v1/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="/assets/v1/js/jquery.form.js"></script>
    <script src="/assets/v1/lib/chosen/chosen.jquery.js"></script>

    <script type="text/javascript">

$(document).ready(function() {


    $(document).on({
      ajaxStart: function() {$('#ajax-modal').modal('show');},
      ajaxStop: function() {$('#ajax-modal').modal('hide');}
    });

    $('#publishForm').ajaxForm({
      dataType: 'json',
      success: function(data) {
        if (data.success) {$('#success-modal').modal();} else {
          $('#failure-modal').modal();
          console.log(data);
        }
      }
    });

是否有什么内容在Windows上插件,但不受MAC OS的影响?

1 个答案:

答案 0 :(得分:0)

我认为它在jquery.form.js - 插件中。 如果你只使用jQuery内置的ajax函数怎么办?

$(document).ready(function() {
    $('#publishForm').submit(function() {
      // prevents the form from submitting normally
        event.preventDefault();
        var url = $(this).attr("action");
        // Showing the #ajax-modal right away rather than wait until the ajax starts.
        $('#ajax-modal').modal('show');
        $.ajax(url, {
            dataType: 'json',
            success: function(data) {
                if (data.success) {
                    $('#success-modal').modal();
                } else {
                    $('#failure-modal').modal();
                    console.log(data);
                }
            },
            complete: function() {
              // When the ajax-request is complete, it will hide the #ajax-modal (no matter if the request failed or not).
                $('#ajax-modal').modal('hide');
            }
        });
    });
});