1

I am creating a portfolio site that I'd like pull in partial HTML files through an AJAX request. This is the basic HTML:

    <div id="portfolio">
      // This will be replaced
    </div>
    <a href="#" id="fire">Click Me</a>

The jquery code that I am using looks like this:

    $( "#fire" ).click(function() {
        $( "#portfolio" ).load("partial.html #portfolio > *");
    });

This works, and I'm able to load the individual partial pages, but I cannot figure out how to have scripts run on the inserted HTML. I'm using Foundation Orbit, and I want to have these sliders function properly after the AJAX call. I thought maybe it was a conflict, so I also tried using slides.js, but that didn't work either. I have all the dependencies and needed scripts in my index file. What do I need to do to have the Orbit script apply to content on the page after the AJAX call?

I have a functioning plunkr that shows the problem I'm having. I'm just learning all this, so apologies if there is a super obvious answer, but I haven't found it on the site.

Here is the plunkr. It has a working Orbit slider to prove -- to myself -- that the script is working.

Thanks in advance!

Chris Baker
  • 49,926
  • 12
  • 96
  • 115
gushags
  • 43
  • 5
  • What code isn't working on the dynamically loaded HTML? If it involves something like initializing a plugin on an element (or set of elements) then you'd need to re-initialize on any elements added afterward. – David May 14 '14 at 17:42
  • @Bamar -- this question does not duplicate the referenced question. There is a specific javascript call related to Foundation Orbit, there is no "live" version of the plugin. – Chris Baker May 14 '14 at 17:46
  • It's a basic slider that is brought in. I guess it's re-initializing the element that I don't understand. @Barmar believes this is a duplicate question, but I'm not sure I understand the answer in that question... How do I re-initialize something, or what does that mean exactly. Sorry: beginner. – gushags May 14 '14 at 17:47
  • Sorry, I misunderstood, I thought you were trying to bind an event handler. For initializing plugins, you have to do it in the AJAX callback function. – Barmar May 14 '14 at 17:48
  • 2
    I've reopened the question. – Barmar May 14 '14 at 17:48
  • @Barmar -- now HERE is a duplicate: http://stackoverflow.com/questions/17111624/how-to-dynamically-load-foundation-orbit :) – Chris Baker May 14 '14 at 17:51

1 Answers1

0

You need to use a callback function, which is an optional argument for load()

$( "#portfolio" ).load("partial.html #portfolio > *", function (response) {
    // executed after query is complete
});

After you add a new Orbit slider to the page, you will have to initialize it:

$(document).foundation('orbit').init();

... so, you'd do that in your callback function.

Documentation

Chris Baker
  • 49,926
  • 12
  • 96
  • 115
  • Thanks so much. That worked. Really appreciate how fast you answered. Sorry I can't upvote -- just joined. – gushags May 14 '14 at 17:57
  • @gushags No problem! When an answer (or question) is marked "community wiki", it means that the answerer has opted out of reputation gain from upvotes, so it really isn't a concern :) – Chris Baker May 14 '14 at 18:03