0

I have a phonegap application running on the Jquery Mobile framework. I have a number of combo boxes (selects) which fire an ajax query on change. The code works fine when using native menus however when I switch to data-native-menu="false" the code fails to perform a callback, this happens on my android device and not on an emulator or browser. I can't get my device to work in debug mode for some reason.

The code reaches the on change event, it gets to the beforeSend function in $.ajax but it never completes/errors. I have even tried adding a hidden field and usig that to fire the event so it's definitely on the correct page and not stuck on the popup.

I'll try and make a jsfiddle.

$(document).delegate('#p1', 'pageshow', function () {

        $("#aS").change(function(){
            alert('going to change');
            getAjax('',{},function(){
                alert('got callback');
            });
        });
    });
function getAjax(request,datain,callback){
    $.mobile.showPageLoadingMsg();  
    $.ajax({
        type: "GET",
        url: 'http://open.live.bbc.co.uk/wurfldemi/network.jsonp?callback=?'+request,
        //  async: false,
        data: datain,
        beforeSend: function(x) {
            if(x && x.overrideMimeType) {
                x.overrideMimeType("application/j-son;charset=UTF-8");
            }
        },
        dataType: "jsonp",
        success: function(data){
            $.mobile.hidePageLoadingMsg();  

                callback(data);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            $.mobile.hidePageLoadingMsg();
            alert(xhr.status);
            alert(thrownError);
        }
    });
    return false;
}

edit

http://jsfiddle.net/4KVNc/

Just to reiterate, this is not a problem (as far as I can see) with adding an event handler to the on change event of the select but with either the request it's self or the callback.

The page works fine when using data-native-menu="true". I only used '$(document).ready(function(){' in fiddle as I did not know how to get it to work any other way, I do not use this in the real app.

edit I've tried this on 5 devices, it seems to work on 4.2, 4.1, 2.5 but not on 3.

ShiftyThomas
  • 476
  • 5
  • 18

1 Answers1

0

Here's a fixed jsFiddle: http://jsfiddle.net/pYYAu/

Use it like this:

$(document).on('pagebeforeshow', '#p1', function(){   
    $(document).on('change', '#aS', function(event, ui){          
            alert('going to change');
            getAjax('',{},function(){
                alert('got callback');
            });
        });
    });
        .
        .
        .
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Thank you for the reply this does not work however, the hooking of the change event works fine in existing code it just does not do a callback to the ajax function. Your fiddle does not work on a android device. – ShiftyThomas Jan 30 '13 at 11:45
  • I have tested it on Samsung Galaxy S3 Android 4.1.1 – Gajotres Jan 30 '13 at 11:47
  • Not always (but that is because of $(document).ready(function(){ reason: http://stackoverflow.com/a/14469041/1848600) but it works, chrome and stock browser – Gajotres Jan 30 '13 at 12:10
  • So this is a problem with android <4? I have tried one 2 tablets running 3.1 and it does not get a callback. – ShiftyThomas Jan 30 '13 at 12:13
  • Apparently but I don't have any <4 device to test it. – Gajotres Jan 30 '13 at 12:18