0

I have an admin page and it has specific version of jquery. I am using jquery to load another html page that has another specific version of jquery. When the second page loaded into a div the methods on the loaded page gives error 'object has no method'.

I have used no conflict with no luck. When i looked at the inspector i saw that the error is from the parent page jquery version.

Do you have an idea. How can i force the loaded page to use its own jquery?

--- And it is strange that on localhost i get no error while on far server i get this error ---

I know there are a lot of search results on this. But no solutions colud help me.

ratata
  • 1,129
  • 14
  • 42

2 Answers2

0

On parent page you can use jquery like this 

var $jqParent = jQuery.noConflict();

$jqParent('selector').show();

on child page you can do like this 

var $jqChild = jQuery.noConflict();

$jqChild ('selector').show();

refer this: How do I implement JQuery.noConflict() ?

Community
  • 1
  • 1
patel.milanb
  • 5,822
  • 15
  • 56
  • 92
0

There is a pattern that can solve your issue. Try wrapping your code in the child page like this:

(function($){
// All your code.

})(jQuery);

With this approach, code on your page is saved in a separate scope. When you load another page having another version of jQuery, it only overwrites the window object properties ($,jQuery) with another version. Your current version should still work. If your page have multiple script sections, try wrapping all the sections using jQuery. Like this:

<script>
   (function($){
    // All your code for first script section

    })(jQuery);
</script>

<script>
   (function($){
    // All your code for second script section

    })(jQuery);
</script>

In case you cannot edit your child page, you could do like this in your loaded page (parent page):

<script></script>//script to load another jquery version
<script>
    var currentJQuery = $.noConflict(); //restore $ to previous version and return the current version as currentJQuery variable.
</script>

Wrap all other scripts like this:

<script>
       (function($){
        // All your code for first script section

        })(currentJQuery);
    </script>

    <script>
       (function($){
        // All your code for second script section

        })(currentJQuery);
    </script>
Khanh TO
  • 48,509
  • 13
  • 99
  • 115
  • @ratata: how can you use jquery to load another html page if you cannot edit it? – Khanh TO Dec 17 '13 at 14:05
  • I am using django and have a custom widget. This widget injects the loader code. I am not editing the first page manually. Do you have an idea why the error is on the server side nd not on localhost? – ratata Dec 17 '13 at 14:09
  • @ratata: `Do you have an idea why the error is on the server side nd not on localhost?` this could be a problem of cross-domain when you use a widget loaded from another domain – Khanh TO Dec 17 '13 at 14:59
  • 1
    @ratata: try my updated answer in case you cannot edit the child page. – Khanh TO Dec 17 '13 at 15:11
  • Thank you so much for your interest. No solution worked for me. But at last i have solved the problem. The parent page was adding 2 jquery files jquery1.9.1 and 1.8.3. Child page was adding another jquery version. So there were 3 jquery versions. I have found a way to remove the version 1.8.3 and now everything works smoothly. I guess your solutions are right... – ratata Dec 17 '13 at 15:40