CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
b. e. hollenbeck
b. e. hollenbeck

Reputation: 6573

How can I Initialize a popup after pageinit?

The issue: I have text fields that are extremely long, and I'm truncating them and putting the full text into a jQuery Mobile popup that will appear when the '[more]' link is clicked. However, I'm having trouble finding the right hook to initialize the popup after replacing the text with the popup markup. I bound it to pageinit, but when I click, nothing happens. Not binding the replacement code at all gives me the message: "Function called on popup that has not been initialized", so I know that some initialization is necessary - but if not at pageinit, I don't know how early in the stack it needs to be called.

JSFiddle: http://jsfiddle.net/KSFyn/1/ - note: since the built-in jQuery Mobile for JSFiddle is 1.1.1, the pageinit isn't performing as expected, but that gives you an idea of what I'm trying to accomplish.

Upvotes: 1

Views: 3063

Answers (1)

Phill Pafford
Phill Pafford

Reputation: 85378

Does something like this work?

UPDATED: need to recreate the jQM Markup as you are dynamically adding the popup text after the page is created (using the 'create' event in JQM ~ beh)

HTML

<div data-role="page" class="type-home">
    <div data-role="content">
        <a href="#popupInfo" data-rel="popup" data-role="button" data-inline="true">This is an exceptionally long span ...</a>
        <div data-role="popup" id="popupInfo" class="ui-content" data-theme="e" style="max-width:350px;">
          <p>This is an exceptionally long span that I will attempt to break up with JS and present the full text as a popup.  This is an exceptionally long span that I will attempt to break up with JS and present the full text as a popup.</p>
        </div>
    </div>
</div>
​

Upvotes: 1

Related Questions