1

So I'm dynamically inserting text inputs into a jQuery mobile page that is inside an iframe. I can get it to insert correctly but the trigger('create') method doesn't apply any jqm styles, although it doesn't throw any javascript errors either.

Code on the page that inserts into iframe:

 $('.textarea').click(function() {
   $('#form').contents().find('#maincontent').append('<div data-role="fieldcontain"><label for="insert">Text Input:</label><input type="text" name="insert" id="insert" value="" /></div>');
   $('#form').contents().find('#maincontent').trigger('create');
});

And here is the boilerplate jqm maincontent (I've excluded header/footer for easier reading) that is inside the iframe (prior to inserting new text input)

<div data-role="content" id="maincontent"> 
 <div data-role="fieldcontain">
     <label for="name">Text Input:</label>
     <input type="text" name="name" id="name" value=""  />
 </div>
</div>
Brock Adams
  • 90,639
  • 22
  • 233
  • 295
Msencenb
  • 5,675
  • 11
  • 52
  • 84

4 Answers4

0

Run this line after you make all your insertions.

$('body').append(html).trigger('create');

Trick found by another SO user https://stackoverflow.com/users/456850/devin-dixon (Original Question).

Community
  • 1
  • 1
Julio Rodrigues
  • 3,373
  • 3
  • 24
  • 33
0

Create a function inside iframe and include trigger('create') method in that function. Then call to that function outside from the iframe.

see this .

Community
  • 1
  • 1
Yasas Rangika
  • 359
  • 4
  • 8
0

the create event might be firing, but where are you listening to it and responding?

for that means, you might need something like

$("#maincontent").bind('create', function() {
    //respond to the fired event
})
eltuza
  • 84
  • 1
  • 5
  • Reading the jquery mobile release for beta 2 (http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/) there is a built in create method. Search "New "create" event" to find it in the announcement – Msencenb Aug 31 '11 at 22:30
0

I make the following assumptions:

  • #form is the ID of your iframe.
  • The content from the iframe comes from the same domain.

Have you tried this:

$('.textarea').click(function() {    
  var iframecontent = $('#form').contents().find('#maincontent');
  var newstuff = $('<div data-role="fieldcontain"><label for="insert">Text Input:</label><input type="text" name="insert" id="insert" value="" /></div>');
  newstuff.appendTo(iframecontent).trigger('refresh');
});
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100