CODEWITHSUNDEEP
jqueryajaxfirefox
Tom Squires
Tom Squires

Reputation: 9286

JQuery Ajax Firefox Error

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>

Upvotes: 2

Views: 4913

Answers (3)

Tom Squires
Tom Squires

Reputation: 9286

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;">

Upvotes: 3

sakhunzai
sakhunzai

Reputation: 14470

Well most of the information is not available e.g

JQuery Version ?

JQuery UI version ?

When ajax request is invoked ?

Here how I would do the debugging for this kind of issue :

a) First I ll make sure my jQuery version is not having issue with RELATIVE urls [Google term "jquery ajax relative url"]

b) Check if Ajax object is actually created after Jquery loaded 

 $(document).ready(function(){
     //your ajax code
   });

c) Check even if ajax object is CREATED , you call the right method or event to initiate the event

d) Write a static url and mimic the request in new tab e.g open new tab and put url like

 http://domain/../ajax/BTBookAppointment.aspx?dsl=xx&date=yy&timeslot=zz

e) Create a new firefox profile , without any additional addon added . Test your application there

let me know how far you go with this. Hope this will be helpful :)

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038800

It is difficult to say what the problem might be from the information provided in your question. You are saying that you never see the request being sent in the Network tab of FireBug and that the page refreshes. This could be due to some javascript error that you have in your code before the AJAX call which would prevent it from firing. Also if you are calling this AJAX request in the click or submit handler of some DOM element you might want to ensure that you are canceling the default event by returning false from this callback. Another point is the proper URL encoding of your GET parameters which you are not currently doing.

So here's a sample:

$('#someElement').click(function() {
    // TODO: adapt the selectors to match your input field ids
    var dsl = $('#telNumberBox').val();
    var date = $('#requiredDate').val();
    var timeslot = $('#ddTimeslot').val();

    var data = { dsl: dsl, date: date, timeslot: timeslot };
    $.get('../ajax/BTBookAppointment.aspx', data, function (response, status, xhr) {
        //DO some stuff
    }); 

    return false;
});

Also don't forget to watch the FireBug Console for javascript errors that might be occurring prior to sending your AJAX request.

If this doesn't work I would try hardcoding the request values to try to further narrow down the possibilities of error:

var dsl = '123456789';
var date = '2012-04-07';
var timeslot = '14:15';

var data = { dsl: dsl, date: date, timeslot: timeslot };
$.get('../ajax/BTBookAppointment.aspx', data, function (response, status, xhr) {
    //DO some stuff
});

You could apply this error narrowing down technique to different part of your script by hardcoding some values (which eliminates the possibilities of error) until you find the smoking gun which doesn't kill IE and Chrome but kills FireFox.

Upvotes: 3

Related Questions