Styling Javascript rendered elements in HTML

[capmarketing]

This may be the ugliest bit of javascript you've ever seen... but can someone tell me why the elements come through un-styled even though I am clearly writing to divs that are classed and the stylesheet is pulled in?

Definitely falling victim to some noob error here, but which one? Perhaps ye stalwarts can help me...

http://192.241.204.101/leads/phase3.html

[theHop]

looking at the source, you have forgotten to close the last script tag.

Also. the callback function on your json function seems to be doing alot of document.writes. maybe pick an elementbyid and use innerHTML += instead of document.write.

the only reason I say this is because when I view your source in chrome developer tools the head section is empty. document.write can replace the whole page if fired in the head so deleting the reference to the style sheet.

[capmarketing]

so closed the script, and i don't think there are any document.writes in the head.... lots in the body... the whole invisible head thing is mysterious to me. I will try to swap out the pick element by id, but I can't help but feel that there's a subtler tweak that might jimmy everything into place... any suggestions?

[JorgeM]

Looks like part of the issue is at the end... no closing script tag. Also, run your site using a browser with Dev tools, such as Chrome. You can look at the console tab for potential issues.

<script type="text/javascript">
classes.objWrapper.all.background-color = "#6cc5db"
<div id="Leads-Maintable"> </div>
</body></html>

[capmarketing]

that </script> is there now, same issue persists... may have to do with the head being overwritten as mentioned above... does anyone know any more about how to fix that / why that's happening?

[JorgeM]

I'm not familiar with this type of approach... but using the Chrome dev tools, yes I've verified that there is nothing written within the head section...

Doesnt look like this is working in your if..then block? not sure since I'm not really following that process...

$('<link rel="stylesheet" type="text/css" href="' + url + '" />').appendTo('head');

[theHop]

I just used the chrome dev tools and re-added the style sheet using a non-jQuery approach

var head = document.getElementsByTagName("head")[0];

var newLink = document.createElement("link");
newLink.setAttribute("rel","stylesheet");
newLink.setAttribute("href","style.css");
head.appendChild(newLink);

when I just view the source there is definately something written in there. can't quite see whats removing it

[theHop]

hmmm...just realised when I refresh your page I get a brief flash of code before the page is re-written. could be a sign of whats going on

[capmarketing]

thank you all very much... i've cleaned up the code some and I'm looking at it here now:

http://192.241.204.101/leads/phase4.html

trying to work the document.writes out of script and replace with getElementById... but having trouble creating the div in the first place with append. still hasn't clicked yet...

[capmarketing]

also my problem is reducible to:

http://192.241.204.101/leads/phase4int.html

If someone out there can make it draw "len" number of divs... That's really the nut.

C

[capmarketing]

I resolved this by changing the document.write to getElementById and creating all the ids in a seperate for loop, then getting them once they existed. Thank you all for pointing me in the right direction.

[JorgeM]

Thanks for the update. Glad to solved your issue.

[theHop]

glad you got it...I thought doing away with the document.writes would do the trick!
Make sure you mark it as solved.