Question

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!

Answer 1

I think you should expand on the .ajax and add a .success and .error state in the AJAX call. Refer to this:

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

Add that as part of the ajax process, because right now it looks like hitting submit will hide the form and reload the tabs even if there was an error.

Try that out and remove the return false and see what happens.