0

I am using jQuery load() to load a partial page into a div. I want to pass url parameters to the partial page like so

<div id='partial'></div> <script> $('#partial').load('child_page.html?key=1'); </script>

How do I access these parameters from inside the child page? I tried the following in the child page, but the issue is that the window.location is not giving me child_page.html?key=1 but is giving me the root page url.

<script> var url = window.location; //code to parse the url to extract the parameters goes here </script>
Improve this question
3
  • "//code to parse the url to extract the parameters goes here" .load() not appear to change window.location ? Commented Jul 12, 2015 at 15:09
  • "child page" is not really a page, it is just content being added into the current page. Please refer to my new answer for details. Commented Jul 12, 2015 at 16:06
  • @alan0xd7 ""child page" is not really a page, it is just content being added into the current page. Please refer to my new answer for details." Yes , though that does not appear to be actual Question at original post "How to access URL parameters sent to div via jQuery load()" ? That is, how to access "parameters" passed .load() ? "from inside the child page?" would be same html page .load() called from Commented Jul 12, 2015 at 17:12

3 Answers 3

Reset to default
3

It is not possible for the "child page" to have its own DOM and scripting context, because it was simply retrieved as a string (via AJAX) and inserted into the parent page. Therefore it does not have its own window.location. Everything is added to the DOM of the parent page, and scripts are executed in the context of the parent page.

If you want to share variables between your parent page and the new script loaded with load, you can attach the variable to window and then access it in the script of the "child page".

For example:

// parent page window.sharedVariable = "Hello World!"; $('#partial').load(url); // child page var v = window.sharedVariable;

Working demo (child page)

Update:

Here is an alternate method to support multiple partials, using data attributes to share the variables.

// parent page $('#partial_1').load(url).data("param", "111"); $('#partial_2').load(url).data("param", "222"); $('#partial_3').load(url).data("param", "333"); // child page var scriptTag = document.scripts[document.scripts.length - 1]; var parentTag = scriptTag.parentNode; var param = $(parentTag).data("param");

Basically, we set the data we want to share in the partial's div. And then in the "child page", we find the current running script tag, then the parent tag would be the div that has the data in it.

Working demo (child page)

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

This answer does not appear to address "URL parameters" described at original post ?
The direct answer is "it cannot be done" because there is no "child page", it is all just part of the same page.
@alan0xd7 Used the approach you are suggesting in other areas of the application where the data to be shared between pages was static and known in advance. But in this case the number of partial divs will be known only at run time: parent_page.html has the following js <div id='partial_0'></div> <div id='partial_1'></div> <script> $('#partial_0').load('child_page.html?key=0'); $('#partial_1').load('child_page.html?key=1'); </script> child_page.html needs to be loaded into multiple divs present in parent_page.html. Inside child_page.html want to access key value sent to it via load.
Yes. Solution should return parameters passed to .load() within .load() complete callback . If parameters passed to .load() is changed , those changed parameters should be accessible within each call to .load()
I have provided an alternate method that supports multiple partials, please take a look.
|
1

This takes a slightly different course, but achieves the result you're looking for just as well. You can use the HTML5 History API and do something like this:

history.replaceState(null, null, '?key=1'); var test = $('#partial').load('two.html');

Then from two.html, the window.location.search call will give you ?key=1 and you can parse the query string from there..

Improve this answer

1 Comment

Nice and simple. Also allows the second page (two.html) to load without any code edits. This should be the top answer.
0

How to access URL parameters sent to div via jQuery load()

Edit, Updated

Note, original Question does not appear to include description of script element expected , to run, within returned html from call to .load()

Try utilizing beforeSend to set settings url at jqxhr object , access jqxhr object within .load() complete callback

var url = "https://gist.githubusercontent.com/anonymous/4e9213856be834b88f90/raw/1d90ab5df79e6ee081db2ff8b94806ef27cbd422/abc.html"; $.ajaxSetup({ beforeSend: function(jqxhr, settings) { jqxhr.params = settings.url } }); function loadComplete(data, textStatus, jqxhr) { $(this).find("h1") .html(function(_, html) { return html + " My param is " + jqxhr.params.split("?")[1] }); }; $("#partial_1").load(url + "?111", loadComplete); $("#partial_2").load(url + "?222", loadComplete); $("#partial_3").load(url).load(url + "?333", loadComplete);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div id="partial_1"></div> <div id="partial_2"></div> <div id="partial_3"></div>

jsfiddle http://jsfiddle.net/L9kumjmo/5/

Improve this answer

12 Comments

May I ask, why would you actually want to do this? If you are going to request the page, you already know the URL (and its parameters) beforehand, couldn't you just save that instead?
@alan0xd7 If url , parameters not known ? , but created , passed to .load() dynamically ?
Even if you create the parameters dynamically, it is still known the moment you call load(url), as that is part of the url.
@alan0xd7 How would it be known when asynchronous .load() completes to access parameters passed ? What is issue with defining , attaching property to jqxhr object ?
When you call load(), you give it a url, correct? So in that url, you already have the parameters, no?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.