JQuery Mobile: markup. Improving dynamically added content.

Question

I was wondering how can I improve jQuery Mobile's dynamic page?

I tried using these methods:

• $('[data-role="page"]').trigger('create');

  and

• $('[data-role="page"]').page();

Also, how can I prevent the markup markup from being raised?

Answer 1

Denial of responsibility:

This article can also be found as part of my blog HERE .

Introduction:

There are several ways to enhance dynamically generated content markup. It is not enough to dynamically add new content to a jQuery Mobile page; new content should be expanded using the classic jQuery Mobile style. Since this is a rather difficult task, it is necessary to have some priorities, if possible jQuery Mobile needs to be done as little as possible. Do not improve the entire page if you need to create only one component.

What does it mean? When the page plugin dispatches the pageInit event, which most widgets use to automatically initialize. it will automatically improve all widget instances that it finds on the page.

However, if you create a new client markup page or upload content via Ajax and enter it on the page, you can trigger a create event to handle automatic initialization for all plugins contained in the new markup. This can be activated for any element (even the page section itself), which allows you to manually initialize each plugin (list button, select, etc.).

With this in mind, we can discuss the levels of increase. There are three of them, and they are sorted from a smaller resource that requires higher ones:

• Single component / widget enhancement
• Improving page content
• Improving full page content (title, content, footer)

Improvement of a single component / widget:

Important: The following enhancement methods should only be used on the current / active page. For dynamically inserted pages, these pages and their contents will be expanded after pasting into the DOM. Calling any method on dynamically generated pages / except for the active page will result in an error.

Each jQuery Mobile widget can dynamically expand:

• Listview :

  Markup Improvement:

   $('#mylist').listview('refresh'); 

  Removing list items:

   $('#mylist li').eq(0).addClass('ui-screen-hidden'); 

  Improvement example: http://jsfiddle.net/Gajotres/LrAyE/

  Note that the refresh () method only affects new nodes added to the list. This is done for performance reasons.

  One of the top level lists is the filter function. Unfortunately, for some reason, jQuery Mobile will not be able to dynamically add a filter parameter to an existing list. Fortunately, there is a workaround. If possible, delete the current listview and add another option with the filter option enabled.

  Here is a working example: stack overflow

   $(document).on('pagebeforeshow', '#index', function(){ $('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]'); $('<li>').append('<a href="#">Audi</a>').appendTo('#test-listview'); $('<li>').append('<a href="#">Mercedes</a>').appendTo('#test-listview'); $('<li>').append('<a href="#">Opel</a>').appendTo('#test-listview'); $('#test-listview').listview().listview('refresh'); }); 

• Button

  Markup Improvement:

   $('[type="button"]').button(); 

  Improvement example: http://jsfiddle.net/Gajotres/m4rjZ/

  One more thing, you do not need to use the input element to create the button, it can even be done using the base div, here is an example: http://jsfiddle.net/Gajotres/L9xcN/

• Navbar

  Markup Improvement:

   $('[data-role="navbar"]').navbar(); 

  Improvement example: http://jsfiddle.net/Gajotres/w4m2B/

  Here's how to add a dynamic navbar tab: http://jsfiddle.net/Gajotres/V6nHp/

  And another pagebeforecreate element: http://jsfiddle.net/Gajotres/SJG8W/

• Text Inputs, Search Inputs, and Text Areas

  Markup Improvement:

   $('[type="text"]').textinput(); 

  Improvement example: http://jsfiddle.net/Gajotres/9UQ9k/

• Slider and Switch Switches

  Markup Improvement:

   $('[type="range"]').slider(); 

  Improvement example: http://jsfiddle.net/Gajotres/caCsf/

  An example of an improvement during an event to create a page: http://jsfiddle.net/Gajotres/NwMLP/

  The sliders are a little distorted for dynamic creation, read more about this here: https://stackoverflow.com/a/212960/

• Checkbox and Radiobox

  Markup Improvement:

   $('[type="radio"]').checkboxradio(); 

  or if you want to select / deselect another Radiobox / Checkbox item:

   $("input[type='radio']").eq(0).attr("checked",false).checkboxradio("refresh"); 

  or

   $("input[type='radio']").eq(0).attr("checked",true).checkboxradio("refresh"); 

  Improvement example: http://jsfiddle.net/Gajotres/VAG6F/

• Select menu

  Markup Improvement:

   $('select').selectmenu(); 

  Improvement example: http://jsfiddle.net/Gajotres/dEXac/

• Folding

  Unfortunately, a collapsible element cannot be reinforced with any particular method, so trigger ('create') should be used instead.

  Improvement example: http://jsfiddle.net/Gajotres/ck6uK/

• Table

  Markup Improvement:

   $(".selector").table("refresh"); 

  Although this is a standard way to raise tables, at the moment I cannot get it to work. So use trigger ('create') instead.

  Improvement example: http://jsfiddle.net/Gajotres/Zqy4n/

• Panels - New

  Panel Layout Improvement:

   $('.selector').trigger('pagecreate'); 

  Brightening content dynamically added to Panel:

   $('.selector').trigger('pagecreate'); 

  Example: http://jsfiddle.net/Palestinian/PRC8W/

Improving page content:

In case we generate / restore the entire content of the page, it is best to do everything at once, and this can be done with this:

 $('#index').trigger('create'); 

Improvement example: http://jsfiddle.net/Gajotres/426NU/

Full page content enhancement (title, content, footer):

Unfortunately for us, the trigger ('create') cannot improve the layout of the header and footer. In this case, we need big guns:

 $('#index').trigger('pagecreate'); 

Improvement example: http://jsfiddle.net/Gajotres/DGZcr/

This is an almost mystical method because I cannot find it in the official jQuery Mobile documentation. However, it is easy to find in jQuery Mobile error tracking with a warning not to use it if it is really really necessary.

Notice .trigger ('pagecreate'); can only be used once per page refresh, I found this to be wrong:

http://jsfiddle.net/Gajotres/5rzxJ/

Third Party Extension Plugins

There are several third-party extension plugins. Some of them are made as an update of an existing method, and some of them are designed to fix faulty jQM functions.

• Change button text

  Unfortunately, we could not find the developer of this plugin. SO source: Change jquery mobile text text

   (function($) { /* * Changes the displayed text for a jquery mobile button. * Encapsulates the idiosyncracies of how jquery re-arranges the DOM * to display a button for either an <a> link or <input type="button"> */ $.fn.changeButtonText = function(newText) { return this.each(function() { $this = $(this); if( $this.is('a') ) { $('span.ui-btn-text',$this).text(newText); return; } if( $this.is('input') ) { $this.val(newText); // go up the tree var ctx = $this.closest('.ui-btn'); $('span.ui-btn-text',ctx).text(newText); return; } }); }; })(jQuery); 

  Working example: http://jsfiddle.net/Gajotres/mwB22/

Get the correct maximum content height

In case the page header and footer has a constant height, the div can be easily adjusted to the full available space with a little css trick:

 #content { padding: 0; position : absolute !important; top : 40px !important; right : 0; bottom : 40px !important; left : 0 !important; } 

And here is a working example with a demonstration of Google maps api3 : http://jsfiddle.net/Gajotres/7kGdE/

This method can be used to get the correct maximum content height and should be used with the pageshow event.

 function getRealContentHeight() { var header = $.mobile.activePage.find("div[data-role='header']:visible"); var footer = $.mobile.activePage.find("div[data-role='footer']:visible"); var content = $.mobile.activePage.find("div[data-role='content']:visible:visible"); var viewport_height = $(window).height(); var content_height = viewport_height - header.outerHeight() - footer.outerHeight(); if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) { content_height -= (content.outerHeight() - content.height()); } return content_height; } 

And here is a live jsFiddle example: http://jsfiddle.net/Gajotres/nVs9J/

There is one thing to remember. This function will allow you to get the maximum available height of the content and at the same time it can be used to stretch the same content. Unfortunately, it cannot be used to stretch img to the full height of the content, the img tag has an overhead of 3px.

Ways to prevent markup elevation:

This can be done in several ways, sometimes you need to combine them to achieve the desired result.

• Method 1:

  He can do this by adding this attribute:

   data-enhance="false" 

  in header, content, footer container.

  This also needs to be included in the application loading phase:

   $(document).one("mobileinit", function () { $.mobile.ignoreContentEnabled=true; }); 

  Initialize it before jquery-mobile.js is initialized (see example below).

  More about this can be found here:

  http://jquerymobile.com/test/docs/pages/page-scripting.html

  Example: http://jsfiddle.net/Gajotres/UZwpj/

  To re-create the page, use this:

   $('#index').live('pagebeforeshow', function (event) { $.mobile.ignoreContentEnabled = false; $(this).attr('data-enhance','true'); $(this).trigger("pagecreate") }); 

• Method 2:

  The second option is to do it manually using this line:

   data-role="none" 

  Example: http://jsfiddle.net/Gajotres/LqDke/

• Method 3:

  Some HTML elements can be prevented from improving markup:

    $(document).bind('mobileinit',function(){ $.mobile.page.prototype.options.keepNative = "select, input"; }); 

  Example: http://jsfiddle.net/Gajotres/gAGtS/

  Initialize it again before jquery-mobile.js is initialized (see example below).

Problems with markup improvements:

Sometimes when creating a component from scratch (for example, listview), this error occurs:

cannot call methods in list view before initialization

This can be prevented by initializing the component until the markup improves, here's how you can fix it:

 $('#mylist').listview().listview('refresh'); 

Problems with redefining markup:

If for some reason you need to change jQuery Mobile CSS by default, this should be done with !important . Without it, the default css styles cannot be changed.

Example:

 #navbar li { background: red !important; } 

jsFiddle example: http://jsfiddle.net/Gajotres/vTBGa/

Changes:

• 02/01/2013 - Added a dynamic demonstration of navbro.
• 03/01/2013 - Added comment on how to dynamically add filtering to the list.
• 03/07/2013 - A new chapter has been added: Get the correct maximum content height
• 03/17/2013 - Added a few words to the chapter: Get the correct maximum content height
• 03/29/2013 - Added new content about dynamically created sliders and fixed an example error
• 04/03/2013 - Added new content about dynamically created folding elements
• 04/04/2013 - Added the head of third-party plugins
• 05/20/2013 - Added dynamically added panels and content.
• 05/21/2013 - Added another way to set the full height of the content
• 06/20/2013 - Added a new chapter: Problems with undoing markup
• 06/29/2013 - Added an important WHEN note for using enhancement methods.

Answer 2

From JQMobile 1.4 you can do .enhanceWithin () for all children http://api.jquerymobile.com/enhanceWithin/

 var content = '<p>Hi</p>'; $('#somediv').html(content); $('#somediv').enhanceWithin();