loading content in a div from iframe with jquery

Question

I have a dropdown list menu in my "index.php" page that loads another page (depending of selection) in a iframe like this:

<head>
<script language="javascript">

function setPic(elem) {
     var image = document.getElementById('canvas');
     image.src = elem.value; 
  
}
</script>
</head>
<body>

<div id="header">
loading area
</div>


<div id="content">
  <form>
    <select onchange="setPic(this);">
      <option value="/network/page_elements/lvl1.php" >lvl1</option>
      <option value="/network/page_elements/lvl2.php" >lvl2</option>
      <option value="/network/page_elements/lvl3.php" >lvl3</option>
      <option value="/network/page_elements/lvl4.php" >lvl4</option>
    </select>
</form>


<iframe src="/network/page_elements/lvl1.php" id="canvas"></iframe>

</div>
</body>

So i am loading for example page "lvl1.php" in the iframe. This "lvl1.php" page contains a button like this:

<form method="post">
  <input type="button" value="1" id="A1" />
</form>

When this button is being pressed it executes a jquery code that should load some results in the div with id="header" on the "index.php" page...wich it doesn't.

The jquery looks like this:

$(document).ready(function() {
 
  
    $('#header').load('network/page_elements/header.php');
 
 $('input').click(function() {
  
  var page=$(this).attr('id');
  
  $('#header').load('network/buttons/' + page + '.php');
  });
  
  return false;
});

So in this example when button is pressed it should execute a script called "A1.php" and post its results in the div with id="header" on the index page.

If i place the button code on the "index.php" page it works fine...but it does nothing if it is being pressed on the loaded page inside the iframe.

Any ideea what am i doing wrong?

there will be more buttons....A1 is just an example...so i cant use it specific for this button only. — Cilonx, Apr 21 '15 at 11:20

score 0 · Accepted Answer · edited May 23 '17 at 12:22

0

You must access the DOM of the parent window since the javascript is executing inside a frame

window.opener.$("#header")

how to access parent window object using jquery?

edited May 23 '17 at 12:22

Community

1
1

answered Apr 21 '15 at 11:08

DigitalDouble

1,747
14
26

i modified the jquery like this: $(document).ready(function() { window.opener.$('#header').load('network/page_elements/header.php'); $('input').click(function() { var page=$(this).attr('id'); window.opener.$('#header').load('network/buttons/' + page + '.php'); }); return false; }); but it still doesnt work. – Cilonx Apr 21 '15 at 11:22

score 0 · Answer 2 · answered Apr 21 '15 at 13:01

0

Got it in the end:

I changed the jquery like this to access the parent window:

$("#header",window.parent.document).load('/network/buttons/' + page + '.php');

Thanks for the idea Digitaldouble

answered Apr 21 '15 at 13:01

Cilonx

33
6

loading content in a div from iframe with jquery

2 Answers2