Search jQuery

jQuery Forum

Replacing and injecting HTML into a page, (dynamic page, dynamic dialog)

in jQuery Mobile • 11 years ago

I have read a lot of posts about updating form elements and injecting html into an already loaded page. To me this seems an important part of any dynamic site. For example, on a form submission I either want to return a dialog indicating the next step or return the user to the form with errors indicated. The problem is that any new/replaced HTML elements are not styled.

I have read that using $(#element).page will work, but this does not work on an existing page and should not be used in general unless you are creating a page. I have also read that you should change the content of an element and use xxx("refresh"). Refreshing an element is only useful if you only need to update its content. Refreshing elements does not work well with partials or if you need to add/remove/change elements.

The code to re-parse an element is already written. Is just not exposed in a useful way. I propose that a function for re-parsing a portion of a page (or current active page) be added to the API. That way when I am updating more than just a list I can easily re-style the page.

By the time I identified all of the elements I update I ended up pulling the code from page.. Please make the styling code available for me to call from jquery mobile

function refreshElem(element) {
var keepNative = ":jqmData(role='none'), :jqmData(role='nojs')"
//some of the form elements currently rely on the presence of ui-page and ui-content
// classes so we'll handle page and content roles outside of the main role processing
// loop below.
element.find( ":jqmData(role='page'), :jqmData(role='content')" ).andSelf().each(function() {
$(this).addClass( "ui-" + $(this).jqmData( "role" ) );
});
element.find( ":jqmData(role='nojs')" ).addClass( "ui-nojs" );
// pre-find data els
var $dataEls = element.find( ":jqmData(role)" ).andSelf().each(function() {
var $this = $( this ),
role = $this.jqmData( "role" ),
theme = $this.jqmData( "theme" );
switch(role) {
case "collapsible":
case "fieldcontain":
case "navbar":
case "listview":
$this[ role ]();
break;
}
});
var allControls = element.find("input, textarea, select, button");
var nonNativeControls = allControls.not(keepNative);
var textInputs = allControls.filter( "input[type=text]" );
if (textInputs.length && typeof textInputs[0].autocorrect !== "undefined") {
textInputs.each(function(){
// Set the attribute instead of the property just in case there
// is code that attempts to make modifications via HTML.
this.setAttribute("autocorrect", "off");
this.setAttribute("autocomplete", "off");
});
}
// enchance form controls
nonNativeControls
.filter( "[type='radio'], [type='checkbox']" )
.checkboxradio();
nonNativeControls
.filter( "button, [type='button'], [type='submit'], [type='reset'], [type='image']" )
.button();
nonNativeControls
.filter( "input, textarea" )
.not( "[type='radio'], [type='checkbox'], [type='button'], [type='submit'], [type='reset'], [type='image'], [type='hidden']" )
.textinput();
nonNativeControls
.filter( "input, select" )
.filter( ":jqmData(role='slider'), :jqmData(type='range')" )
.slider();
nonNativeControls
.filter( "select:not(:jqmData(role='slider'))" )
.selectmenu();
//links in bars, or those with data-role become buttons
element.find( ":jqmData(role='button'), .ui-bar > a, .ui-header > a, .ui-footer > a" )
.not( ".ui-btn" )
.not(keepNative)
.buttonMarkup();
element
.find(":jqmData(role='controlgroup')")
.controlgroup();
//links within content areas
element.find( "a:not(.ui-btn):not(.ui-link-inherit)" )
.not(keepNative)
.addClass( "ui-link" );
}

Replies(1)

ahutchjq

Re: Replacing and injecting HTML into a page, (dynamic page, dynamic dialog)

11 years ago

Thanks to the guys/girls at jquery-mobile this feature is exposed.

Now, our handy create event will initialize all the necessary plugins within that markup, just like how the page creation enhancement process works. If you were to use Ajax to load in a block of HTML markup (say a login form), you can trigger create to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

Top Reply

Response title

Attachments

jQuery Forum

Replacing and injecting HTML into a page, (dynamic page, dynamic dialog)

Replies(1)

Re: Replacing and injecting HTML into a page, (dynamic page, dynamic dialog)

Statistics

Tags

Actions