I'm wanting to open a pop up window using JQuery to display a selection of images. The images are wrapped in link tags in an unordered list. There will be some navigation added at some point so I don't think a dialog is appropriate. Here is the code I have so far:

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>

Popup 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 I have is that the popup doesn't open, it just opens the image manager in the current browser window. I've got JQuery referenced in the head section of both pages and it works with other JQuery code.

Secondly, I tried using plain Javascript to open the popup which worked but I couldn't get the clicked image link to append the image filename to the opener window and the popup wouldn't close afterwards.

If I can get the popup working how do I pass the {{ image }} variable (Python Bottle template variable) passed when the image in the popup is clicked?

I'm wanting to open a pop up window using JQuery to display a selection of images. The images are wrapped in link tags in an unordered list. There will be some navigation added at some point so I don't think a dialog is appropriate. Here is the code I have so far:

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>

Popup 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 I have is that the popup doesn't open, it just opens the image manager in the current browser window. I've got JQuery referenced in the head section of both pages and it works with other JQuery code.

Secondly, I tried using plain Javascript to open the popup which worked but I couldn't get the clicked image link to append the image filename to the opener window and the popup wouldn't close afterwards.

If I can get the popup working how do I pass the {{ image }} variable (Python Bottle template variable) passed when the image in the popup is clicked?

• javascript
• jquery
• popup
• append
• element

1 Answer 1

Okay, let me take a stab: The short and sweet, you need to reference the opened window.

Now, granted, in JSFiddle I am limited since I cannot create multiple documents to load like you have, so this is going to look a little different than yours; sorry. But I CAN create the same effect by modifying the HTML from a hidden div. The hidden div is your "other document."

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

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

w = window. Although, this does show an alternative way to map the functionality if you wanted, 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>");
    });
});

Strings (Fiddle): http://jsfiddle/NPyrd/5/