jQuery not refreshing tabs content in IE

Posted by iddimu on Stack Overflow See other posts from Stack Overflow or by iddimu
Published on 2010-03-21T15:39:26Z Indexed on 2010/03/21 15:41 UTC
Read the original article Hit count: 275

Hi all!

I have a page that is using jQuery tabs. Within one of my tabs I have a div that contains a form (initially hidden) that I want to use to add content to the tab. What I have works perfectly in Chrome, Firefox, and Safari. But, in IE 7 the tab will not refresh. The post works and the data gets added to the database, but it simply will not show the new content after submitting it.

I don't think it matters - but, just for information I am using the Codeigniter PHP framework as well.

Here is my 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>

And, here is my 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>

Does anyone have any ideas how I can get this working correctly in IE? Also, if anyone has any comments about how I have things structured, please let me know. I'm new to Codeigniter and I am by no means a javascript or jQuery expert.

Thanks for your help!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about php