CODEWITHSUNDEEP
jquery-mobileiframe
Yasas Rangika
Yasas Rangika

Reputation: 359

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

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>

Upvotes: 1

Views: 260

Answers (2)

Yasas Rangika
Yasas Rangika

Reputation: 359

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();

Upvotes: 0

frequent
frequent

Reputation: 28513

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.

Upvotes: 1

Related Questions