javascript - refresh form page with jQuery Mobile - Stack Overflow

admin管理员组

文章数量:1025218

In my mobile website, I dynamically create a form in javascript, so I need the 'reload' the page to get the jQuery Mobile style. For a listview, we can simply call $("#mylistview").listview("refresh") but there is no such feature for form.

I know that we can call "refresh" one each element of the form, but by doing this, the style is not correctly applied. Indeed, all my checkbox get separated, they don't appears in one "inset"

I there any workaround ?

In my mobile website, I dynamically create a form in javascript, so I need the 'reload' the page to get the jQuery Mobile style. For a listview, we can simply call $("#mylistview").listview("refresh") but there is no such feature for form.

I know that we can call "refresh" one each element of the form, but by doing this, the style is not correctly applied. Indeed, all my checkbox get separated, they don't appears in one "inset"

I there any workaround ?

• javascript
• jquery
• jquery-mobile

Share Improve this question Follow asked Oct 20, 2011 at 17:26 Stéphane PietteStéphane Piette 5,43166 gold badges3636 silver badges5050 bronze badges 1

• I guess you could use the LOAD method and insert it into another "page" which gets transformed with the mobile styles, and then load it up to the "current" page. This is just a theory dont know if it would work :( – Marco Johannesen Commented Oct 20, 2011 at 17:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Docs in the release notes:

• http://jquerymobile./blog/2011/08/03/jquery-mobile-beta-2-released/

Example:

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

Quote:

New “create” event: Easily enhance all widgets at once

While the page plugin no longer calls each plugin specifically, it does dispatch a “pagecreate” event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page, just like before. For example, if the selectmenu plugin is loaded, it will enhance any selects it finds within a newly created page.

This structure now allows us to add a new create event that can be triggered on any element, saving you the task of manually initializing each plugin contained in that element. Until now, if a developer loaded in content via Ajax or dynamically generated markup, they needed to manually initialize all contained plugins (listview button, select, etc.) to enhance the widgets in the markup.

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" );

Create vs. refresh: An important distinction

Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method that some widgets have should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.

For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.

In my mobile website, I dynamically create a form in javascript, so I need the 'reload' the page to get the jQuery Mobile style. For a listview, we can simply call $("#mylistview").listview("refresh") but there is no such feature for form.

I know that we can call "refresh" one each element of the form, but by doing this, the style is not correctly applied. Indeed, all my checkbox get separated, they don't appears in one "inset"

I there any workaround ?

In my mobile website, I dynamically create a form in javascript, so I need the 'reload' the page to get the jQuery Mobile style. For a listview, we can simply call $("#mylistview").listview("refresh") but there is no such feature for form.

I know that we can call "refresh" one each element of the form, but by doing this, the style is not correctly applied. Indeed, all my checkbox get separated, they don't appears in one "inset"

I there any workaround ?

• javascript
• jquery
• jquery-mobile

Share Improve this question Follow asked Oct 20, 2011 at 17:26 Stéphane PietteStéphane Piette 5,43166 gold badges3636 silver badges5050 bronze badges 1

• I guess you could use the LOAD method and insert it into another "page" which gets transformed with the mobile styles, and then load it up to the "current" page. This is just a theory dont know if it would work :( – Marco Johannesen Commented Oct 20, 2011 at 17:50

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Docs in the release notes:

• http://jquerymobile./blog/2011/08/03/jquery-mobile-beta-2-released/

Example:

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

Quote:

New “create” event: Easily enhance all widgets at once

While the page plugin no longer calls each plugin specifically, it does dispatch a “pagecreate” event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page, just like before. For example, if the selectmenu plugin is loaded, it will enhance any selects it finds within a newly created page.

This structure now allows us to add a new create event that can be triggered on any element, saving you the task of manually initializing each plugin contained in that element. Until now, if a developer loaded in content via Ajax or dynamically generated markup, they needed to manually initialize all contained plugins (listview button, select, etc.) to enhance the widgets in the markup.

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" );

Create vs. refresh: An important distinction

Note that there is an important difference between the create event and refresh method that some widgets have. The create event is suited for enhancing raw markup that contains one or more widgets. The refresh method that some widgets have should be used on existing (already enhanced) widgets that have been manipulated programmatically and need the UI be updated to match.

For example, if you had a page where you dynamically appended a new unordered list with data-role=listview attribute after page creation, triggering create on a parent element of that list would transform it into a listview styled widget. If more list items were then programmatically added, calling the listview’s refresh method would update just those new list items to the enhanced state and leave the existing list items untouched.

本文标签： javascriptrefresh form page with jQuery MobileStack Overflow