Backbone model's fetch doesn't work when the page initially loads but on second attempt works fine

Question

In my backbone project I am trying to fetch a model based on some search criteria submitted by the users from a form. In submit handler, I am trying to fetch the model by passing search criteria's via data option (following is the code).

var productType=$("#productType").val();
var customerId=$("#customerId").val();
var stateSelected=$("#selectedState").val();
var srbStatus=$("#stateReportingStatus").val();
var dateType=$("#dateType").val();
var fromDate=$("#fromDate").val();
var toDate=$("#toDate").val();
var billTypeInd=$("#billTypeIndicator").val();
var dataElement=$("#dataElement").val();
var ediFileName=$("#ediFileName").val();
var ediBillName=$("#ediBillNumber").val();
var billId=$("#billId").val();
var claimantFirstName=$("#claimantFirstName").val();
var claimantLastName=$("#claimantLastName").val();
var insurerName=$("#insurerName").val();
var insurerFEIN=$("#insurerFEIN").val();
var insurerZip=$("#insurerZIP").val();
var dashboardSearchResultModel= new dashboardSearchResult();
var dashboardSearchResultModel= new dashboardSearchResult();
dashboardSearchResultModel.fetch({
            data:{
                productType: productType,
                customerId: customerId,
                state:stateSelected,
                srbStatus:srbStatus,
                dateType:dateType,
                fromDate:fromDate,
                toDate:toDate,
                billTypeInd:billTypeInd,
                dataElement:dataElement,
                ediFileName:ediFileName,
                ediBillName:ediBillName,
                billId:billId,
                claimantFirstName:claimantFirstName,
                claimantLastName:claimantLastName,
                insurerName:insurerName,
                insurerFEIN:insurerFEIN,
                insurerZip:insurerZip
            },
            wait:true,
            success: function(dashboardSearchResultModel)
            {        
                alert("This is what we get for     result"+JSON.stringify(dashboardSearchResultModel));
                $('#dashboardResultArea').html(self.dashboardResultTemplate({results:dashboardSearchResultModel.get("results")}));
            },
            error: function (model, xhr, options) {
                alert("Error: An error occurred while trying to fetch the dashboardSearchResultModel");
                alert("Error got model"+JSON.stringify(model));
                alert("options:"+JSON.stringify(options));
                alert("xhr:"+JSON.stringify(xhr));
            }
        });

Initially when the page loads after providing the search criteria's if I click submit the fetch doesn't work and goes to the error handler. After that when I submit the from second time the fetch works and retrieves data from the backend server. Any idea what is wrong? Thanks in advance.

Answer 1

When error callback is called, it is because your XHTMLRequest to the server returned a error (HTTP status code). So, there is where your problem resides.

Who starts this code? As the erros does not occur on a second attempt, I would suggest that you area callind $('#id').val() when the DOM is not ready. This way you are sending null values to the server, and that's causing the error you are receiving.

To solve your problem, assure you DOM is ready when executing this script. See if your request is leaving the browser and reaching the server (i.e., cross-domain request fail with status 0, not reaching the server).

And, if it is, debug your server-side, as it does not seem to be an client-side problem.

Answer 2

So after trying many things I finally decided to try $.ajax call rather the fetch method. This is what I came up with

$.ajax({
              type: "GET",
              url: "rest/dashboardResult",
              dataTyp: 'json',
              data: { 
                productType: productType,
                customerId: customerId,
                state:stateSelected,
                srbStatus:srbStatus,
                dateType:dateType,
                fromDate:fromDate,
                toDate:toDate,
                billTypeInd:billTypeInd,
                dataElement:dataElement,
                ediFileName:ediFileName,
                ediBillName:ediBillName,
                billId:billId,
                claimantFirstName:claimantFirstName,
                claimantLastName:claimantLastName,
                insurerName:insurerName,
                insurerFEIN:insurerFEIN,
                insurerZip:insurerZip
              }
            })
              .done(function(response) {
                alert( "Result is: " + response);

        });

This works without any problem from the get go. Now my question is how to bind the response to the backbone model?

Answer 3

Finally I figured out what was wrong. The call was inside a submit click handler, and $.ajax call or fetch is asynchronous. So by the time the call got reply from the server default action of submit click already took place (which is to reload the page). So by the time success or .done got called the whole page was reloaded. So I put event.preventDefault() at the beginning of handler method and let the handler receive the call back from the server and display it at the template. Thanks everyone for your time.