jquery mobile trigger('create') method doesn't work with iframe

Question

When I try to call .trigger('create') method to iframe contents, it does not work and css classes are not applied to input:text elements. but when I call .trigger('create') method for html content outside the iframe, it works

please go to this link 'here' on jsfiddle and click on "load mobile view"

javascript code

$('#mobile_view').contents().find('body').append("<div id='fbm_mob_menu'></div>");

$("#load_mobileview").click(function(){
    var content = ' <form class="fbm_contactform">\
    <div>Contact Us</div>\
    <div data-role="fieldcontain"><label for="name" >Name</label>\
    <input name="name" type="text" class="m-field" /></div>\
    <div data-role="fieldcontain"><label for="email">Email</label>\
    <input name="email" type="text" class="m-field" /></div>\
    <div data-role="fieldcontain"><label >Message</label>\
    <input name="message" type="text" class="m-field" /></div>\
    <input name="submitButton" type="submit" class="m-field" value="Send Message"  /></div>\
    </form> ';
$("#mobile_view").contents().find("#fbm_mob_menu").before(content);
$("#mobile_view").contents().find(".fbm_contactform").trigger("create");      
});

html code

<a href="javascript:void(0)" id="load_mobileview" >load mobile view </a>
<iframe id="mobile_view"></iframe>
<div id="test"></div>

score 1 · Answer 1 · answered Aug 13 '13 at 12:49

1

iFrame contents should not be "easily" accessible, so to me this is correct behavior.

If you check the jQuery Mobile API examples, you can see that all pages are done using iFrames and every iFrame has it's own version of jQuery Mobile.

So if you have an iframe, include JQM inside the iFrame and everything should be allright.

answered Aug 13 '13 at 12:49

frequent

27,643
59
181
333

I've already included JQM inside the iframe html. but I need to dynamically add contents to iframe and apply jquery mobile styles to that content. I'm working on a project which convert websites to mobile websites. so I have to find a way to do that. – Yasas Rangika Aug 14 '13 at 04:03

score 0 · Accepted Answer · answered Aug 14 '13 at 05:13

I could solve this problem by writing a javascript function inside iframe. and calling that function outside from the iframe.

in iFrame

<script>
window.trigerCreate =function(){$(".fbm_contactform").trigger("create");}
</script>

parent

window.frames[0].trigerCreate();

jquery mobile trigger('create') method doesn't work with iframe

2 Answers2

Linked