I am trying to use the the JS Redirection Mobile library written by Sebastiano Armeli-Battana.
By default it will automatically redirect the user to the mobile site if it detects that the user is using a mobile device, which is a practice I dislike.
I want to give the user the opportunity to agree to the redirection. Sebastiano has thankfully included a beforeredirection_callback, which I want to use to offer the user a choice in a dialog. Since the website in question is heavily invested in jQuery UI, I am trying to use the jQuery UI Dialog. The jQuery Dialog does not have a return value, but can execute a callback.
I believe that the problem is more to do with variable scope than anything else. Can anyone see a solution to the problem? How can I return the args value to the parent callback?
events.js:
// declare namespace if not already defined
var RP = window.RP || {};
RP.events = {
DetectedSiteSelection: "RP.Detect.onDetectedSiteSelection"
};
detect.js:
// declare namespace if not already defined
var RP = window.RP || {};
// route-manager.js
(function ($, undefined) {
var init = function () {
var mobileSelectorDialog = $('<div></div>')
.html("<p>We have detected that you are browsing our website using a mobile device.</p><p>Click 'Yes' to use our mobile site, or click 'No' to stay on the desktop site.</p>")
.dialog({
title: 'Do you want to use our mobile site?',
bgiframe: true,
autoOpen: false,
minHeight: 200,
width: 350,
modal: true,
closeOnEscape: false,
draggable: false,
resizable: false,
buttons: {
'Yes': function() {
$(this).dialog('close');
$(document).trigger(RP.events.DetectedSiteSelection, true);
},
'No': function() {
$(this).dialog('close');
$(document).trigger(RP.events.DetectedSiteSelection, false);
}
}
});
SA.redirection_mobile ({
mobile_url : "http://example.com/mobile/",
noredirection_param:"noredirection",
cookie_hours : "2",
beforeredirection_callback : (function() {
// open dialog
mobileSelectorDialog.dialog('open');
// this needs to return true or false to beforeredirection_callback
// but it doesn't work (scope issue??)
$(document).on(RP.events.DetectedSiteSelection, function (evt, args) {
return args;
});
// return true or false for this to work
})
});
};
RP.Detect = {
Init: init
};
return true;
})(jQuery);
In page:
// Mobile browser detection
RP.Detect.Init();
The JavaScript execution has passed through
beforeredirection_callbacklong before the event handler is dealt with. I decided instead to write my own plugin: