Question

I have a multi-languages Jquery Mobile site (Backend is Coldfusion8/MySQL).

I’m using a generic Ajax-form-poster to “pass” data to the server, which I’m calling throughout my script passing along the respective AJAX parameters like so:

One of my Ajax callers:

$(document).on( "pagebeforechange.lang", function( e, data ) {
    if (typeof data.toPage === "string") {
        if (data.toPage.indexOf("?sprachwechsel=") > -1) {
            // stop
            e.preventDefault();
            // get the language from clicked link
            var viewSwitch  = $.mobile.path.parseUrl( data.toPage ).hash.replace( /.*sprachwechsel=/, "" ),
               service = "services/form_service_user.cfc",
               method = "process",
               returnformat = "JSON",
               targetUrl = "",
               // fake a form
               formdata = "form_submitted=lang&viewSwitch="+viewSwitch+"&method="+method+"&returnformat="+returnformat,
               // create the success handler
               successHandler = function(e, data) {
                   data.options.reloadPage = true;    
                   data.options.allowSamePageTransition = true;
                   data.options.transition = "fade";
                   // reload page with new language
                   $.mobile.changePage( window.location.href, data.options);    
                   };
            // hand over to Ajax
            ajaxFormSubmit( form, service, formdata, targetUrl, successHandler );
            }
         } 
    });
};

All callers go to a central AJAX form submit, which looks like this:

var ajaxFormSubmit = function ( form, service, formdata, targetUrl, successHandler ){
    $.ajax({
        async: false,
        type: "post",
        url: service,
        data: formdata,
        dataType: "json",
        success: function( objResponse ){
            if (objResponse.SUCCESS){
                alert("success");
                successHandler;
            } else { }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) { 
        }
    });
}

I’m not submitting forms all the time, but also am trying to use this way to update session settings such as the language to display.

My questions:
If I’m capturing a Jquery Mobile changePage on the pagebeforechange event, then preventDefault, perform an AJAX call and want to fire a new changePage transition from the success handler using the original event and data objects… how do I pass them through to to the success handler?

Side Question: Is this approach viable or should this be done in an easier way? I need to reset views and langauges quite a bit and I want to keep the app running and not have to hard re-load pages all the time, just to get a single coldfusion variable set from “EN” to “DE”.

Thanks for help!

Answer 1

Unless I misunderstand your question, your success handler already has access to the data object and e event object as this is ‘closed into’ that function. Only problem being you are adding them as expected parameters to you success handler function. Take them away and you will have access to the data returned from the ajax call and these other two variables. Like so…

$(document).on( "pagebeforechange.lang", function( e, data ) {
    if (typeof data.toPage === "string") {
        if (data.toPage.indexOf("?sprachwechsel=") > -1) {
            // stop
            e.preventDefault();
            // get the language from clicked link
            var viewSwitch  = $.mobile.path.parseUrl( data.toPage ).hash.replace( /.*sprachwechsel=/, "" ),
               service = "services/form_service_user.cfc",
               method = "process",
               returnformat = "JSON",
               targetUrl = "",
               // fake a form
               formdata = "form_submitted=lang&viewSwitch="+viewSwitch+"&method="+method+"&returnformat="+returnformat,
               // create the success handler
               successHandler = function(response) { // response is data from server
                   data.options.reloadPage = true; // data is from outer function
                   data.options.allowSamePageTransition = true;
                   data.options.transition = "fade";
                   // reload page with new language
                   $.mobile.changePage( window.location.href, data.options);    
                   };
            // hand over to Ajax
            ajaxFormSubmit( form, service, formdata, targetUrl, successHandler );
            }
         } 
    });
};

Now you can just pass the handler function to the ajax call.

var ajaxFormSubmit = function ( form, service, formdata, targetUrl, successHandler ){
    $.ajax({
        async: false,
        type: "post",
        url: service,
        data: formdata,
        dataType: "json",
        success: successHandler,
        error: function (XMLHttpRequest, textStatus, errorThrown) { 
        }
    });
}