Question

I am attempting to use jQuery Mobile’s Select Menu in a Navbar as a navigation tool. It will need to handle both internal and external links. Binding to change enables the use of the $.mobile.selectmenu() widget to fetch the selected link which has been built with custom data bits for the URL and locality status. The link is then dynamically appended to the document and .trigger('click') is called.

http://jsfiddle.net/wZNMz/

Regardless of the permutations of binding events, return values, event propagation wrangling, and attributes the external link will not work. The internal link works just fine.

Referring to the jquery.mobile.navigation.js source triggering click should work as expected assuming the [rel='external'] is matched to enable default URL handling. Note that the plugin strips links out of <option> tags on init requiring all the hackiness of adding a link and triggering click on a <select> change.

The dirty and obvious hack is to set window.location when external and be done. This does work but I can’t see why it should be necessary to resort to that. Any thoughts or insights are appreciated!

Answer 1

Creating a link and triggering a click on it seems a lot more hacky than using window.location, which is there for this specific reason, to forward users to a new page. For internal links you can route the request through $.mobile.changePage(). Here is an example:

$('#mobile-nav').bind('change', function(e) {
    var nav_to = $(this).selectmenu('selected');

    if (nav_to.data('locality') === false) {
        //this is external, so use window.location
        window.location = nav_to.data('item-url');
    } else {
        //this is internal, so use $.mobile.changePage()
        $.mobile.changePage(nav_to.data('item-url'), {
            //here you can set options such as transition type and direction
        });
    }
});

Here is the documentation for $.mobile.changePage(): http://jquerymobile.com/demos/1.1.1/docs/api/methods.html