Log in

View Full Version : Ajax Content External CSS Conflict/Issue


wazman21
10-17-2011, 12:42 AM
1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem:

This script works fantastically except for one issue for me - loading styles.

The basic gist of my issue is this: My Ajax content script loads in a page that is auto-generated by some race-timing software called "Orbits". Because of this, I have no control over the page's code, and it gets updated on race nights when I am not available/present, so altering their HTML is not an option.

The auto-generated page has styling in the head tags between <style></style> tags, and does not use selectors to restrict where they go. This means when I load in the html document, the styles in that page are applied to the whole site.

Is there a way I can strip the <head> or <style> tags when loading an external page in using the script, or a way to override that <style> stuff during the function?

To see the page in action (designed as an iPhone web app so best viewed on one if possible), you can go to:

http://www.wss-live.com/iui/web-app/#_home

Click "Live Results"
Select "A Main" from the drop down menu - that should load in the external file.

The external file:
http://www.wss-live.com/grids/WSS%202010-11%20Perth%20R16%20-%20A%20Main.html

Really hoping someone can help me! Thanks in advance!
jscheuer1
10-17-2011, 02:26 AM
I don't have an iPhone to test on. However, I can tell you that what you want can be done. But it's pretty complicated to modify this script to do it. On the other hand, you're already using jQuery. With jQuery it's relatively easy to do.

What I would suggest is to scrap the Ajax Content script and update to jQuery version 1.6.4. Then where you have:


ajaxpage(gridID, 'contentarea');

replace that with:


$.ajaxSetup({cache: false});
$('#contentarea').load(gridID + ' div:not("div:first"),table');

You only need to declare:


$.ajaxSetup({cache: false});

once for the page, so that could go before the function and then you could chain off of the .empty() for the #contentarea selector:


<script>
$.ajaxSetup({cache: false});
function grids()
{
var g = document.gridform.gridlist.selectedIndex;
var gridID = document.gridform.gridlist.options[g].value;
var gridID = "http://wss-live.com/grids/" + gridID + ".htm";

$("#loading").fadeIn(200);
$("#loading").css("visibility", "visible");

$('#contentarea').empty().load(gridID + ' div:not("div:first"),table');

$("#loading").fadeOut(3000);
}
</script>

The browser cache may need to be cleared and/or the page refreshed to see changes.
wazman21
10-17-2011, 04:24 AM
Thank you for the detailed reply John, very much appreciated!

I was still having trouble with the JQuery load function not working, so here is the solution I ended up using (which seems to be working very well and quickly):

Using JQuery, instead of the load function, I used the .ajax() function, and appended the HTML to the div area. Instead of racking my brain trying to omit the stylesheets/head tags, I finally clicked it would be better to simply append a stylesheet after calling the .ajax() function that overrides the problematic tags. Here is the result:

<script type="text/javascript">
$.ajaxSetup({cache: false});
function liveresults()
{
var live = document.liveform.livelist.selectedIndex;
var liveID = document.liveform.livelist.options[live].value;
var liveID = "http://wss-live.com/grids/" + liveID + ".html";

// STILL HAD PROBLEMS WITH THE FOLLOWING LINE:
// $('#liveresultsarea').empty().load(liveID + ' div:not("div:first"),table');

// THIS SOLUTION IS WORKING:

$("#liveresultsarea").empty();

$.ajax({
url: liveID,
context: document.body,
cache: false,
success: function(html){
$("#liveresultsarea").append(html);
}
});

var link = $("<link>");
link.attr({
type: 'text/css',
rel: 'stylesheet',
href: 'cssfixer.css' /* custom stylesheet to fix problem css, using "!important" tags */
});
$("head").append( link );

}
</script>
jscheuer1
10-17-2011, 07:15 AM
Great! If that fixes it though, and if you're doing that more than once on a page, it would be simpler just to have this in the head of the page:


<link rel="stylesheet" href="cssfixer.css" type="text/css">