Change a URL in a AJAX call using jQuery

Question

I am using a jQuery photo wall plugin. I want to have a pull down menu that lets users switch the gallery.

Can anyone help me with the code for this?

This is what I have so far

http://codepen.io/anon/pen/bFsHv/

I don't know how to get the revised variable into AJAX call.

Matt Van Der Westhuizen · Accepted Answer · 2014-04-08 13:32:48Z

2

The condensed example below should work - provided the photo wall plugin supports reloading with a different URL.

$(document).ready(function(){
    // TODO: Init photo wall plugin

    // Moved photo loading AJAX call into a function that can be re-used whenever the photos need to be reloaded...
    var loadPhotos = function(photoUrl) {
        console.log(photoUrl);
        // TODO: Photo loading code goes here
        // $.ajax({url: photoUrl + ...
    }

    // Got rid of the currentURL variable... instead just call loadPhotos with the new URL whenever it needs to change
    $('#gallery-switcher').on('change', function(){
        var value = $('#gallery-switcher option:selected').val();

        if (value == 'home') {
            loadPhotos('https://picasaweb.google.com/data/feed/api/user/106385870100722729161/albumid/5985138864602491185');
        } else {
            loadPhotos('https://picasaweb.google.com/data/feed/api/user/106385870100722729161/albumid/5985463574421076049');
        }
    });

    // Initial load
    loadPhotos('https://picasaweb.google.com/data/feed/api/user/106385870100722729161/albumid/5985138864602491185');
});

I had the full version on CodePen but it was failing to save the comments for some reason...

edited Apr 8, 2014 at 13:32

answered Apr 8, 2014 at 13:06

Matt Van Der Westhuizen

4704 silver badges6 bronze badges

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

5 Comments

Ricky55 Over a year ago

wow! thank you so much. I'll have a go with that. I knew that I wasn't refreshing the AJAX call but I didn't know how to do.

whodares Over a year ago

You forgot a starting call to your loadPhotos function. Now it won't show on document load.

Matt Van Der Westhuizen Over a year ago

Thanks for pointing that out Thomas - knew I was forgetting something... Just edited it in.

Matt Van Der Westhuizen Over a year ago

Yeah, it should work - just insert the bits I omitted from your original code at the TODOs.

Ricky55 Over a year ago

Matt, you are a legend sir!!!!!!!! only went and worked like a charm. Thank you so very much. Really appreciate your help my friend.

whodares · Accepted Answer · 2014-04-08 12:53:44Z

0

You are changing the value, but not refreshing your photowall contents. The Photowall will only run once, which is after the document has finished loading.

I'm not familiar with photowall, but I guess you'd need to redo your ajax call in the onchange event where you're changing your url right now. You'll probably need to reload your plugin in the onchange every time your user selects a different option.

I can't really help you with that as I'm not a photowall user, but here are the steps I would take:

Make the photowall init a function so you don't have duplicate code
Run the function in the document ready function
Not sure if needed, but empty the control currently loaded with photowall before the next point.
Call the function at the end of your onchange

Hope this helps you a bit.

answered Apr 8, 2014 at 12:53

whodares

6965 gold badges12 silver badges28 bronze badges

1 Comment

Ricky55 Over a year ago

Thanks Thomas for your help, Matt's code above with your help worked great.

Collectives™ on Stack Overflow

Change a URL in a AJAX call using jQuery

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related