Question

So I’m fairly new to jQueryMobile but I’ve managed to create a search bar that displays results as you’re typing using Ajax that’s working just fine but the problem is that CSS Styles aren’t being applied to the ajax’d content.

Is there a way I can force the CSS to either refresh or recache or just have the CSS apply to the newly ajax’d html?

Answer 1

Enhancing new markup
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" );

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.

jQM Docs here:

• http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html

Refreshing form elements
In jQuery Mobile, some enhanced form controls are simply styled (inputs), but others are custom
controls (selects, sliders) built from, and kept in sync with, the
native control. To programmatically update a form control with
JavaScript, first manipulate the native control, then use the refresh
method to tell the enhanced control to update itself to match the new
state. Here are some examples of how to update common form controls,
then call the refresh method:

Checkboxes:

$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");

Radios:

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

Selects:

var myselect = $("#selectfoo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

Sliders:

$("input[type='range']").val(60).slider("refresh");

Flip switches (they use slider):

var myswitch = $("#selectbar");
myswitch[0].selectedIndex = 1;
myswitch.slider("refresh");

jQM Docs here:

• http://jquerymobile.com/demos/1.0.1/docs/forms/docs-forms.html