#

Navigation Search

- Accordion
- AJAX Navigation
- Autocomplete
- Buttons
- Checkboxes
- Collapsibles
- Controlgroup
- Filter New
- Dialogs
- Fixed toolbars
- Flip switch, slider
- Flip switch New
- Footer toolbar
- Form elements
- Grids
- Header toolbar
- Icons New
- Links
- Listviews
- Loader
- Navbar
- Navbar, persistent
- Pages
- Panels
- Popup
- Radio buttons
- Select
- Select, custom
- Slider, single
- Slider, dual range
- Table, column toggle
- Table, reflow
- Text inputs & textarea
- Transitions
- Collapsibles
- Dynamic collapsible
- Controlgroups
- Dynamic controlgroup
- Listviews
- Grid Listview
- Autodividers Linkbar
- Autodividers Selector
- Maps
- Google Maps & Geolocation
- Google Maps with List toggle
- Navigation
- Backbone and Require.js example
- Redirection with server-side support
- Panels
- Panel styling
- Open panel on swipe
- Popups
- Dynamic popup
- Popup with arrow
- Responsive Tables
- Reflow: Custom styles
- Reflow: Heading groups
- Column toggle: Customization options
- Column toggle: Heading groups
- Column toggle demo: Phone comparison
- Sliders
- Tooltip extension
- Swipe
- Swipe to navigate
- Swipe to delete list item
- Forms
- Why won't my CSS styles apply correctly to a widget?
- Updating the value of enhanced form elements does not work.
- My HTML 5 inputs look different across devices and browsers.
- My range or search inputs are being change to number/text.
- Sometimes my custom select shows as a popup other times its a dialog.
- Disabling a button does not work.
- Controls in my fixed header or footer are not responding or behave erratically.
- Pages
- Why aren't my scripts and styles loading?
- Why isn't DOM ready working for my scripts?
- How do I load a page?
- Why is only the first page of my multi page document loaded?
- I'm trying to pass query params to a page but it's not working?
- I'm trying to pass information via the hash but it's not working?
- I'm trying to use the application cache but it's not working.
- Content injected into a page is not enhanced.
- Triggering create on injected HTML does not work.
- How can I stop JQM from auto-enhancing an element?
- How can I stop JQM from enhancing a block of elements?
- How do I control page titles?
- How do I load a page?
- How do I turn off the automatic hiding of the url bar?
- Events
- How do I use touch and mouse events?
- Theme and styling
- How does theming work?
- Apps
- How do I need to configure PhoneGap/Cordova?

## 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 `pageInit` 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.

All Questions & Answers