Trigger Jquery slider once AJAX loads

Question

I tried to follow the advice in another question but I may not be getting the syntax correct.

When I click on a div, it fires a JQuery call - which calls an AJAX function, loading a document. The AJAX call has to go back to the server and grab some calculation-heavy elements, so my idea is to have the JQuery slider slide down ONLY when the AJAX call has finished loading the document into the target div. Using the $.when ... .done(...) does wait until it's finished, but it just POPS the div all the way down, not giving me the nice "slide" on the first click.

BONUS: Would love to have the cursor change to a little "loading" or hourglass icon while it's waiting to let the user know something is happening. But this is not totally necessary.

The AJAX and Jquery:

function loadDoc(myUrl, id) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById(id).innerHTML =
                this.responseText;
        }
    };
    xhttp.open("GET", myUrl, true);
    xhttp.send();
}

$(document).ready(function () {

    $('.projSliderContent').hide();

    $('.projectSliders').on('click', function () {
        var targetArea = $(this).next('.projSliderContent');
        var urlToPass = $(targetArea).attr('url');
        var idOftarget = $(targetArea).attr('id');
        $.when(loadDoc(urlToPass, idOftarget)).done(   //fires AJAX func
            $(this).next('.projSliderContent').slideToggle("slow")
        );
    });
});

And here is the HTML:

 <div class="container-fluid" id="userProjectsSelectors">
        <div class="row-fluid">   
                <h2 id="projSlidersHeader">PROJECTS</h2>
                <div class="projectSliders" id="projleadSlider">
                    <h3>View Projects You Lead</h3>
                </div>
                <div class="projSliderContent" id="userLeadProjectsDiv" url='/my/url/here'>
                </div>
        </div>
    </div>

Here's a jsfiddle of it - it doesn't work properly but may help with visualization.

@CumminUp07 I'm pretty new to JQuery and AJAX, so forgive me if I'm misunderstanding you. I'm using that AJAX method in several places across my site, and not all of them trigger a slider. I'd like to reuse that `loadDoc` method if possible without tailoring it specifically to this Jquery call. — NateH06, Jul 31 '17 at 16:41

charlietfl · Accepted Answer · 2017-07-31T17:08:51.263

3

$.when() expects promises as arguments but your function doesn't return one.

Can simplify it to use jQuery ajax methods which do return a promise

function loadDoc(myUrl, id) {    
  return $.get(myUrl).then(function(data) {
    $('#' + id).html(data)
  });    
}

Or even easier use jQuery load():

$('.projectSliders').on('click', function () {
    var targetArea = $(this).next('.projSliderContent');
    var urlToPass = $(targetArea).attr('url');

    targetArea.load(urlToPass , function(){
       $(this).slideToggle()
    })
})

DEMO

edited Jul 31 '17 at 17:08

answered Jul 31 '17 at 16:56

charlietfl

170,828
13
121
150

That jQuery load() is exactly what I was looking for. Clean, and easy. Thank you! – NateH06 Jul 31 '17 at 19:10

U.P · Answer 2 · 2017-07-31T17:04:10.840

2

You are almost there.

The thing is, you are not waiting for the AJAX call to complete before you slideToggle

You should use Deferred

function loadDoc(myUrl, id) {
  var d1 = $.Deferred();
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById(id).innerHTML =
        this.responseText;
      d1.resolve();
    }
  };
  xhttp.open("GET", myUrl, true);
  xhttp.send();
  return d1;
}

Notice that I am returning a deferred object back to $.when. When the AJAX call is completed, I am resolving that deferred which then executes the .then() part

Learn more about Deferred here

PS. you fiddle is broken. you didn't load jQuery

edited Jul 31 '17 at 17:04

answered Jul 31 '17 at 16:51

U.P

7,357
7
39
61

Thanks - fixed the JSFiddle. In this line ` d.resolve();` do you mean it to be: ` d1.resolve();` ? and same for the return statement? – NateH06 Jul 31 '17 at 17:02
It makes sense. But on the first click, the slider div `
– NateH06 Jul 31 '17 at 19:04

Trigger Jquery slider once AJAX loads

2 Answers2