CODEWITHSUNDEEP
javascriptjqueryajaxpromisees6-promise
Alby11
Alby11

Reputation: 645

Javascript response and ajax request

I have the following:

function wikiAjax (searchURL) {
    return Promise.resolve($.ajax({
        url: searchURL,
        jsonp: "callback",
        dataType: 'jsonp',
        xhrFields: {
            withCredentials: true
        },
    }));
}

$(".search-form").submit(function() {
    var searchText = $('#search').val();
    var searchURL = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrsearch=" + searchText + "&gsrlimit=15&prop=extracts&exsentences=3&exintro=&explaintext&exlimit=max&callback=JSON_CALLBACK";
    console.log(searchURL);
    var wikiResponse = wikiAjax(searchURL);
    wikiResponse.then(function(data) {
        alert(data);
    }, function() {
        alert("The call has been rejected");
    });
});

But i get an answer only if I put a breakpoint somewhere (e.g. at the wikiResponse.then line).

Then it looks like the code is executed before the call returns the result but why? Isn't the promise set properly?

Many thanks in advance.

Upvotes: 0

Views: 75

Answers (3)

Jesse Lee
Jesse Lee

Reputation: 1301

I think what might be happening here is the browser is executing the default submit event on the form in addition to the ajax call. The result is that the window is unloaded and reloaded.

Try putting:

event.preventDefault();

in the handler.

$(".search-form").submit(function(event) {
    event.preventDefault();
    var searchText = $('#search').val();
    var searchURL = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrsearch=" + searchText + "&gsrlimit=15&prop=extracts&exsentences=3&exintro=&explaintext&exlimit=max&callback=JSON_CALLBACK";
    console.log(searchURL);
    var wikiResponse = wikiAjax(searchURL);
    wikiResponse.then(function(data) {
      alert(data);
    },
    function() {
      alert("The call has been rejected");
    }
  );
});

Upvotes: 4

Peter Keuter
Peter Keuter

Reputation: 788

It's unnecessary to do Promise.resolve here, because the $.ajax call already returns a promise. Try this:

function wikiAjax (searchURL) {
    return $.ajax({
        url: searchURL,
        jsonp: "callback",
        dataType: 'jsonp',
        xhrFields: {
            withCredentials: true
        }
    });
}

$(".search-form").submit(function() {
    var searchText = $('#search').val();
    var searchURL = "https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrsearch=" + searchText + "&gsrlimit=15&prop=extracts&exsentences=3&exintro=&explaintext&exlimit=max&callback=JSON_CALLBACK";
    console.log(searchURL);
    var wikiResponse = wikiAjax(searchURL);
    wikiResponse.done(function(data) {
        alert(data);
    }).fail(function(err) {
        alert("The call has been rejected");
    });
});

This is a working (and modified to show) plunker: https://plnkr.co/edit/qyc4Tu1waQO6EspomMYL?p=preview

Upvotes: 0

chenop
chenop

Reputation: 5143

I think Promise.resolve() is an ES6 feature so unless you explicitly make sure you support it it should not work.

But, lucky for you $.ajax() return a promise in the following format:

var promise = $.ajax({
  url: "/myServerScript"
});

promise.done(mySuccessFunction);
promise.fail(myErrorFunction);

(and not with then() and catch() like was written in your code)

Upvotes: 0

Related Questions