Home/ Questions/Q 4098994
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T20:22:32+00:00

I have a web page consisting a JQuery UI Tabs widget. Tab widget loads

  • 0

I have a web page consisting a JQuery UI Tabs widget. Tab widget loads the tabs via AJAX. In one of the tab pages (name it DescriptionPage), I have a form which will be submitted via ajaxForm plugin.

<div id="tabs">
    <ul>
        <li>
           <a href="DescriptionPage">Description Page</a>
        </li>
    </ul>
</div>

This is content of my DescriptionPage.

<form id="myForm">
  <!-- Form elements goes here -->
</form>

<script>
  $(function(){
    $('#myForm').ajaxForm(function (response) {
      $('#myForm').parent().empty().append(response);
    });
  });
</script>

After form is submitted, the same DescriptionPage is returned, both the form and script. So the form content is replaced with the response of the server side. The response also contains validation messages.

The problem is, The whole scenario works well in Chrome and Firefox. But in Internet Explorer 8, a strange issue happens.

When the tab is first loaded, the javascript is successfully executed. When user submits the form and the response is put, IE fails to execute my javascript, saying “JQuery is not defined”.

Why IE fails to call JQuery inside the content loaded via ajax?
Is there a workaround?

P.S: I thought seperating the script from html, but it is not an option at all 🙁

P.S2: My javascript and CSS files became a mess because of stupid IE.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This seems to work for me in Internet Explorer 6:

    index.html:

    <html><head></head><body>

<div id="container"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jquery.form.js"></script>
<script>
    jQuery('#container').load('DescriptionPage.html');
</script>

</body></html>

    DescriptionPage.html:

    <form id="myForm">
    <input type="submit" />
</form>

<script>
    $(function() {
        $('#myForm').ajaxForm(function(response) {
            $('#myForm').parent().empty().append(response);
        });
    });
</script>
    • 0