Open jQuery popup and click return value

Question

I want to open a popup using jQuery to display a selection of images. Images are wrapped in link tags in an unordered list. At some point, navigation will be added, so I don’t think the dialogue is suitable. Here is the code that I still have:

Main page:

<script> $('.ImageManager').click(function (event) { event.preventDefault(); window.open($(this).attr("href"), "popupWindow", "width=600, height=400, scrollbars=yes"); }); </script> <a href="/image-manager" class="ImageManager">Add Image</a><br /> <ul id="imagelist"> </ul> 

Pop-up window:

 <script> $(function() { $(".addimage").click(function() { $("#imagelist", opener.document).append("<li></li>"); return false; }); }); </script> <ul> % for image in images: <li><a href="" class="addimage"><img src="/static/images/{{ image }}" alt="" /></a></li> % end </ul> 

The first problem is that the popup does not open, it just opens the image manager in the current browser window. I have jQuery listed in the chapter section of both pages and it works with other jQuery code.

Secondly, I tried using simple Javascript to open the popup that worked, but I couldn’t get a click link to add the image file name to the open window, and the popup does not close afterwards.

If I can make the popup work, how do I pass the {{image}} variable (Python Bottle template variable) passed when I clicked the image in the popup?

Answer 1

Ok, let me take a hit: Short and sweet, you need to turn to the open window.

Now, provided, in JSFiddle I am limited, since I cannot create several documents to upload, as you have, so it will look a little different than yours; Sorry. But I can create the same effect by changing the HTML from a hidden div. A hidden div is your “other document”.

When you create a new window using window.open, the return is a link to that window, which is w and ww in my code. This is more or less a "window" in javascript. So when you see

 $('#imagelist', w.opener.document) 

w = window. Although, this shows an alternative way to map functionality, if you want, by calling the child document and binding from the parent.

code:

 $('.ImageManager').click(function (event) { event.preventDefault(); var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes"); var $w = $(w.document.body); $w.html($('#modalText').html()); $w.find(".addimage").click(function(e) { e.preventDefault(); console.log(w.opener.document); $("#imagelist", w.opener.document).append("<li></li>"); }); }); 

Lines (script): http://jsfiddle.net/NPyrd/5/