Why isn't my callback being called on one page only?

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?

where is `data.basePath` coming from... i dont see `data` defined anywhere. Nevermind.. its a global... — prodigitalson, Apr 19 '11 at 02:15
What @prodigitalson said, and on a side note I'd assume this is some kind of URL/hierarchy issue. — mattsven, Apr 19 '11 at 02:16
@prodigitalson I changed it, but remember this is the same URL on all pages. — alex, Apr 19 '11 at 02:19

score 1 · Accepted Answer · edited May 23 '17 at 12:03

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.

edited May 23 '17 at 12:03

Community

1
1

answered Apr 19 '11 at 02:21

Andrew Whitaker

124,656
32
289
307

I would of never figured that out on my own! Thanks so much :) – alex Apr 19 '11 at 02:35

score 0 · Answer 2 · answered Apr 19 '11 at 02:16

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 (i.e. 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...

Thanks, I figured that part out already. Just need to know now, why? — alex, Apr 19 '11 at 02:18

Why isn't my callback being called on one page only?

2 Answers2