Geek Answers Handbook

Jquery default context

I would like to load the page (with js, css) into a DIV inside the same document, and the javascript on the loaded page should not be applied to the contents of the parent page. Is it possible to set something like default context on a loaded page? see the main example below.

parent page:

<h1>normal</h1> <span class="externalpage">data</span> <script> $(document).ready(function () { $.ajax({ url: "/ajax/Index", success: function (data) { $(".externalpage").html(data); } }); }) </script>

/ ajax / Index "subpage" - I cannot change the content of this page.

 <h1>ajax</h1> <script> $(document).ready(function () { $("h1").text("xxxxxxxxxxxxx"); }) </script>
+4
source share
4 answers

From your comments, you want the loaded scripts to run in some kind of "partial" document context, limited by the contents of your externalpage element (that is, only the loaded <h1> element should be modified, not the external <div> ).

This can be achieved by temporarily overriding $.find() (not $ .fn.find () , this is not the same thing) and substituting the externalpage element in the context argument if it is not specified or equal to the document itself:

 $(document).ready(function () { $.ajax({ url: "/ajax/Index", success: function(data) { var $root = $(".externalpage"); var realFind = $.find; $.find = function(query, context, extra, seed) { return realFind.apply(this, [ query, context && context !== document ? context : $root[0], extra, seed ]); }; $root.html(data); $.find = realFind; } }); })

jsFiddle has an echo function that I could use to test this solution. You can see the results here .

0
source

In jQuery, there is no way to easily set the default context. You can, however, get around this by caching the context and simply calling .find() from it:

 var $c = $('.externalpage'); $c.find('h1').text('xxxxxxxxxxxx');

This is a bit cumbersome, and you have to change the way you encode.

Alternatively, you can just encapsulate it inside a function:

 var $j = function(a) { return $(a, '.externalpage'); }; // and then you can use that like $j('h1').text('xxxxxxxxxxxxx'); // if you want to revert to the global jQuery object, just use $ instead of $j
+4
source

This is rude, but should work. It copies jQuery to another variable and then replaces $ with a user-defined function; therefore, you can make him do what you want.

 var $copy = $; // Original jQuery $ = function() { if(!(this instanceof $)) return new $(); }; // fake jQuery function $.prototype.ready = function(f) { f(); // fake ready, just execute function directly } $.prototype.text = function(t) { $copy(".externalpage h1").text(t); // set only the correct h1 to the text }

Now in the extracted file:

 $(document).ready(function () { $("h1").text("xxxxxxxxxxxxx"); })

what happens, it will execute the fake jQuery functions, which, as defined above, should work the way you want.

You would need to use $copy for real jQuery functions in your own file.

+2
source

Since the subpage is loaded into the main document and loads the context of the document, you cannot change the context that the subpage uses in any way that does not require changing the subpage.

Some possible workarounds:

  • If the subpage is a full page, load it into an iFrame.

  • Kill the downloaded scripts completely:

     $.ajax ( { url: "/ajax/Index", success: function (data) { var safePage = $(data).find ("script"). Remove (); safePage.appendTo ".externalpage"); } } );


  • Download 2 copies of jQuery, only the second is the one you hacked for this purpose. Maybe like:

     <script> $.noConflict (); jQuery(document).ready(function ($) { $.ajax({ url: "/ajax/Index", success: function (data) { $(".externalpage").html(data); } }); }) </script> <!-- This next copy of jQuery only operates on the externalpage div --> <script src="Your hacked version of jquery" ...
+1
source

More articles:


All Articles