Can I push array into .load in jQuery?

Question

So this first jQuery works. It loads a specific section of another html page into an id of #main_text.

$(function() {
  $('[id^="nav_"]').on("click", function() {
    var letter = this.id.split('_')[1];
    $("#main_text").load("page" + letter + ".html #main_text p,h2,h3,span #hidden");
  });
});

I now want to load multiple html files into that #main_text. So I tried to push them into an array and then .load that array. It's not working. Is this even possible?

$(document).ready(function() {
    var array = [];
    array.push('page_mark1.html');
    array.push('page_mark2.html');
      $('#mark').on("click", function() {

        $("#main_text").load('array');
      });
});

No Chris, what you are trying to do is kind of confused. You simply cannot load html pages that way. — LoreV
– LoreV, Commented May 10, 2016 at 18:50
Darn. I'm trying to pull div content from multiple pages into one page. Is there any way to do that? I can pull div content from one page into another just not multiple pages. — Chris
– Chris, Commented May 10, 2016 at 18:54

Ram · Accepted Answer · 2016-05-10 19:57:17Z

1

load method doesn't accept an array of urls. Also note that if you want pass the array you should pass array an not "array" (which is a string) to the function.

You can use the $.get function instead of the load method:

// create an array of deferred objects ( array of Ajax deferreds )
function getDef(urls) {
   return urls.map(function(url) { return $.get(url) });
}

// Pass the array to $.when
// the callback is called when all the requests are complete
$.when.apply($, getDef(array))
 .then(function() {
      // concatenate the strings based on the unknown length of arguments
      // `[].slice.call(arguments)` converts the special 
      // `arguments` object into a regular array
      var allContents = [].slice.call(arguments).join('');
      $("#main_text").html(allContents);
  });

You can also define a jQuery function:

$.fn.loadMany = function(urls) {
    var $this = this;
    urls = urls.map(function(url) { return $.get(url) });
    $.when.apply($, urls)
     .then(function() {
         $this.html([].slice.call(arguments));
     });
    return $this;
}

$("#main_text").loadMany(array);

edited May 10, 2016 at 19:57

answered May 10, 2016 at 18:58

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Chris Over a year ago

I think I'm in over my head. I can't get either of these to work. I don't see where the onclick event is either.

Ram Over a year ago

@Chris There is no click handler in the code. Put the jQuery function definition ($.fn.loadMany = function(urls) {... lines) before the $() call and replace the load call with loadAll.

Chris Over a year ago

I'm going to have to muddle through with this for a while to piece it together. Man, you read one jquery book and think you can do this stuff.

Ram Over a year ago

@Chris Sorry if the code is confusing. I know that I sometimes create quasi-cryptic scripts. Maybe that's because I'm a freelancer.

Chris Over a year ago

Thanks for commenting your code. Big help as I'm learning. I'm still unclear where to add the click handler. :(

|

Collectives™ on Stack Overflow

Can I push array into .load in jQuery?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related