Pass parameters to dynamically created div element?

Question

I have a page where I'm creating several divs dynamically inside a div of my parent page.

for (i = 0; i < pages.length; i++) {
        var e = document.createElement("div");
        var eid = "dynamicdiv-" + i;
        e.id = eid;
        e.style.cssText = 'position:absolute; left: ' + left + 'px; color: #0000bb;';
        maindiv.appendChild(e);
        $('#' + eid).load(pages[i]);
    }

My pages variable is an array of strings of urls. They are all html pages and have their own parameters. The problem I'm having is with jquery load(). It does not appear to be passing the parameters I need to create the page. Instead, it's passing the parameters from my parent page. The CSS on these pages are also not loading.

I'm fairly new to javascript, any help would be greatly appreciated.

Example url: http://example.com/index.html?param1=value

Any ideas? Thanks!

"It does not appear to be passing the parameters I need to create the page" What parameters are you talking about ? URL parameters ? — bviale, Mar 10 '15 at 14:06
Small performance tip: use document fragment to store dynamically created divs. When a loop finishes than append the fragment to any element you want. — sunpietro, Mar 10 '15 at 14:11

score 2 · Answer 1 · answered Mar 10 '15 at 15:04

2

jQuery load function is fine and works perfectly, you should looking for this problem in either your JavaScript codes or at your server side, which creates HTML pages. So some guidelines would be as follows

Put a consol.log(...) before that jQuery load function and make sure the loading URL is exatcly what you want.
Open that URL in a new tab in your browser and check whether its HTML codes/contents is okay or not.

Also note that if dynamically loaded HTML codes have CSS stylesheets, you should preload them first.

As a side note, I really wonder why do you use pure JavaScript to creating/attaching elements when Super Powerful jQuery is present.

for (i = 0; i < pages.length; i++) {
    $('<div></div>')
        .attr('id', "dynamicdiv-" + i)
        .css({'position': 'absolute', 'left', left + 'px', 'color', '#0000bb'})
        .appendTo(e);

    $('#' + eid).load(pages[i]);
}

answered Mar 10 '15 at 15:04

frogatto

28,539
11
83
129

The loading url is exactly how I want and if I open the url in it's own page it loads perfectly how I would expect and want it to. Btw, does it matter that the dynamically loaded HTML also has javascript that needs to be executed? – bustedware Mar 10 '15 at 15:35
@sc2bigjoe Nope, Every script elements will be executed *immediately* after have been attached to the page, so your JS codes will be executed when its corresponding element have been attached. – frogatto Mar 10 '15 at 15:49
the javascript is getting executed but parameters are still not being caught. How should I be accessing parameters in child page? Currently I'm using window.location.href? – bustedware Mar 10 '15 at 15:57
@sc2bigjoe Where do you want to use those parameters, client side or server side? – frogatto Mar 10 '15 at 16:07
the parameters are parsed client side and used to communicate to server side, that way it knows which data to grab to display on client side. – bustedware Mar 10 '15 at 16:14
@sc2bigjoe so you should have a look at [this page for parsing query string](http://stackoverflow.com/q/2090551/1841194) – frogatto Mar 10 '15 at 16:28
@sc2bigjoe then look at [this page for passing these parameters to the server](http://stackoverflow.com/q/14757691/1841194) using jQuery load function – frogatto Mar 10 '15 at 16:29
is that not what I have been doing though? I'm fine with parsing the parameters, if they were there... my jQuery load function doesn't look any different than what the link is doing either other than using encodeURIComponent which I don't believe will help me – bustedware Mar 10 '15 at 17:03

score 0 · Answer 2 · answered Mar 10 '15 at 14:12

0

Concerning the CSS issue :

You should not load entiere pages with this function. This function is designed to load a "partial page" (no or tag, just the inner body).

Your css should be contained in your main page, and the load should help you to load only the required html (which will use the css of your main page).

Concerning the parameters issue :

Can you provide your URL with the parameters ? Passing URL parameters with load() is supposed to work.

answered Mar 10 '15 at 14:12

bviale

5,245
3
28
48

an example url: "http://www.example.com/child_page.html?param1=value". I'm creating a dashboard and the pages variable holds the pages I want in my dashboard but if I can't preserve the css then I may be going about this the wrong way. – bustedware Mar 10 '15 at 14:20
Why do you say that the parameters are not passed ? Are you sure you don't receive them in the requested URL ? – bviale Mar 10 '15 at 15:09
I'm positive. The window.location.href is only giving me the params from the parent page, not the passed in url to the jquery load function. I've been outputting them to console – bustedware Mar 10 '15 at 15:23

score 0 · Answer 3 · answered Mar 10 '15 at 14:20

0

maindiv.appendChild(e);

instead of

maindiv.appendChild(element);

or am I missing something ?

answered Mar 10 '15 at 14:20

Yolan

1
2

Pass parameters to dynamically created div element?

3 Answers3