SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax response to Iframe

    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. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have source code showing the iframe, then the contents of the iframe?

  5. #5
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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&#37;" name="ifr" id="ifr" src="index.php" height="700" frameborder="0"></iframe>

  6. #6
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Instead try:

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

    and let me know if that works.

  7. #7
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No.its not getting the data to iframe using "$('ifr').document.body.update(display.responseText);"


    Thanks

  8. #8
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I gave up and actually tried coding it instead :P:

    Sample IFrame Source:

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

    Sample Test File:

    Code HTML4Strict:
    <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:

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

    Now that we've got that:

    Code JavaScript:
    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. #9
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    but its not working with this code

  10. #10
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Does error console in firefox show anything (Assuming you have it installed)?

  11. #11
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #12
    SitePoint Addict aniltc's Avatar
    Join Date
    Nov 2006
    Location
    INDIA
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax response to Textarea or textbox

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

  13. #13
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the textarea is inside the iframe, you'd have to do something like:

    Code:
    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'.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •