嵌套在.get请求中的jQuery无法执行

Question

I have the following jQuery get request, which returns html text under the key name "data":

$(".article").click(function() {
  $.get("<%= click_path %>", function(data) {
    $(".article").html(data);
  });
});

All the code executes except the line $(".article").html(data); . In fact, any jquery code I put inside the get request fails to execute, even though it all works fine if I move it outside the get request. Does anyone see anything wrong with my syntax?

Answer 1

jQuery's $.get method is an alias to $.ajax with an assumed HTTP request method of GET and without the ability to specify many options. You give it a URL and a function to run on successfully retrieving that URL. It tries to GET that URL and, if it can, the success function will run. If it can't, or if something is wrong with the response data, it fails silently and will not run the given function.

That being the case, I would assume your request is failing somewhere.

You need to look in the developer's console for errors and to inspect the request.

You can also change your code to use $.ajax and pass in the options, along with your current params, an error method. If the error method is called, you'll receive as params the jqXHR instance, a string textStatus , and a string errorThrown . Pass these into console.log and look at them for clues as to what is wrong as well.

$(".article").click(function() {
    $.ajax({
        url: "<%= click_path %>",
        success: function(data) {
            $(".article").html(data);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(textStatus);
            console.log(errorThrown);
        }
    });
});

Answer 2

Chances are, your ajax request fails to execute and as result, your jQuery code inside the callback never runs.

Run the following instead and see if an error is alerted:

var jqxhr = $.get( "<%= click_path %>", function() {
  alert( "success" );
}
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });