This project is read-only.

Support for jQuery Mobile and for other 3d party Widgets

Some javascript libraries, including jQUery Mobile, automatically transform normal Html nodes that satisfy a jQuery selector into more complex widgets. For instance, as a default, jQuery mobile transforms all input, select, etc. into more complex widgets that are more adequate to mobile devices. The developer can customize thgis default behaviour by providing a selector to filter the Html nodes to be transformed. 

The developer itself might decide to transofrm all <ul><li> list with a certain CSS class into sortables. This technique, avoid the need to put javascript code in the page, and allows the developers to write the "parsing" functions that select the nodes to be turned into widgets into a separate js file. However, this way content that is produced dynamically is not transformed as required. Thus, for instance, if we are using jQuery Mobile, when a new row of a Datagrid is created all Selects are not transformed like the one in the static content.

To add support for 3d parties widgets the Mvc Controls Toolkit allows the developer to register the parsing functions that transforms the Html nodes. Whenever the toolkit creates new content, it calls all registered parsing functions passing them a selector for the newly created content.

Let takes for instance the parsing of jQuery Mobile. Parsing nodes that satisfies a selector selector, is achieved by trigering the create event on all nodes satisfying selector:  $(selector).trigger('create'). At the beginning jQuery Mobile parse the whole document by calling: $(document).trigger('create').

Accordingly an adequate parsing function for jQuery Mobile is:

function (selector) { $(selector).trigger('create'); }

For releases >= 3.0.0 we can regiter the above function with:


 function (selector) { $(selector).trigger('create');     },


and for releases < 3.0.0:


 function (selector) { $(selector).trigger('create');     },


The first argument of the add method is the parsing function. The second argument says to the toolkit if the parsing function must be called also on the document ready event. In this case, we set it to false, because initial parsing is automatically triggered by the jQuery Mobile js file. 

If we set the second argument to true, the parsing function is called also in the document ready event with a null selector. 

Some widgets need to be refreshed when the value of the underlying Html field is changed programmatically from javascript.

For instance, in jQuery Mobile, if we change the selected value of a select that has been transformed into a widget, whose id is, say,  MyId, we are required to call $('#MyId').selectmenu('refresh'), otherwise the appearence of the widget is not changed to reflect the new value.

Sometimes the toolkit changes programmatically the values of input fields. Specifically this happens when a Datagrid item is reset to a previous value, or because of a knockout binding (if we are using Client Blocks). In order to inform the toolkit on the necessity to refresh the input field we can add it a data-refresh attribute whose value is the name of the widget.

Thus, for instance, in the case of jQuery Mobile we need to apply the data-refresh='selectmenu' attribute to all select that we will be transformed into a widget. This way, the toolkit will automatically call: .selectmenu('refresh') whenever it cahnges the value of any of such selects.

An important advice to all users of jQuery Mobile is: Please do not let jQuery Mobile transform automatically all input fields into widgets, but pass to jQuery Modile a selector to filter just the ones you would like to transform, otherwise, some bad effects might take place. 

For instance, if jQuery mobile transforms the textbox of a TypedTextBox into a widget, you will loose all styling, and in particular, the styling used for the watermark text. As a general rule, transforming into widget the parts an Mvc Controls Toolkit control is composed of, is not a good idea!

The filtering of the fileds to be transformed into widgets can be accomplished wih a statement like:

$(document).bind('mobileinit', function ()

{  $ = ":not(.mobilegadget)";             });

located just before the reference to the jQuery Mobile js file. 

The above statement allows the transformation into widgets of just the fileds containing the CSS class mobilegadget

Last edited Jun 22, 2014 at 11:33 AM by frankabbruzzese, version 7


No comments yet.