How to execute javascript / jquery on a newly opened popup screen

Question

So basically I have jquery code on a page where:

Open a new popup window
Display rails view page
Manipulate items on a newly opened page

Don't know what sort of solutions are there, however I thought it should be really easy.

That's the code:

// open a popup window for example /fault_books/3
popup = window.open("/fault_books/" + <%= @fault_book.id %> , "popup");

// trying to get the scope of the element
var module = $(".module-logo", popup.document.body)

// manipulating the element
$(module).hide();

Or may be there is a way to add javascript to a created popup? — Jackie Chan, Jun 11 '13 at 12:17
Or try : `module = $(".module-logo", popup.document.documentElement.outerHTML);` — Mohammad Areeb Siddiqui, Jun 11 '13 at 12:24
What does happen when that code executes? Note: "nothing" is not a suitable answer; it's at best incomplete and at worst an outright lie. Have you checked your browser's console/developer tools for errors? — Anthony Grist, Jun 11 '13 at 12:34
Gives me on `console.log(popup.document.documentElement.outerHTML);` Debugging gives me: — Jackie Chan, Jun 11 '13 at 12:35
You must wait for the popup content to be loaded before executing your script. Have a look at http://stackoverflow.com/a/3030893/1236044 — jbl, Jun 11 '13 at 12:35

score 3 · Accepted Answer · edited Jun 11 '13 at 13:41

3

Not sure it will be cross-browser, but you may try something like :

var popup = window.open("/fault_books/" + <%= @fault_book.id %> , "popup");
$(popup.document).ready(function(){
  var module = $(".module-logo", $(popup.document))
  // manipulating the element
  $(module).hide();
});

edited Jun 11 '13 at 13:41

Erik Schierboom

16,301
10
64
81

answered Jun 11 '13 at 13:22

jbl

15,179
3
34
101

it doesn't solve the problem, but it was close... I just didn't realise that Rails provide multiple layouts for a single set of views... well my problem was solved – Jackie Chan Jun 12 '13 at 13:54

score 0 · Answer 2 · edited Jun 11 '13 at 13:42

Why don't you just put your javascript code to the generated response from "/fault_books/" + <%= @fault_book.id %>"

In that case, just do it as normal:

$(document).ready(function(){
    var module = $(".module-logo")

    // manipulating the element
    $(module).hide();
});

And don't need to do anything when opening a new window, just call:

popup = window.open("/fault_books/" + <%= @fault_book.id %> , "popup");

This solution is simple and easier to maintain as scripts are self-contained. Scripts on a page do jobs only for the containing page. Let's say, if you have another page opening the same url window.open("/fault_books/" + <%= @fault_book.id %> , "popup");. You don't have to duplicate code.

How to execute javascript / jquery on a newly opened popup screen

2 Answers2

Linked