0

I am trying to initiate some jQuery ($('#slider').leanSlider();) after a successful Ajax response. Putting it in the success callback isn't working. I found an answer here that I believe is related but I am having a difficult time understanding what I exactly have to do. How can I get that line to initiate after a successful Ajax response?

$('.post-link').click(function(e) {
    e.preventDefault();

    var post_id = $(this).attr('rel'),
        ajaxURL = site.ajaxurl;

    function projectShow() {
        $.ajax({
            type: 'POST',
            url: ajaxURL,
            data: {'action': 'load-content', post_id: post_id },
            success: function(response) {
                $('#project-container').html(response);
                $('#slider').leanSlider();    <--// This isn't initiating
                }
                return false;
            }
        });
    }
    projectShow();
});
Community
  • 1
  • 1
J82
  • 8,267
  • 23
  • 58
  • 87
  • Check if $.fn.leanSlider is defined using console. Also give some time after inserting HTML using timeout of callback function to initialize the slider. – gskema Jan 16 '15 at 12:24
  • Also implement an error handler and check wether the ajax call runs into an error – Exinferis Jan 16 '15 at 12:25
  • Why are you creating the `projectShow()` function on every click rather than creating it once somewhere and passing in `post_id` and `ajaxURL`? – Klors Jan 16 '15 at 12:37
  • @Klors That's a good question. I just tried taking the function out of the click event along with the two variables. Is there something else I have to do? Now when I click on `.post-link` nothing happens. – J82 Jan 16 '15 at 12:53
  • At its simplest, `function projectShow() {` would become `function projectShow(post_id, ajaxURL) {` and then `projectShow();` would become `projectShow(post_id, ajaxURL);`. Keep the variables declared where they were and just move the function. – Klors Jan 16 '15 at 12:57
  • @Klors Ok, so far I took the two variables and the function out of the click event, added in the variables to `function projectShow()` and also to `projectShow();`. Is there something else I need to do? When I click on `.post-link` nothing still happens. – J82 Jan 16 '15 at 13:02
  • Like I say, leave the variables where they were inside the click event. – Klors Jan 16 '15 at 13:04
  • @Klors Yes, I forgot to mention that I did that too. So the function is outside and the variables have been left in. Still nothing happens when I click on `.post-link`. – J82 Jan 16 '15 at 13:05
  • I'd go to the chat room, or have a look at some tutorials on function scope, or ask a new question if you can't already find a similar one on StackOverflow (I'm sure you could). It's probably something simple, but the comments aren't really the place to ramble on too long about it. :) – Klors Jan 16 '15 at 13:08
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/68958/discussion-between-klors-and-j82). – Klors Jan 16 '15 at 13:09

2 Answers2

1

The answer you linked to does not apply here. It would apply if you had code after the projectShow() call. As the code in question is in the callback, it will only be executed on success.

I noticed that the braces in your code are off, so that might be the first problem. The curly bracket before return false; closes the callback which makes the whole configuration object invalid. If that's not a copy and paste error, it will prevent the call from ever being made.

Check that your AJAX call is really made and comes back successful. Otherwise, the callback will never be called. However, except for the syntax error, you code looks ok to me.

jsfan
  • 1,373
  • 9
  • 21
  • as @jsfan said check you code return paths, and add -> error: function (xhr, ajaxOptions, thrownError) { alert("\nSTATUS: " + xhr.status + "\nError: " + thrownError); } to check if indeed you get incorect status code for request – SilentTremor Jan 16 '15 at 12:37
  • That was a copy/paste error. The Ajax call works fine except for that one line. – J82 Jan 16 '15 at 12:39
0
$('.post-link').click(function(e) {
    e.preventDefault();

    var post_id = $(this).attr('rel'),
        ajaxURL = site.ajaxurl;

    function projectShow() {
        $.ajax({
            type: 'POST',
            url: ajaxURL,
            data: {'action': 'load-content', post_id: post_id },
        }).done(function(response){
            $('#project-container').html(response);
            $('#slider').leanSlider();    <--// This isn't initiating
            return false;
        }).fail(function(error){
            //handle error
        });
    }
    projectShow();
});

.done() is prefferred to success jQuery.ajax handling continue responses: "success:" vs ".done"?

"jqXHR.done(function( data, textStatus, jqXHR ) {}); An alternative construct to the success callback option, the .done() method replaces the deprecated jqXHR.success() method. Refer to deferred.done() for implementation details."
http://api.jquery.com/jquery.ajax/

Community
  • 1
  • 1
Craicerjack
  • 6,203
  • 2
  • 31
  • 39