jquery mobile popup not working (for loop)?

Question

I tried to create pop ups using for-loop, but does not work. Why?

http://jsfiddle.net/edgardaraujo/Rud3G/2/

I thank you all for the help.

content html

<div data-role="page" id="page1">
    <div data-role="content">
        <div id="output"></div>
    </div>
    <!-- /content -->
</div>


content jquery

var array = new Array();

array[0] = "link-image-1";
array[1] = "link-image-2";
array[2] = "link-image-3";
var len = Object.keys(array).length;

for (i = 0; i < len; i++) {

    var popup = array[i];

    $('#output').css({'font-weight': 'bold'}).append('<a href="#' + popup + '" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="' + popup + '" alt="photo, test" style="width:30%"></a>');

    var arrayPhotos = $('<div data-role="popup" id="' + popup + '" data-overlay-theme="a" data-theme="d" data-corners="false"></div>');

    arrayPhotos.append('<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>   <img class="popphoto" src="' + popup + '" style="max-height:512px;" alt="photo, test">');

}

create a gallery of images as in this example. jsfiddle.net/edgardaraujo/Rud3G/2 — Edgard
– Edgard, Commented May 15, 2013 at 19:58

Omar · Accepted Answer · 2013-05-17 10:19:10Z

3

Upadate

When you create [data-role=popup] dynamically, you need to enhance its markup by using .trigger('create').

Demo

You have a mistake in href of the link to popup. You have used variable popup which holds image links instead of using the count variable i.

href="#popup' + i + '"

Here

$('#output').css({ 'font-weight': 'bold'}).append('<a href="#popup' + i + '" data-rel="popup" data-position-to="window" data-transition="fade"><img class="popphoto" src="' + popup + '" alt="photo, test" style="width:30%"></a>');

And

var arrayPhotos = $('<div data-role="popup" id="popup' + i +'" data-overlay-theme="a" data-theme="d" data-corners="false"></div>');

edited May 17, 2013 at 10:19

answered May 15, 2013 at 21:04

Omar

31.7k9 gold badges73 silver badges117 bronze badges

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

5 Comments

Edgard Over a year ago

The for-loop is not working with the array containing the image links. You associated with the links that are in html. Here is my problem with the for-loop. jsfiddle.net/edgardaraujo/Rud3G/2

Edgard Over a year ago

I examined your code and it unfortunately did not help me, but thank you.

Omar Over a year ago

@Edgard check this and let me know if you need further help jsfiddle.net/Palestinian/UbnVh

Edgard Over a year ago

great alternative, congratulations. But I could not understand what the error in the for-loop I did? Could you clarify?

Omar Over a year ago

@Edgard the problem isn't in the loop, it's the way you appended the items. In the demo I merged popup divs with their images and then used create to enhance their markup.

Collectives™ on Stack Overflow

jquery mobile popup not working (for loop)?

1 Answer 1

Upadate

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Upadate

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related