Question

The below code works fine in both Chrome and IE

$.get("../ajax/BTBookAppointment.aspx?dsl=" + telNumberBox.value + "&date=" + requiredDate.value + "&timeslot=" + ddTimeslot.value, function (response, status, xhr) {
//DO some stuff
}); 

However in Firefox (Version 11.0) the callback function is never hit. I have used firebug with a breakpoint and have verified the callback is never entered. The page seems to refresh, an element that was previously shown by JavaScript becomes visible again.

I’m at a loss as to what the bug could be or even how to debug it further. Any advice would be appreciated.

EDIT: Fiddler and firebug never show a HTTP get. I have also tried writing out the $.get explicitly (see below) and get the same behaviour

EDIT2: I have tried the suggestions mentioned by Darin Dimitrov and it still exibits the same behavior (the page posts back when the button is clicked). Here is the code as it stands.

Javascript

function bookAppointment() {

    var url = "../ajax/BTBookAppointment.aspx";
    var dsl = "01753893530"
    var date = "20-04-2012";
    var timeslot = "PM";

    var data = { dsl: dsl, date: date, timeslot: timeslot };

    $.ajax({
        url: "../ajax/BTBookAppointment.aspx",
        data: data,
        success: function (response, status, xhr) {
       alert('into callback');
        },

    });

    return false;
}

HTML

<button id="btnBookAppointment" onclick="bookAppointment();"> Book</button>

Answer 1

I don’t know why but it seems the button was still triggering the default behavior (a postback) in FF even when bookAppointment() returned false. Adding a return false to the button fixed things (see below).

<button id="btnBookAppointment" onclick="bookAppointment();return false;">