jQuery 不刷新 IE 中的选项卡内容

Question

我有一个使用 jQuery 选项卡的页面。在我的一个选项卡中，我有一个 div，其中包含一个表单（最初是隐藏的），我想用它来向选项卡添加内容。我所拥有的在 Chrome、Firefox 和 Safari 中完美运行。但是，在 IE 7 中，选项卡不会刷新。帖子有效，数据被添加到数据库中，但提交后它根本不会显示新内容。

我认为这并不重要 - 但是，我也在使用 Codeigniter PHP 框架。

这是我的 javascript：

<script type="text/javascript">
  $(document).ready(function(){
      // initialize the addChild form as hidden until user requests it open
      $('#addChild').hide();

      // open the form
      $('#openDialog').click( function(){
          $('#addChild').slideToggle();
          return false;
      });

      // close the form
      $('#closeDialog').click( function(){
          $('#addChild').slideToggle();
          return false;
      });

      // submit the form
      $('#frmAddChild').submit( function(){
         $('#addChild').slideToggle();

         $.ajax({
             url: '/children/add',
             type: 'POST',
             data: $('#frmAddChild').serialize()
             //cache: false
         });
         //reload the children tab
         $('#tabs').tabs('load',3);
         return false;
      });

  });

  </script>

还有，这是我的 PHP/HTML：

<?php
    // initialize the elements of the form
    $frmAddChild = array(
      'name' => 'frmAddChild',
      'id' => 'frmAddChild',
      'method' => 'post'
    );

    $child_name = array(
      'name' => 'child_name',
      'id' => 'child_name',
                );
    $child_dob = array(
        'name' => 'child_dob',
        'id' => 'child_dob'
    );
    $btnOpenDialog = array(
        'name' => 'openDialog',
        'id' => 'openDialog',
        'value' => 'true',
        'content' => 'Add Child'
    );
    $btnCloseDialog = array(
        'name' => 'closeDialog',
        'id' => 'closeDialog',
        'value' => 'true',
        'content' => 'Cancel'
    );
    // button that shows the drop down to add
    echo form_button($btnOpenDialog);
?>

<div id="addChild" title="Add Child">
    <?php echo form_open('children/add/',$frmAddChild); ?>
    <table>
        <tr>
            <td>
                <?php echo form_label('Child\'s Name', 'child_name'); ?>:
            </td>
            <td>
                <?php echo form_input($child_name); ?>
            </td>
        </tr>
        <tr>
            <td>
                <?php echo form_label('Date of Birth','child_dob'); ?>:
            </td>
            <td>
                <?php echo form_input($child_dob); ?>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <?php echo form_submit('submit', 'Add'); ?>
                <?php echo form_button($btnCloseDialog); ?>
            </td>
        </tr>
    </table>
    <?php echo form_close(); ?>
</div>

有没有人知道如何在 IE 中正常工作？另外，如果有人对我的结构有任何意见，请告诉我。我是 Codeigniter 的新手，我绝不是 javascript 或 jQuery 专家。

感谢您的帮助！

Answer 1

我认为您应该扩展 .ajax 并在 AJAX 调用中添加 .success 和 .error 状态。参考这个：

http://api.jquery.com/category/ajax/

将其添加为 ajax 进程的一部分，因为现在看起来点击提交会隐藏表单并重新加载选项卡，即使出现错误也是如此。

试试看，去掉 return false 看看会发生什么。