为什么不只在一页上调用我的回调？

Question

I am using jQuery to grab some JSON and then plug it into some elements and display it on my page.

It works fine on all pages except one , where the response seems to be the page itself.

I have placed alert() s in the callbacks ( success and complete ) and they never seem to be fired (though Firebug shows the request returning 200 OK which should trigger the success handler).

I don't know what to do, I've never encountered this before.

Here is the jQuery code I am using:

var specials = (function() {

    var specials = false,
        specialsAnchor;

    var init = function() {
        specialsAnchor = $('#menu-specials a');

        specialsAnchor.click(function(event) {
            event.preventDefault();
            if (specials != false && specials.is(':visible')) {
                hide();
            } else {
                show();
            }

        });
    };

    var load = function(callback) {

      specialsAnchor.addClass('loading');

      specials = $('<div />', { 'id': 'specials' }).hide().appendTo('#header');

      var specialsUl = $('<ul />').appendTo(specials);

      $.ajax(specialsAnchor.attr('href'), {
          dataType: 'json',
          success: function(data) {

            $.each(data, function(i, special) {

                specialsUl.append('<li><h4>' + special.heading + '</h4><p>' + special.content + '</p></li>');

            });
            specialsAnchor.removeClass('loading');
            callback.call();

         }

      });

    }

    var show = function() {
      if (specials == false) {
        load(show);
        return;
      }
      specials.slideDown(500);
    }

    var hide = function() {
      specials.slideUp(500);
    }

    $(init);

})();

What is going on?

Answer 1

I noticed that you're including jquery.validate on this page, but not the others. jQuery validate with jQuery > 1.5 causes some issues with AJAX calls.

I realize the linked question/answer aren't exactly what you're seeing, but I've seen all kinds of weird issues with AJAX calls and this combination of validate and jQuery, so I figured it would be worth mentioning.

Hope that helps.

Answer 2

This is probably not a complete answer, but could be a step in the right direction. Using Charles Proxy it seems on your other pages when I click specials, it makes a request to http://www.toberua.com/~new/specials however on the contact-us page the ajax request is instead going to http://www.toberua.com/~new/contact-us (which of course is not json)

One other interesting note: The XMLHttpRequest on other pages sets the Accept header properly (ie Accept application/json, text/javascript, */*; q=0.01 , whereas on the contact-us page it is set to Accept */* ). I'd bet there's a different code branch being invoked...