.trigger('create') method doesn't work with text input / iframe

Question

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>

I don't see any code for the "create" event. Did you mean the "pagecreate" event? — Mark Schultheiss
– Mark Schultheiss, Commented Aug 31, 2011 at 20:11
It is a built in jqm function (at least to my knowledge) see the comment I left below to eltuza's answer for more info — Msencenb
– Msencenb, Commented Aug 31, 2011 at 22:31

Mark Schultheiss · Accepted Answer · 2011-09-01 12:05:45Z

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');
});

answered Sep 1, 2011 at 12:05

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Msencenb Over a year ago

Nope didn't work. I also tried doing both a create and a refresh and that didn't work either.

Msencenb Over a year ago

Also your assumptions are correct. Thanks for taking the time to give it a shot :)

eltuza · Accepted Answer · 2011-08-31 20:09:04Z

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
})

answered Aug 31, 2011 at 20:09

eltuza

841 silver badge5 bronze badges

1 Comment

Msencenb Over a year ago

Reading the jquery mobile release for beta 2 (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

Community · Accepted Answer · 2017-05-23 10:34:39Z

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).

edited May 23, 2017 at 10:34

CommunityBot

11 silver badge

answered Aug 8, 2012 at 16:18

Julio Rodrigues

3,4234 gold badges26 silver badges33 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 10:25:27Z

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 .

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Aug 15, 2013 at 10:42

Yasas Rangika

3594 silver badges9 bronze badges

Collectives™ on Stack Overflow

.trigger('create') method doesn't work with text input / iframe

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related