Accessing variable in HTML loaded with Jquery .load()

Question

This probably has a simple answer, but I can't seem to find it anywhere. I'm loading a local HTML file into a modal overlay. The HTML file has a slideshow in it. I'd like to set a variable and access it in the loaded HTML to know which slide to start with.

I've tried sending it with the URL as a GET variable. I've tried sending it after the url in curly brackets and retrieving as POST. I've tried setting a global variable, but I'm fairly certain it's out of scope, and I can't seem to get it anyway.

Here is some relevant code:

$(document).ready(function() {

    $("a.slide0").click(function() {
        $( '#revealLayer' ).load( 'slideshow1.html?slide=0');
        $( '#revealLayer' ).appendTo( '#revealModal' );
        $( '#revealModal' ).reveal();
        return false;
    });

    $("a.slide1").click(function() {
        $( '#revealLayer' ).load( 'slideshow1.html?slide=1');
        $( '#revealLayer' ).appendTo( '#revealModal' );
        $( '#revealModal' ).reveal();
        return false;
    });

});

How can I get this on the receiving end? Help!

Community · Accepted Answer · 2017-05-23 12:06:37Z

1

Already explained how to do this in this post here: problems with jquery load()

Quick Mockup (Not Tested):

This assumes that #revealModal is the div you want the information in, and that slideshow1.html?slide=[0-1] urls are actually linking to PHP files.

$(document).ready(function() {
    $("a.slide0").click(function() {
        $('#revealModal').load('slideshow1.html', {slide:'0'}, function(){
            $(this).reveal();
            return false;
        });   
    });

    $("a.slide1").click(function() {
        $('#revealModal').load('slideshow1.html', {slide:'1'}, function(){
            $(this).reveal();
            return false;
        });
    });
});

The slideshow1.html?slide=1 and slideshow1.html?slide=0 will need to handle the $_POST['slide'] variable in PHP for this.

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Feb 20, 2013 at 2:35

Solomon Closson

6,25715 gold badges82 silver badges121 bronze badges

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

5 Comments

Imaginary Over a year ago

Unfortunately, the server this will live on doesn't have PHP installed. I was hoping to work out a Javascript solution. They do have ColdFusion, so I could probably do it with that. I just avoid it because I hate CF.

Solomon Closson Over a year ago

Just try it and let me know how it goes. Does that url provide something different when you browse to it via the browser? If slide is 0 and 1? Are they both returning the same content, or different content? My hunch is that you won't need to worry about the php...

Solomon Closson Over a year ago

You may also try getting rid of the quotes on the numbers '0' and '1'

Imaginary Over a year ago

I'm using the Cycle plugin, and it has a parameter to tell which slide to start with. Let's say the parent page has 4 thumbnails, corresponding to 4 slides (slides0-7) in the loaded slideshow. If you click on thumbnail0 it will load the slideshow.html into the modal and the startingSlide option will be set to '0' when the Cycle plugin is initialized. If thumbnail1 is clicked, slideshow.html is loaded and startingSlide is set to '1'. So I need to pass that number into the loaded HTML. I'm going to try your suggestion now!

Imaginary Over a year ago

Well, I am able to get the POST variable using PHP. That will work locally, but on the client's server I'm out of luck. It's probably easy enough to get the POST variable with CF. A quick search here on SO brings it up several times. I guess I'll just go with that. I'm certain is has something to do with client-side vs server-side that I can't get it with JS. I'm going to leave this question open for a bit in case someone can either conclusively say it's not possible, someone solves it with JS, or no one does anything. Thanks for your help!

MatRt · Accepted Answer · 2013-02-20 02:27:47Z

0

You should may be used the thirs parameter of the load() method with is a callback that will be called when the load process is finished (equivalent to the ready()).

Try this:

$("a.slide0").click(function() {
    $('#revealLayer').load('slideshow1.html?slide=0',
                           {},
                           function(response, status, whr) {
        $('#revealLayer').appendTo( '#revealModal' );
        $('#revealModal').reveal();
    });

    // Cancel the click
    return false;
});

The method definition is:

.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )

answered Feb 20, 2013 at 2:27

MatRt

3,5441 gold badge22 silver badges15 bronze badges

3 Comments

Imaginary Over a year ago

This is the sort of answer I've been finding, so I don't doubt you, but I can't understand how it solves my problem. I might just be thick in my understanding of what a callback does. With this structure, how would I now access the value of "slide" (which should be zero) in the loaded content with jQuery?

Solomon Closson Over a year ago

@Imaginary - the slide variable and any other variables should be handled within the 2nd parameter of the .load() method call to be able to grab it via $_POST.

MatRt Over a year ago

You are in a function that will be called when the content is loaded, linked to the click of your link a.slide0, so in this callback you know your slide (?).

Collectives™ on Stack Overflow

Accessing variable in HTML loaded with Jquery .load()

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related