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

Asked 19/3, 2011 at 1:58 Answered 17/9, 2013 at 20:6

Solved jquery ajax jquery-ui-tabs ajaxform

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.

Cupp answered 19/3, 2011 at 1:58 Comment(8)

This won't fix the problem, but you could use $('#myForm').parent().html(response); – Guatemala 19/3, 2011 at 2:4

Interesting that the error says "jQuery", since the code you've pasted here does not use the variable "jQuery" at all. Does it tell you what file and line the error occurs on? – Guatemala 19/3, 2011 at 2:6

Thanks for reply Mark. In IE, there are bugs that prenvet using html(response), that is why I used empty() and append() sequentially. – Cupp 19/3, 2011 at 2:9

The code I pasted is a very simplified version of my pages, i don't want to bother you with thousands of LOC. But I am pretty sure the JQuery is undefined inside the script of loaded partial view (JS Debug tools). – Cupp 19/3, 2011 at 2:11

One debugging technique I use is to take a simplified version of the code, like what you've pasted above, and test with it. Have you tried that yet? – Guatemala 19/3, 2011 at 2:20

Is the file jquery.form.js being loaded from the tabs page, or from the DescriptionPage? If it is loaded from the DescriptionPage, have you tried loading from the tabs page instead? It may need to be loaded from the same page that loads jQuery. – Guatemala 19/3, 2011 at 2:45

All library files (jquery, jquery ui, jquery forms etc) are included in the main page (Which also contains tabs div). – Cupp 22/3, 2011 at 8:47

Nope. I am still trying to figure out. – Cupp 24/3, 2011 at 7:48

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>

Guatemala answered 19/3, 2011 at 3:21 Comment(0)

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.

Plaintive answered 18/6, 2012 at 8:24 Comment(0)

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.

Maenad answered 24/3, 2011 at 21:43 Comment(1)

Thanks. But I must re-execute JS again, to make bindings an etc. For example: The form needs to be bound to ajaxForm for every response. – Cupp 25/3, 2011 at 8:37

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 :)

Maupassant answered 29/3, 2011 at 2:3 Comment(0)

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/

Badger answered 17/9, 2013 at 20:6 Comment(1)

Welcome to StackOverflow. A couple suggestions: Consider asking the original poster to provide more information like the version of jQuery he is using. Also, please be more precise in your answer so that it is helpful to other readers. (Not all versions of IE fail to support jQuery 2, nor do all other browsers support it.) Thanks for your contribution. – Bullfrog 17/9, 2013 at 20:41

Recommended topics

Hot tags