Question

In my actual project, the users have the option to click a button in order to enter in an “edit mode” for their websites. After clicking the button, I have to download several JS and CSS files and I was doing it using the following code:

//Start edition mode
(function(){
    $.get('/helpers/edit/v/edit.php',function(data){
        $(data).appendTo('body');
        var css = '/helpers/edit/css/edit.css';
        $.get(css,function(data){
            $('<link/>')
                .attr({
                    'rel':'stylesheet',
                    'href':css
                }).appendTo('head');
            $("body").trigger("editReady");
        });
    });
})();

It works fine but now I need to insert more JS and CSS files and if I just keep nesting jquery get requests the code will become ugly and hard to mantain, which I want to avoid and shows me that this is probably not the best way to accomplish the task.

I also tried to use Yep Nope (which I’m already using in other parts of the project) inside the first get request but it seems not to work (I receive no error messages but it just doesn’t work).

Does anyone have an idea of how to do this in a way that doesn’t get so ugly and, mainly, is easy to mantain (considering that I have to trigger an event when all the JS/CSS are properly included)?

Thanks in advance!

Answer 1

I had a similar issue loading JSON from multiple sources recently. I modified that code and came up with this. The gist of it is to loop through get requests to your various URL’s and then trigger your “editReady” event when the number of requests completed is equal to the number of URL’s in the data_urls array (i = data_urls.length).

I originally wrote this in CoffeeScript so it’s possible that I messed up a bracket or something somewhere…

function() {
  var data_urls = ['/helpers/edit/v/edit.php', '/helpers/edit/css/edit.css'];
  var i = 0;
  var _i, _len;
  for (_i = 0, _len = data_urls.length; _i < _len; _i++) {
    $.get(data_urls[i], function(data) {
      if (data_urls[i].match(/\.php/).length > 0) {
        $(data).appendTo('body');
      } else if (data_urls[i].match(/\.css/).length > 0) {
      $('<link/>')
        .attr({
          'rel':'stylesheet',
          'href':css
        }).appendTo('head');
      }
      i += 1;
      if (i == data_urls.length) {
        $("body").trigger("editReady");
      }
    });
  }
}