ASP.net/JS/JQuery/AJAX-ajax可以工作，但是处理程序事件无法正确触发

Question

I have a HTTP handler (ASHX) which I am calling from UI side using an AJAX function. The following is what needs to happen in this call:

When the section loads, it will display the status of the short code on the server in the shortcodestatus span. It will either say on or off:

 <a class="btn btn-default" id="toggleshortcode">Short Code <span id="shortcodestatus"></span></a> 

This is the function for getting the status of the short code and this works properly. I can manually change the status of the short code and the changes reflect properly on the div when I reload the page:

  function ShortCodeStatus() { $.ajax({ type: "GET", url: "Handler.ashx?action=shortcodestatus", success: function (output) { console.log("getShortCodeStatus: " + output); $("#shortcodestatus").empty(); if (output == "true") { $("#shortcodestatus").text("ON"); $("#shortcodestatus").addClass("btn btn-success"); } else { $("#shortcodestatus").text("OFF"); $("#shortcodestatus").addClass("btn btn-danger"); } } }); }; 

This is the short code status code from the handler:

 case "shortcodestatus": { output = ShortCodeStatus() ? "true" : "false"; } break; 

I want to be able to click on the toggleshortcode div to fire off this event through the handler. The functions for disabling and enabling the short code are working properly:

 case "toggleshortcode": { if (ShortCodeStatus() == true) { DisableShortCode(); output = "false"; } else { EnableShortCode(); output = "true"; } } break; 

Here is the ajax call for the short code toggle:

 $('#toggleshortcode').click(function () { $.ajax({ type: "POST", url: "Handler.ashx?action=toggleshortcode", success: function (output) { console.log("toggleshortcode: " + output); ShortCodeStatus(); } }); }); 

I'm hitting the URLs correctly and I'm getting the correct responses from each function. However the change to the short code does not seem to be happening.

For example, if the short code is off, the ShortCodeStatus function will return false and thus render the OFF button. When I click on the toggleshortcode button, the output is true (I want to turn on short code) which is correct but when the ShortCodeStatus function fires again in the success, it will still say false. The ajax functions seem correct but I can't figure out why the toggleshortcode on the handler is not firing properly.

Thank you so much for your time!

Answer 1

I'm seeing 2 cases that you can check.

First, in the ajax call for 'toggleshortcode', you are calling the function ' get ShortCodeStatus()', and base on your example the correct name of the function is ' ShortCodeStatus() '.

Second, in the call to 'Handler.ashx?action=toggleshortcode', you are already returning the status (true or false), I suggest you make a javascript function named SetShortCodeStatus(status) , and use this inside of the success of both ajax request 'Handler.ashx?action=shortcodestatus' and 'Handler.ashx?action=toggleshortcode'.

function SetShortCodeStatus(status) {
    $("#shortcodestatus").empty();
    if (status == "true") {
      $("#shortcodestatus").text("ON");
      $("#shortcodestatus").addClass("btn btn-success");
    }
    else {
      $("#shortcodestatus").text("OFF");
      $("#shortcodestatus").addClass("btn btn-danger");
    }
}

function ShortCodeStatus() {
  $.ajax({
      type: "GET",
      url: "Handler.ashx?action=shortcodestatus",
      success: function (output) {
            console.log("getShortCodeStatus: " + output);
            SetShortCodeStatus(output);
      }
  });
};


$('#toggleshortcode').click(function () {
   $.ajax({
       type: "POST",
       url: "Handler.ashx?action=toggleshortcode",
        success: function (output) {
            console.log("toggleshortcode: " + output);
            SetShortCodeStatus(output);
        }
    });
});