jquery is undefined in the partial view loaded via ajax in IE_问答_开发者

jquery is undefined in the partial view loaded via ajax in IE

开发者 https://www.devze.com 2023-02-18 21:02 出处：网络

I have a web page cons开发者_JS百科isting 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 ajax

I have a web page cons开发者_JS百科isting 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.

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>

Please refer to : jQuery 1.6.1 , IE9 and SCRIPT5009: '$' is undefined

User id "Black" has provided the right direction for me.

I was uploading by using .AjaxForm on a dialog. after that, I replace that Form, with another AjaxForm. Then I had a bug with "$ is undefined", or "jQuery is undefined" The main reason is I applied "render :layout => false" for the second Dialog. That's why all the js library (include jQuery ) have not been loaded properly.

So that, on the partial of the Second Dialog, I have to add.

Try something like this to see if it resolves the problem:

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

What this should do is replace the contents of the existing form with the contents of the element returned in the response. Instead of replacing the entire form element and executing JS again. It may work around your problem.

You could try something like this:

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

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

with that approach you encapsulate the $ within the function and it can't be messed up from other js frameworks (should you use any). I don't know if that will work with IE and I can't test it but hopefully it will :)

If you are using IE, make sure you are using jQuery version 1. jQuery version 2 is not supported by IE....even though everything else on the planet supports version 2....

http://jquery.com/download/