Solved

AJAX Callback, Deferred, or Promise

Posted on 2016-08-09
2
75 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 8

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery Sticky Menu 24 36
How can I alter this script restrict file types with a suffix of 4 charaters also? 3 28
jQuery on Submit 4 39
on window close, not beforeunload 6 17
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn how to dynamically set the form action using jQuery.
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)

839 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