Solved

AJAX Callback, Deferred, or Promise

Posted on 2016-08-09
2
64 Views
Last Modified: 2016-08-10
I have two functions I want to call on $(document).ready: getFSEsArray() and getFSEs. getFSEsArray() creates an array from a SharePoint list using an AJAX call. getFSEs then uses that array to populate HTML elements. How to get getFSEs to run once getFSEsArray is completed with a callback, jQuery deferred, and/or promise? Currently the HTML elements are empty because getFSEs runs before getFSEsArray is complete.

function getFSEsArray() {

    var endpointUrl = myURL + "PunchlistTracking/_api/web/lists/getbytitle('FSEs')/items?$top=1000&?$select=ID,FSEName,Title";

    $.ajax({
        url: endpointUrl,
        type: "GET",
        contentType: "application/json;odata=verbose",
        headers: { "Accept": "application/json;odata=verbose" },
        success: function (data) {
            var items = data.d.results;
            for (var i = 0; i < items.length; i++) {
                myFSEs.push([data.d.results[i].ID, data.d.results[i].Title, data.d.results[i].FSEName]);
            }
        }
    });

}	// getFSEsArray

function getFSEs(target, option0Text) {

    var output = "<option value='0' selected='selected'>" + option0Text + "</option>";
    for (var i = 0; i < myFSEs.length; i++) {
        output += "<option value='" + myFSEs[i][0] + "'>" + myFSEs[i][1] + " " + myFSEs[i][2] + "</option>";
    }
    $(target).html(output);

}	// getFSEs

$(document).ready(function () {

    getFSEsArray();
    
    getFSEs('#FSEs', "All FSEs");

});

Open in new window

0
Comment
Question by:Michael Vasilevsky
2 Comments
 
LVL 6

Accepted Solution

by:
Mukesh Yadav earned 500 total points
ID: 41749916
Try this ;)

You want to execute some code after ajax completion so just move that code in ajax success callback.
And here we go try the code below:

function getFSEsArray() {

    var endpointUrl = myURL + "PunchlistTracking/_api/web/lists/getbytitle('FSEs')/items?$top=1000&?$select=ID,FSEName,Title";

    $.ajax({
        url: endpointUrl,
        type: "GET",
        contentType: "application/json;odata=verbose",
        headers: { "Accept": "application/json;odata=verbose" },
        success: function (data) {
            var items = data.d.results;
            for (var i = 0; i < items.length; i++) {
                myFSEs.push([data.d.results[i].ID, data.d.results[i].Title, data.d.results[i].FSEName]);
            }
            /* Following code we only wants to execute id ajax request is completed. */
            getFSEs('#FSEs', "All FSEs");
        }
    });

}	// getFSEsArray

function getFSEs(target, option0Text) {

    var output = "<option value='0' selected='selected'>" + option0Text + "</option>";
    for (var i = 0; i < myFSEs.length; i++) {
        output += "<option value='" + myFSEs[i][0] + "'>" + myFSEs[i][1] + " " + myFSEs[i][2] + "</option>";
    }
    $(target).html(output);

}	// getFSEs

$(document).ready(function () {
    getFSEsArray();
});

Open in new window


Thanks,
Mukesh Yadav
0
 
LVL 10

Author Comment

by:Michael Vasilevsky
ID: 41749949
good thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now