Question

Ok, this seems ridiculous and I know WHY this is happening technically, but there has to be a way around it!

The issue is as follows:

I have a javascript object that, after being created, you can call a method on and it submits an ajax request and them returns false. The code for the object is in another file.

Here is the object:

function AjaxHandler(groupid, typeid, currentLocation, controllerUrl) {
  this.groupId = groupid || 0;
  this.typeId = typeid || 0;
  this.href = currentLocation || '';
  this.method = controllerUrl;
}

AjaxHandler.prototype.Submit = function () {
  var queryString = this.href.split('?')[1];
  var newHref = this.method;

  if (queryString != null && queryString != undefined)
    newHref = newHref + "?" + queryString

  $.ajax({
    type: "post",
    url: newHref,
    contentType: "application/x-www-form-urlencoded",
    error: function (xhr, type, exception) {
      console.log("Error occurred in AjaxHandler.Submit. Type: " + type + " Exception: " + exception);
    }
  });

  return false;
};

I call this method in a script block on the Index page. It is called in a jquery ‘live’ which is set up during .ready . Here is the .ready code:

$(document).ready(function () {
    SetShowMoreResultsFeatures();

    $(".tabs a").live('click', function (e) {
      var href = $(this).attr('href');
      var queryString = href.split('?')[1];
      var queryStringValue = '';

      if (queryString != null)
        queryStringValue = queryString.split('=')[1];

      var tabHandler = new AjaxHandler(null, queryStringValue, href, '/home/GetCasesByType');
      tabHandler.Submit();

      //return false;
    });

  });

As you can see, the ‘return false’ in the above code is commented out and there is a return false that occurs in the ‘AjaxHandler’ object. If I comment out the one in the object and uncomment the one in ‘ready’ the page does not flash and everything is fine. If I leave it the way that it is then the page flashes.

I have researched this and, while people have similar issues, it seems to be all surrounding the ajax call directly in the ‘live’ setup.

Any insight as to how to make this work properly. This object is supposed to be generic enough to use in any instance where ajax is needed for our tab structure so keeping the ‘return false’ in the method call instead of the ‘live’ is important.

Answer 1

Rather than returning false I’d recomend using the propper jQuery method for this.

In your case here it’s

e.preventDefault();

If you were to stick with using your aformentioned code, you wouldn’t need to return false in both methods but you would need to return false in the final method.

What I’d do in that case is return the result of the call to submit.

return tabHandler.Submit(); // which is returning false