CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
nford8
nford8

Reputation: 105

Popup dynamically created can't bind with jQuery

I have a simple image search page querying the Flikr API and displaying 4 results as links to popup modals. My JS code inserts the relevant img src into the correct div's and data attributes for creating modal/popup boxes. I know that the rendered code is correct as I can copy/paste the output of the rendered code from DOM into another html file and open it, it works as it should.

I'm trying to work out a way of binding the data attributes so that jQuery knows that these dynamically created elements are popups.

HTML on load

<form action="#" method="post">
  <label for="search">Enter Search Tag</label>
  <input type="text" id="search" name="search_tag"/>
  <input type="button" id="submit_tag" value="Submit"/>
</form>


<div id="images">
  <div id="thePopups">
  </div>
</div>

JS 

  $('#submit_tag').on("click ",function(){

// grabs the values of the search box and checkbox
var tag = document.getElementById("search").value;
// $('#images').empty();

console.log('start api');

searchAPI(tag);

console.log('api finished');

function searchAPI(tag){

  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";

  $.getJSON( flickerAPI, {
    tags: tag,
    tagmode: "any",
    format: "json"
  })
  .done(function( data ) {
    $.each( data.items, function( i, item ) {


      $( "<img>" ).attr( "src", item.media.m ).appendTo( "#thePopups" ); 
      console.log('img'+i+' created');   

      $( "img:eq("+i+")").wrap( "<div data-role='popup' id='photo"+i+"'></div>");
      console.log('image '+i+' wrapped in popup '+i+'');

      $( "<a>" ).attr({
        'data-rel':'popup',
        href: "#photo"+i
      }).text( " Open Modal "+i )
      .appendTo( "#images");
      console.log('modal'+i+' created');

      if ( i === 3 ) {
        return false;
      }

    });


  });




}
})

Dynamically generates and inserts this.

<div id="images">  
<div id="thePopups">
<div data-role="popup" id="photo0"><img src="http://farm5.staticflickr.com/....../.jpg"></div>
<div data-role="popup" id="photo1"><img src="http://farm5.staticflickr.com/....../.jpg"></div>
<div data-role="popup" id="photo2"><img src="http://farm5.staticflickr.com/....../.jpg"></div>
<div data-role="popup" id="photo3"><img src="http://farm5.staticflickr.com/....../.jpg"></div>
</div>
<a data-rel="popup" href="#photo0">Open Modal 0</a>
<a data-rel="popup" href="#photo1">Open Modal 1</a>
<a data-rel="popup" href="#photo2">Open Modal 2</a>
<a data-rel="popup" href="#photo3">Open Modal 3</a>
</div>

But I can't get it to display and work as a popup. It's showing the images with the links which can't be opened.

Upvotes: 1

Views: 868

Answers (1)

deblocker
deblocker

Reputation: 7697

You can use just one static popup and link the image src dynamically:

var photos = [
  "http://placehold.it/150/7496a",
  "http://placehold.it/150/99ba7f",
  "http://placehold.it/150/8985dc"
];

function listPhotos() {
  $("#images").empty();
  $.each(photos, function(i, item) {
    $("<a>").attr({
        "data-src": item,
        href: "javascript:void(0);"
      }).addClass("ui-btn ui-corner-all").text(" Open Modal " + i)
      .appendTo("#images");
  });
}

$(document).ready(function() {
  $("#popup").enhanceWithin().popup();
  $("#photo").on("load", function() {
    $.mobile.loading("hide");
    $("#popup").popup("open", {
      "positionTo": "window"
    });
  });
});

$(document).on("pagecreate", "#page-1", function(event) {
  $("#images").on("click", "a[data-src]", function() {
    $.mobile.loading("show");
    $("#photo").attr({"src": $(this).data("src")});
  });
});
.ui-popup {
  padding: 1em;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div id="page-1" data-role="page">
    <div role="main" class="ui-content">
      <a class="ui-btn ui-corner-all" href="javascript:void(0);" onclick="listPhotos();">Get my Photos</a>
      <div id="images">
      </div>
    </div>
  </div>
  <div id="popup" data-theme="a">
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
    <img id="photo" src="">
  </div>
</body>
</html>

In my example i used a popup outside pages, so you can open it from everywhere, and you don't even need to create it inside the ajax call. The link is set by using a custom data-attribute.

Upvotes: 1

Related Questions