0

Need to redirect to page when value is true based on ajax call. The issue is that the page is redirected if either true or false is returned.

<a class="btn btn-warning" onclick="return clickthis(25007); " href="test.aspx?id=eheAhgpAS38=">Start </a>
function clickthis(obj) {
  var bValid = false;

  function ajax1() {
    return $.ajax({
      type: "POST",
      url: "order.aspx/ActivateLocation",
      data: '{id:' + obj + '}',
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(r) {
        if (r.d == "1") {
          bValid = true;
        } else {
          $('#overlay').remove();
          $.growl.error({
            title: "Error",
            message: "An error occurred, Please try again."
          });
          bValid = false;
        }
      }
    });
  }

  $.when(ajax1()).done(function(a1) {
    return bValid;
  });
}
  • 3
    See the errors .. `e.preventDefault()` I think it will gives you `e` is undefined .. you can use `clickthis(e , obj)` in both js and html code .. And by preventDefault` the default event you will need to redirect manually – Mohamed-Yousef Feb 05 '19 at 17:35
  • @Mohamed-Yousef I think he is trying to *return* the ajax `bValid` value. – DontVoteMeDown Feb 05 '19 at 17:37
  • 1
    @DontVoteMeDown whatever .. if the code can't prevent the default redirect of the `` for sure the default action is on and it will automatically redirect – Mohamed-Yousef Feb 05 '19 at 17:39
  • The issue is that the function returns (null) before the ajax has completed. – freedomn-m Feb 05 '19 at 17:40
  • 1
    Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – freedomn-m Feb 05 '19 at 17:40
  • If bvalid is true, then redirected should work, else restrict to redirect. – Admin Softisans Feb 05 '19 at 17:41
  • @AdminSoftisans it's clear what you *want* to happen, but that's not how *asynchronous* code works. – freedomn-m Feb 05 '19 at 17:41
  • Your code does this: enter clickthis(), define ajax1(), start an asynchronous call via ajax1() at which point it says, "ok, I'll fire that off and see what happens later", continue with clickthis(), no more code so returns null (as there's no explicit return statement), *then* your ajax response comes back. Long after the clickthis() has finished. Add some console.logs before/inside/after `$.when` – freedomn-m Feb 05 '19 at 17:44
  • @Mohamed-Yousef that is actually his issue: *"The issue is that the page is redirected if either true or false is returned."* – DontVoteMeDown Feb 05 '19 at 17:46

2 Answers2

2

Firstly there's no event passed to the clickthis() function, you seem to be confused with unobtrusive event handlers in that regard. Also note that you cannot return anything from an async method call as you're attempting to do from the done() handler. Instead you could just call window.location.assign() in the $.ajax() callback.

<a class="btn btn-warning" data-id="25007" href="test.aspx?id=eheAhgpAS38=">Start </a>
$('a.btn').click(function(e) {
  e.preventDefault();

  $.ajax({
    type: "POST",
    url: "order.aspx/ActivateLocation",
    data: { id: obj },
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(r) {
      $('#overlay').remove();

      if (r.d == "1") {
        window.location.assign($(this).attr('href'));
      } else {
        $.growl.error({
          title: "Error",
          message: "An error occurred, Please try again."
        });
      }
    }
  });
});

Note in the example above that I'm providing an object to data. This is preferred practice over concatenating a string together.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
0

Issue is fixed. I have used button instead of anchor tag.