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

Question

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.

This won't fix the problem, but you could use `$('#myForm').parent().html(response);` — Mark Eirich, Mar 19 '11 at 02:04
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? — Mark Eirich, Mar 19 '11 at 02:06
Thanks for reply Mark. In IE, there are bugs that prenvet using html(response), that is why I used empty() and append() sequentially. — SadullahCeran, Mar 19 '11 at 02:09
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). — SadullahCeran, Mar 19 '11 at 02: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? — Mark Eirich, Mar 19 '11 at 02: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. — Mark Eirich, Mar 19 '11 at 02:45
All library files (jquery, jquery ui, jquery forms etc) are included in the main page (Which also contains tabs div). — SadullahCeran, Mar 22 '11 at 08:47

score 1 · Answer 1 · edited May 23 '17 at 10:24

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.

score 1 · Accepted Answer · answered Mar 19 '11 at 03:21

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>

score 0 · Answer 3 · answered Sep 17 '13 at 20:06

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/

answered Sep 17 '13 at 20:06

Curtis Paul

1
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. – Jacob Foshee Sep 17 '13 at 20:41

score 0 · Answer 4 · answered Mar 24 '11 at 21:43

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.

answered Mar 24 '11 at 21:43

Brandon

38,310
8
82
87

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. – SadullahCeran Mar 25 '11 at 08:37

score 0 · Answer 5 · answered Mar 29 '11 at 02:03

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

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

5 Answers5