Is it possible to create an element on the fly using jQuery Mobile?

Question

I have an application built using jQuery (and using various jQuery-UI tools).

For some reason, I have to port it to a smartphone / tablet and decided to use jQuery Mobile for this (to minimize the number of changes).

In my vanilla application, I created some elements of the page on the fly, depending on user interactions.

For example, a slider can be created this way (p is an object with a bunch of parameters):

function createSlider(p){ return $("<div/>",{ "id":p.id, "class":p.divClass, }).slider({ "orientation": p.align, "min":p.constraint.min, "max":p.constraint.max, "step":p.step, "value":p.curVal, "animate":"normal" /*and some event handling here, but it doesn't matter*/ }); } 

And this will create a beautiful slider. Now it looks like this:

 function createSlider(p){ return $("<range/>",{ "id":p.id, "class":p.divClass, "min":p.constraint.min, "max":p.constraint.max, "step":p.step, "value":p.curVal, }); } 

But since it was created on the fly, everything jQuery Mobile does when the page loads does not work.

Is there a way to force initialize without writing a slider in html?

Thanks.

EDIT . I found in the doc that this could be done using container.trigger("create"); However, this does not work yet.

EDIT2 : Ok create was the solution.

Answer 1

According to the documentation (see edit in question) use trigger("create") in the containing element.

And to make this work, you also need to remember that a range is an input type, not a tag ...

Working solution:

 function createSlider(){ return $("<input/>",{ "type":"range", "id":"sl", "min":0, "max":15, "step":1, "value":1, }); } function appendSlider(){ $("#yourdiv").append(createSlider()).trigger("create"); } 

There is no search option as a side code in the documentation for the jQuery mobile device.

Answer 2

Try calling .page() in the container to which the content is being added. Alternatively, adding .page() to the returned content may also work.