Waiting for ajax request to finish before getting the resposne

Question

I'm extremely new to mvc and webtest so please bear wtih me here.

I have a customer view. The customer view calls a javascript function on document.ready. This javascript call performs an ajax post to an action in the customer controller which returns json to the original javascript which in turn updates the customer view.

In my webtest, I have a request to the customer view, but the response is returned before the subsequent ajax call is completed and the view is updated so I don't have the latest page contents.

Is there a way to wait until that subsequent request is completed so I can analyze the full page with all the data? Or am I going about this in the wrong direction?

here is the view:

<script type="text/javascript" language="javascript">
    //Set initial state of list during page load
    $(document).ready(function() {
        ApplyFilters();        
    })
</script>

Which calls this javascript:

function ApplyFilters() {
.....
$.ajax({
    type: "POST",
    url: "/Customer/FilterList",
    datatype: "html",
    beforeSend: function() {
        //do some stuff
    },
    success: function(result) {
        ...
        BindCustomrGrid($find(GridClientID), result);
    },
    error: function(req, status, error) {
       // do some stuff
    }
});
}

and finally the controller:

    [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult FilterList(string io, string name, string owner)
    {
        ... // some api calls
        return this.Json(new { customerList, serviceException });
    }

Answer 1

the succes function runs when the request is returned. however you start this ajax call on loading the DOM. which is odd, one normally would make some AJAX request after the user did something or after a certain amount of time.

if you want to wait till the whole page is loaded before the AJAX request is made you can use:

$(window).load(function() {
  ApplyFilters();        
})

Answer 2

what I decided to do instead was post to the url that is invoked from the ajax request, deserialize the json in a custom validation class and validate it there.

Answer 3

In such cases I highly recommend TestPlan as a testing tool. It has the advantage that when you look for elements on the page it automatically waits for them to allow JavaScript to finish executing. So if you do something like:

Check //button[@id='get123']

It will wait until that button exists. Obviously it won't wait forever. And in the display-less back-end it'll check to see if any JavaScript is running, and if not it'll return immediately since it isn't possible for something to appear.