Home/ Questions/Q 8442771
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T08:55:53+00:00

I would like to transfer some content from (div class=StaffBlock) that loaded from the

  • 0

I would like to transfer some content from (div class=”StaffBlock”) that loaded from the iframe from /index.html into div class=”Contact-Agent-Append”. but my jquery is not working and i dont know why, is it because of im loading it from iframe? Thanks.

<iframe scrolling="no" height="60px" frameborder="0" width="150px" src="/index.html" marginwidth="0px" marginheight="0px" style="overflow:hidden; margin:0; padding:0; display: none;"></iframe>

<script>
$('.StaffBlock').appendTo($('.Contact-Agent-Append'));
</script> 

<div class="Contact-Agent-Append">content should go here
</div>

Question Updated:

this is the content stored in the remote url which contain the StaffBlock:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/StyleSheets/listing-contact.css" />
</head>
<body>
<div class="listing-contact">
<div class="StaffBlock">
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="col-a">{tag_name}</td>
    <td class="col-b" rowspan="4">{tag_Staff Photo}</td>
  </tr>
  <tr>
    <td>{tag_job title}</td>
  </tr>
  <tr>
    <td>{tag_mobile}</td>
    </tr>
  <tr>
    <td><a href="mailto:{tag_email}">email me</a></td>
  </tr>
</table>
</div>
</div>

</body>
</html>

and this is the original coding that contain the iframe:

<div class="Contact-Agent-{tag_Publish As Agent}">

    <div class="Contact-Agent-Small-Logo-listing" title="this property is published by agent">
    </div>
    <iframe scrolling="no" height="60px" frameborder="0" width="150px" src="{tag_listing agent staff url}" marginwidth="0px" marginheight="0px" style="overflow:hidden; margin:0; padding:0; display: none;"></iframe>
    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $('iframe').contents().find('.StaffBlock').clone().appendTo($('.Contact-Agent-Append'))‌​‌​
});//]]>  
    </script> 
    <div class="Contact-Agent-Append">1
    </div>

</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to take into account that you have to wait until both the page and the iframe are ready for DOM manipulation. Using one $(document).ready() is not enough.

    In your case, it seems you can modify the content of your iframe. I’d suggest using the iframe to push data into the main page, instead of getting data from it, it will make sure both are ready.

    You will probably need to load jQuery in your iframe, the great thing is that you can add a parameter to your selectors to change its context. Default is document, but in your case you will need to target the main page from the iframe document.

    Also do not forget that if you want the content of a div, a selector is not enough. Either use its .html() or .clone() it.

    // in your iframe :
$(document).ready(function()
{
    $('.Contact-Agent-Append', window.parent.document)
    // or window.parent.$('.Contact-Agent-Append')
        .append( $('.StaffBlock').html() );
});

    You might want to adapt the selector based on your needs, but it will work faster than a setInterval. If at first it doesn’t work try removing jQuery from the mainpage to prevent any conflict, if it solves your issue try using j=jQuery.noConflict();

    • 0