make dform working with JQuery Mobile about jquery.dform

[daffl]

Are you sure that his is generating the same HTML as expected by jQuery mobile?

[artmedia]

David,
I think it's correct, look at the html code generated in the example (using Firebug):

*********** this is the html generated by dform (this doesn't work) **********************
< div data-role="controlgroup" id="myDataRoleControlgroup" class="ui-dform-DivDataRoleControlgroup">
< a href="#" data-role="button" id="BtnStartForm2" class="ui-dform-ADataRoleButton">ITEM MENU 1< / a >
< a href="#" data-role="button" id="BtnMenu1" class="ui-dform-ADataRoleButton">ITEM MENU 2< / a >
< /div >

*********** this is the html in html file (this works) **********************
< div data-role="controlgroup" >
< a href="#" data-role="button">ITEM MENU 3< / a >
< a href="#" data-role="button">ITEM MENU 4< / a >
< a href="#" data-role="button">ITEM MENU 5< / a >
< /div >

I think that the problem could be page events...
In this example the dform-html is probably generated after jquery mobile js is loaded.

[artmedia]

David,
did you try dform and jquery mobile?
Do you have any suggestion?
Thanks
Luca (Italy)

[daffl]

I don't think it's a dForm issue. You have to just treat dForm content the same as any other dynamically created content. Taken from this Stackoverflow answer I got this working (see in this Fiddle):

<div id="home" data-role="page"> 
</div> 

$("#home").dform({
    "type": "div",
    "data-role": "content",
    "class": "content",
    "html": {
        "type": "ul",
        "data-role": "listview",
        "data-inset": "true",
        "html": {
            "type": "li",
            "html": {
                "type": "a",
                "href": "#",
                "html": "Testing dForm"
            }
        }
    }
});

$.mobile.page("#home", {transition: "none"});  
$.mobile.activePage.trigger('create'); 

[artmedia]

thanx