CODEWITHSUNDEEP
jqueryjquery-mobile
M S Reddy
M S Reddy

Reputation: 196

How to add dynamic data to popup in jquery mobile?

I used popup() in jquery mobile

$("#id").popup();

I want to add some data to that 'id' element when popup is open.. How?

Upvotes: 0

Views: 5921

Answers (3)

user8942
user8942

Reputation: 141

so, with jQuery mobile, there is always a problem if you are generating your links via ajax calls. this is because on init, jQuery mobile tends to change a lot of things about the elements.

Also, u cant keep generating multiple popups since, if you are working on a project like mine, you might have a lot of places where you want the popups, making the app slow. So we make only one popup and change the content every time someone clicks on a link.

I created a fiddle looking at your question. Give it a shot, cheers

http://jsfiddle.net/tanwaniniranjan/0hzco633/3/

html:

<a href="#popupBasic" data-rel="popup" data-transition="flip" class="popupcontentchanger">Open Popup</a>

<div data-role="popup" id="popupBasic" data-overlay-theme="a">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
    <div id="changehere"> <!-- We will be changing content in this div -->

    </div>
</div>

jQuery:

//script to change content
$(document).on("click",".popupcontentchanger",function(event){
    var newhtml = $(this).html();
    $(document).on("popupafteropen", "#popupBasic", function (e) {
        $("#popupBasic #changehere").html(newhtml);
    });
});

//script to clear current html in the popup, on closing of popup so that every time it opens, it loads new content, without initially showing the old content. would have been better if jquery mobile added another method: popupbeforeopen :P
$(document).on("popupafterclose", "#popupBasic", function (e) {
    $("#popupBasic #changehere").html('');
});

Upvotes: 0

rink.attendant.6
rink.attendant.6

Reputation: 46228

Add this to your JavaScript:

$("#id").on('popupafteropen', function(){
    // do whatever here
    $(this).append("Add some HTML!");
    $(this).html("Or replace the HTML contents.");
});

See events of the popup plugin: http://jquerymobile.com/test/docs/pages/popup/events.html

Upvotes: 3

thecodeparadox
thecodeparadox

Reputation: 87073

$('#id').attr('data-some', 'some').popup();

or

$('#id').data('some', 'some').popup();

About data()

Upvotes: 0

Related Questions