how to use callback when I click ajax in nightmarejs

Question

lately I have been studing nightmare module I think it's very simple and useful but I have question.

how to use callback when I click ajax button

MyCode

var Nightmare = require('nightmare'),
    nightmare = Nightmare();

nightmare
.goto('https://motul.lubricantadvisor.com/Default.aspx?data=1&lang=ENG&lang=eng')
.click('input[title="Cars"]')
.wait(1000)
.evaluate(function () {
    //return $('#ctl00_ContentPlaceHolder1_lstModel option');
    var links = document.querySelectorAll('#ctl00_ContentPlaceHolder1_lstMake option');
    return [].map.call(links, function (e) {
        return {value: e.value, name: e.text};
    });
})
.end()
.then(function (items) {
    console.log(items);
});

there is wait method. most people use wait methed I searched googling

.wait(1000)

I don't use wait method. because If it's network disconnect or slow. It's not good code

Could you help me callback method??

Thanks. So I have motify the code but It's doesn't work

var Nightmare = require('nightmare'),
    nightmare = Nightmare();

nightmare
.goto('https://motul.lubricantadvisor.com/Default.aspx?data=1&lang=ENG&lang=eng')
.click('input[title="Cars"]')
.wait('#result > #ctl00_ContentPlaceHolder1_lstMake option')
.evaluate(function () {
    $(document).ajaxSuccess(function () {
         var links = document.querySelectorAll('#ctl00_ContentPlaceHolder1_lstMake option');
         return [].map.call(links, function (e) {
            return {value: e.value, name: e.text};
        });
    });
})
.end()
.then(function (items) {
    console.log(items);
});

Answer 1

There are many ways to solve this. The easiest would be the following.

Suppose when an Ajax request finishes, it always changes something on the page. Most of these changes can be easily detected when waiting for specific elements to appear which can be matched by CSS selectors.

Let's say you click something and the result is written into the element matched by "#result". If there wasn't such an element before the click then you can wait until the existence of this element:

.click("button")
.wait("#result")
// TODO: do something with the result

You can also use CSS selectors to count things. For example, let's say there are ten elements that can be matched with "#result > a". If a click adds 10 more, then you can wait for the 20th using:

.click("button")
.wait("#result > a:nth-of-type(20)")
// TODO: do something with the result

The world of CSS selectors is pretty big.

---

Of course, you could use evaluate to add a general Ajax event handler like $(document).ajaxSuccess(fn) to be notified whenever some callback finished, but the source code of a page changes all the time. It would be easier to maintain your code if you would look for the results that can be seen in the DOM.

Answer 2

Use this, ajax callback..

  $.ajax(url,{dataType: "json", type: "POST" })
        .then(function successCallback( data ) { //successCallback
        console.log(data);
   }, function errorCallback(err) { //errorCallback
       console.log(err);
       });
  // console.log(2);
});