##

Demos

Menu Search

## Question:

# Content injected into a page is not enhanced.

## Answer:

jQuery Mobile has no way to know when you have injected content into a page. To let jQuery Mobile know you have injected content that must be enhanced, you need to either make sure the plugins are called to enhance the new elements or `trigger("create")` on the parent container so you don't have to call each plugin manually.

The page plugin dispatches 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.

However, if you generate new markup client-side or load in content via AJAX and inject it into a page, you can trigger the `create` event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page `div` itself), saving you the task of manually initializing each plugin (listview button, select, etc.).

For example, if a block of HTML markup (say a login form) was loaded in through AJAX, trigger the `create` event 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" );

    //HTML
    <form id="formid">
    	<input type="search" id="searchInput"/>
    	<button id="submitButton">Submit</button>
    </form>

    // JavaScript **CORRECT**
    $("#formid").trigger("create");

    // JavaScript INCORRECT
    $("#serchInput").trigger("create");
    $("#submitButton").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 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.

- Menu
- Home
- Getting started
- Introduction
- Responsive Web Design
- Page Navigation
- Pages
- Single page
- Multi-page template
- Dialog page
- Navigation
- Linking pages
- PHP redirect demo
- Backbone RequireJS demo
- Transitions
- Themes
- Default theme
- Classic theme
- Buttons & Icons
- Buttons
- Icons
- Icons load script
- CSS Framework
- Grids
- Grids: buttons
- Grids: custom responsive
- Form field containers
- Form hide labels
- Events
- Swipe list items
- Swipe page navigation
- Widgets
- Loader
- Toolbar
- Toolbar: external
- Toolbar: fixed
- Toolbar: fixed external
- Toolbar: persistent
- Navbar
- Tabs
- Panel
- Panel: examples
- Panel: external
- Panel: fixed
- Panel: responsive
- Panel: styling
- Panel: swipe open
- Popup
- Popup: alignment
- Popup: arrow size
- Popup: dynamic
- Popup: iframe
- Popup: image scaling
- Popup outside multi-page
- Listview
- Listview: autocomplete
- Listview: autocomplete remote data
- Listview: autodividers selector
- Listview: responsive grid
- Listview: linkbar
- Collapsible
- Collapsible: dynamic
- Collapsible set
- Controlgroup
- Controlgroup: dynamic
- Table Column Toggle
- Table Column Toggle: example
- Table Column Toggle: heading groups
- Table Column Toggle: options
- Table Reflow
- Table Reflow: heading groups
- Table Reflow: stripes and strokes
- Table Reflow: custom styles
- Filterable
- Form Widgets
- Forms
- Textinput
- Input button
- Checkboxradio: checkbox
- Checkboxradio: radio
- Selectmenu
- Selectmenu: custom
- Selectmenu: custom with filter
- Slider
- Slider: flip toggle switch
- Slider: tooltip
- Rangeslider
- Flipswitch
- Showcase
- Map geolocation demo
- Map list toggle demo

- Getting started
- Introduction
- Responsive Web Design
- Page Navigation
- Pages
- Single page
- Multi-page template
- Dialog page
- Navigation
- Linking pages
- PHP redirect demo
- Backbone RequireJS demo
- Transitions
- Themes
- Default theme
- Classic theme
- Buttons & Icons
- Buttons
- Icons
- Icons load script
- CSS Framework
- Grids
- Grids: buttons
- Grids: custom responsive
- Form field containers
- Form hide labels
- Events
- Swipe list items
- Swipe page navigation
- Widgets
- Loader
- Toolbar
- Toolbar: external
- Toolbar: fixed
- Toolbar: fixed external
- Toolbar: persistent
- Navbar
- Tabs
- Panel
- Panel: examples
- Panel: external
- Panel: fixed
- Panel: responsive
- Panel: styling
- Panel: swipe open
- Popup
- Popup: alignment
- Popup: arrow size
- Popup: dynamic
- Popup: iframe
- Popup: image scaling
- Popup outside multi-page
- Listview
- Listview: autocomplete
- Listview: autocomplete remote data
- Listview: autodividers selector
- Listview: responsive grid
- Listview: linkbar
- Collapsible
- Collapsible: dynamic
- Collapsible set
- Controlgroup
- Controlgroup: dynamic
- Table Column Toggle
- Table Column Toggle: example
- Table Column Toggle: heading groups
- Table Column Toggle: options
- Table Reflow
- Table Reflow: heading groups
- Table Reflow: stripes and strokes
- Table Reflow: custom styles
- Filterable
- Form Widgets
- Forms
- Textinput
- Input button
- Checkboxradio: checkbox
- Checkboxradio: radio
- Selectmenu
- Selectmenu: custom
- Selectmenu: custom with filter
- Slider
- Slider: flip toggle switch
- Slider: tooltip
- Rangeslider
- Flipswitch
- Showcase
- Map geolocation demo
- Map list toggle demo