Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Get array of css & js links from external file(AJAX)

  1. #1
    Join Date
    Jan 2011
    Location
    QLD, Australia
    Posts
    23
    Thanks
    3
    Thanked 1 Time in 1 Post

    Question Get array of css & js links from external file(AJAX)

    Hi,
    I have an ajax script which gets an external file(html/php etc...) and loads it into an assigned DIV container, this works great, but what I am trying to do is get an array of any .js and/or .css path/filenames from within that external file so I can include them in the parent HEAD section.

    I have a function that will do the rest I just need a way of getting the path/filenames associated with .js .css from a <script> or <link> tag and be put into an array then passed to a function call

    e.g of desired result: incjscss('pathto/style.css', pathto/script.js');

    I have tried to read from the XMLHttpRequest responseText but it gives an error of "data is not available at this time" or similar, any help would be appreciated!

    Thanks!!!

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    This isn't a direct answer to your question, but it might solve your problem:
    http://www.dynamicdrive.com/forums/s...ad.php?t=55727
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Jan 2011
    Location
    QLD, Australia
    Posts
    23
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    Thanks for the info, but unfortunately it's not what I am looking for!

    Anyway goto go and sand bank front yard, the water is coming up pretty quick , cheers!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    This is a bit like mixing apples and oranges in the dark. Ideally you would be importing and parsing a valid XML (.xml) document. Then you could pick out the tags and the attributes of those tags that you wanted.

    But there's potentially another problem - how to get the script and the style link into the head of your 'top' page in a meaningful fashion.

    That error sounds like you're trying to parse the response before it's available. But since you're not being specific about the error, it could mean virtually anything.

    We really would need a link to your page and to the page(s) you would be importing. They do all have to be on the same domain. If testing locally, in some browsers they all have to be in the same folder.

    All that said, this 'works':

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var re = [/[^"]+\.css[^"]*/, /[^"]+\.js[^"]*/];
    	function incjscss(css, js){
    		alert('The css path is: ' + css + '\nThe js path is: ' + js);
    	}
    	function process(d){
    		var r1, r2;
    		r1 = (r1 = re[0].exec(d))? r1[0] : null;
    		r2 = (r2 = re[1].exec(d))? r2[0] : null;
    		incjscss(r1, r2);
    	}
    	$.get('test.htm', process);
    });
    </script>
    </head>
    <body>
    </body>
    </html>
    It requires one and only one script tag and one and only one link style tag. The script tag's src attribute must be to a .js file and the stylesheet link tag's href attribute must be to a .css file. There can be no other .css or .js files mentioned on the imported page, at least not before the tags we are interested in.

    If there are more script and/or stylesheet link tags and you need them all, the code would have to be expanded. It makes no attempt to insert the script or the style tags into the head of the 'top' page, it simply alerts the paths and filenames.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2011
    Location
    QLD, Australia
    Posts
    23
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    Thanks a bunch this works great it is almost exactly what I am looking for!

    I slightly modified the code to work with a function to add the relevant tags to the head section of the parent page, all I really need now to make it perfect is a way to include ALL script and link paths instead of just one of each!

    The code I have now;

    Code:
    var loadedobjs= '';
    
    jQuery(function($){
    	var re = [/[^"]+\.css[^"]*/, /[^"]+\.js[^"]*/];
    
    	function process(d){
    		var r1, r2;
    		r1 = (r1 = re[0].exec(d))? r1[0] : "";
    		r2 = (r2 = re[1].exec(d))? r2[0] : "";
    		loadobjs(r1, r2);
    	}
    	$.get('test.htm', process);
    });
    
    function loadobjs(){
    if (!document.getElementById)
    return
    for (i=0; i<arguments.length; i++){
    var file=arguments[i]
    var fileref=""
    if (loadedobjs.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
    if (file.indexOf(".js")!=-1){ //If object is a js file
    fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript");
    fileref.setAttribute("src", file);
    }
    else if (file.indexOf(".css")!=-1){ //If object is a css file
    fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", file);
    }
    }
    if (fileref!=""){
    document.getElementsByTagName("head").item(0).appendChild(fileref)
    loadedobjs+=file+" " //Remember this object as being already added to page
    }
    }
    }
    Thanks again it really helps!

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var re = [/[^"]+\.css[^"]*/g, /[^"]+\.js[^"]*/g];
    	function incjscss(){
    		var r = '';
    		for(var i = 0; i < arguments.length; ++i){
    			r += arguments[i] + '\n';
    		}
    		alert(r);
    	}
    	function process(d){
    		var r1 = d.match(re[0]) || [], r2 = d.match(re[1]) || [];
    		incjscss.apply(window, r1.concat(r2));
    	}
    	$.ajax({url: 'test.htm', cache: false, success: process});
    });
    </script>
    </head>
    <body>
    </body>
    </html>
    For what you have loadobjs(), it will work:

    Code:
    loadobjs.apply(window, r1.concat(r2));
    Now it will take in all the script tags and stylesheet link tags. However, if there is any mention of .css or .js on the page that aren't stylesheet links or script tags respectively, these will be attempted to be loaded as well.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Oziam (01-13-2011)

  8. #7
    Join Date
    Jan 2011
    Location
    QLD, Australia
    Posts
    23
    Thanks
    3
    Thanked 1 Time in 1 Post

    Thumbs up

    You're a CHAMPION, thanks that's perfect, aslong as the requested page doesn't have any href css or js links things will work nicely, I doubt that will be too much of a problem though.

    Thanks again for all your help!!!!

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Here's a more refined version:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var re = [/<link [^>]*href *= *"[^"]+\.css[^"]*(?="[^<]*>)/gi, /<script [^>]*src *= *"[^"]+\.js[^"]*(?="[^<]*>)/gi, /.*(href|src) *= *"/i];
    	function incjscss(){
    		var r = '';
    		for(var i = 0; i < arguments.length; ++i){
    			r += arguments[i] + '\n';
    		}
    		alert(r);
    	}
    	function process(d){
    		var r = (d.match(re[0]) || []).concat(d.match(re[1]) || []);
    		$.each(r, function(i, v){
    			r[i] = v.replace(re[2], '');
    		});
    		incjscss.apply(window, r);
    	}
    	$.ajax({url: 'test.htm', cache: false, success: process});
    });
    </script>
    </head>
    <body>
    </body>
    </html>
    This one only matches link tags with href attributes including .css, or script tags with src attributes including .js. It's case insensitive. So unlike the previous version will also match .JS and .CSS and <LINK, etc.

    Like the previous version, and this is a limitation I did not mention before but that did and still does exist, you have to have the href or src attribute on the imported page quoted.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Oziam (01-13-2011)

  11. #9
    Join Date
    Jan 2011
    Location
    QLD, Australia
    Posts
    23
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    Hey Thanks again! It just keeps getting better,
    if I were a rich man(sounds like a song coming on, LOL) I would pay you well,
    but I'm not so I can just say I really appreciate your help!
    Also I think it's a good thing the paths need to be quoted, it's good practice to use them when writing html.

    I also added a small bit of code to the process function to stop
    if it returns an empty result.

    Final Code:
    ========
    Code:
    jQuery(function($){
    
      var re = [/<link [^>]*href *= *"[^"]+\.css[^"]*(?="[^<]*>)/gi, 
    	    /<script [^>]*src *= *"[^"]+\.js[^"]*(?="[^<]*>)/gi, 
    	    /.*(href|src) *= *"/i];
    
      function process(d){
      var r = (d.match(re[0]) || []).concat(d.match(re[1]) || []);
      $.each(r, function(i, v){ r[i] = v.replace(re[2], '');
      });
      if (r == "" || r == null || typeof(r) == 'undefined'){
      return
      }
      else{ loadobjs.apply(window, r);}
      }
      $.ajax({url: 'page.html', cache: false, success: process});
    });
    Seems to work on all browsers I have tested, IE, Opera, Firefox & Safari

  12. #10
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello guy(s),

    I am having trouble with this appropriate solution here. Are you saying that this code goes on the external file? or on the main file that host the "DIV container"?

    Also, does the js and css have to be in the same folder?

    Thanks in advance for the reply...

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •