0

When I click a botton I make an ajax call which loads different html code inside a div with the id 'main'. I have no problems getting the html code to show, but I can't find a way to change/add/include css and js code to my current page.

Or actually, I have found many different ways but non does what I want it to do.

First I tried to send over the link and script tags as strings inside a json object (with my other html code) and inserted them where I wanted them to be.

$('#main').children().remove();
$('#main').append(data.html);
$('body').append(data.js);
$('head').append(data.css);

it seems like this inserts them correctly when I 'inspect elements' and look under the 'sources' tab in the browser (chrome), but they don't execute/run.

Then, I tried to add id attributes to my css and js elements and then change the href and src attributes respectively (I have tried doing this both before and after my ajax call but both inside the click event). This allowed me to take away the css and js which belonged to the previous html code that was inserted in the div which is what I want.

$('#lessAjax').attr('href', 'location/style.less');
$('#jsAjax').attr('src','location/main.js');

and they are also included when I 'inspect elements' and look under the 'sources' tab in the browser (chrome), but obviously they don't execute/run either since this is pretty much the same thing as I did in the first example (only that now the code which is not used in my new view is taken away).

I then thought I had found a solution to the js file after finding the $.getScript() method since it executed my script which is directly under $(document).ready(function(){....}, but I noticed that the file cannot be found anywhere when I 'inspect elements' or when look under the 'sources' tab in the browser (chrome) so there is no way to take away or debug the code.

I have also tried 

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

which includes the file but doesn't execute/run/work either.

I don't want to just include css and js code within script and style tags. I want to be able to switch css and js files as I change html code inside this div with Ajax (jQuery).

I have tried many more things in the 5 hours I spent trying to do this but I can't remember them all now. Surely this must be a common thing to do? Or are there any reasons for why I really shouldn't do this?

Any help would be much appreciated.

Kriss
  • 396
  • 3
  • 12
  • The event handlers certainly should work, so there must be a reason other than being included in a script that was added later that is causing a problem. Can we see some of the code you are trying to inject? – Reinstate Monica Cellio Jan 14 '14 at 09:28
  • Thank you @Archer). jQuery.getScript() seems to work for the js file now. I have done many changes since I tried it last and don't know why it didn't work before. But where is it stored? I can't find it in inspect elements nor in the sources? How do I get rid of it when I want to change js file? – Kriss Jan 14 '14 at 09:39
  • The script is simply loaded and run - it doesn't get included in the page as an element, like scripts in the head. To be honest, it sounds like you're trying to do something in a bad way. You'll be falling over problems like this repeatedly with loading and deleting scripts. Is there a reason you can't simple have a common.js and common.css that is shared between all the pages you load? (Incidentally, removing a script from a page will not remove anything it created - window objects, such as functions and global vars, handlers etc..) – Reinstate Monica Cellio Jan 14 '14 at 09:44
  • This should help with the css injection... http://stackoverflow.com/questions/805384/how-to-apply-inline-and-or-external-css-loaded-dynamically-with-jquery – Reinstate Monica Cellio Jan 14 '14 at 09:50
  • @Archer I have tried the 'scc injection' but it doesn't apply my css code. Maybe I don't have to take away the js code for the page to work but how to I debug if I don't have the js code in the browser's dev tools? – Kriss Jan 14 '14 at 10:04
  • @Archer I guess I could put all code in the main js and css files, but surely there must be a way to do this so that I can separate my code. I makes it much easier to manage in folders. – Kriss Jan 14 '14 at 10:11
  • Not if you're doing what you describe. It's easier to have either everything in 1 file, or multiple files that are all included in the head. It looks like you're making this much more complicated than it needs to be. Also, bear in mind caching, which means that all this effort will be pointless once someone has visited your site once. – Reinstate Monica Cellio Jan 14 '14 at 13:15

1 Answers1

0

jqueryMobile: How to load external Javascripts

Can I load external stylesheets on request?

However please consider using a templating engine for content like this. There are many out there like underscoreJS and even frameworks that support them like Knockout, AngularJS and Backbone.

$("#somebutton").click(function(){
    var path = 'path to css';
    $.ajax({
        url: path,
        type:'HEAD',
        error: function()
        {
            alert("failure")
        },
        success: function(result)
        {
            alert("success")
        }
    });
})
Community
  • 1
  • 1
Eirinn
  • 836
  • 1
  • 10
  • 23
  • the css doesnt' work. It's inserted but doesn't execute/run/get-applied-to-my-elements – Kriss Jan 14 '14 at 09:46
  • getScript doesn't work and getting CSS doesn't work. Maybe it's a problem with your code rather than the getters? I have updated my answer with a test snippet. Remember that only loading files from the same domain will work. The snippet will tell you if the AJAX is actually getting the file (not if it's applied). – Eirinn Jan 14 '14 at 11:15
  • Thanks for your reply. The test code gives me 'success' but the css is still not applied. What does it mean that files have to be from the same domain? Do they have to be in the same namespace/folder? Right now the div content I'm trying to swap between are stored in two separate sub folders from where the main html code is. Are you saying this wont work and that I have to have all code in the main folder? – Kriss Jan 14 '14 at 22:29
  • Try making a new, standard, clean document with no additional code. Then try to inject JS and CSS using the methods above. If it works in the clean document then there's an issue with your work document. Domain issues will only arise when importing between domains/servers so like, google.com to rosefalk.dk. In your case it should be ok :) – Eirinn Jan 17 '14 at 08:42