Ajax response to Iframe

JavaScript
1

hi all

how can we display a Ajax response to Iframe.for eg

i have some links in my page.when i click on each link i want to display some information in Iframe using ajax.
I am using prototype framework.I am getting the response from server.Now i just want to display this information to I frame. Is it possible?

Thanks

2

if the iFrame has some kind of id to identify it, then you should be able to latch onto that element (document.getElementById(‘my iframe’).document) to get the iFrame’s document and tweak around with its elements.

3

ya i have given iframe id and trying to display the response to this id.But its not working as it works in div.any other way?

Thanks

4

Do you have source code showing the iframe, then the contents of the iframe?

5

function ajax_aboutus_request(data)
{

	var URL='http://localhost/index.php?id='+data;
	var ajax = new Ajax.Request(URL, 
                       { method: 'get',onSuccess: function(display)
												  {

												$('ifr').update(display.responseText);													

												   } , 
									   	onFailure: function(error)
												  {
												  alert('errors in js');
												  }
												   

                       });

}
i am using proytotype for ajax.
here is my iframe code
<iframe width=“100%” name=“ifr” id=“ifr” src=“index.php” height=“700” frameborder=“0”></iframe>

6

Instead try:

$(‘ifr’).document.body.update(display.responseText);

and let me know if that works.

7

No.its not getting the data to iframe using “$(‘ifr’).document.body.update(display.responseText);”

Thanks

8

Okay I gave up and actually tried coding it instead :P:

Sample IFrame Source:

<html>
<head>
</head>
<body>
<div id="container">lol</div>
</body>
</html>

Sample Test File:


<html>
<head>
<script>
function getIframeDocument(element)
{
	var doc = element.contentDocument;
        if (doc == undefined || doc == null)
        {
         doc = element.contentWindow.document;
        }

	return doc;
}

window.onload = function()
{
  getIframeDocument(document.getElementById('if')).body.innerHTML = "Look at me!";
}
</script>
</head>
<body>

<iframe id="if" src="iframe.html">
</iframe>

</body>
</html>

So in your case, first off you’d need this handle little cross browser function to get the document of an iframe:

function getIframeDocument(element)
{
	var doc = element.contentDocument;
        if (doc == undefined || doc == null)
        {
         doc = element.contentWindow.document;
        }

	return doc;
}

Now that we’ve got that:

function ajax_aboutus_request(data)
{
  var URL='http://localhost/index.php?id='+data;
  var ajax = new Ajax.Request(URL,
  {
     method: 'get',onSuccess: function(display)
     {
        getIframeDocument($('ifr')).body.update(display.responseText);

     } ,
    onFailure: function(error)
    {
         alert('errors in js');
    }
9

Thanks
but its not working with this code

10

Does error console in firefox show anything (Assuming you have it installed)?

11

I am sorry.your code is right one

I changed “getIframeDocument($(‘ifr’)).body.update(display.responseText);”

to

getIframeDocument(document.getElementById(‘ifr’)).body.innerHTML=display.responseText;

Thanks for your great help

12

Suppose if i want to display the information to Tesxtarea,can i use same technique?

13

If the textarea is inside the iframe, you’d have to do something like:


getIframeDocument(document.getElementById('ifr')).getElementById('text_area_id').update(display.respo nseText);

if it’s not, then just $(‘text_area_id’).update(display.responseText) and you’re done. This is assuming your text area has an id of ‘text_area_id’.