Member Avatar for ivannz

Hello, everyone!

I'm fairly new to this forum, but I spent some time mining it for information. Unfortunaltely, as far as I have searched it I was unable to find an answer to my question. Googling hasn't satisfactorily answered my question also.

Here's the goal:

  • - user fills in a form (selects files for upload, writes a post, etc.) and submits it
  • - without page reload she gets a response from server (error, unsupported file type, inappropriate language, success, etc.)

I imagine first, submit-without-reload, part is done via the form.target property like this:
- iframe is either created dynamically with JS createElement or statically. But in any case it should look something like this: <iframe id="#iframe123456" name="#iframe123456"></iframe> - form, also created either dynamically or statically:

<form action="process.php" target="#iframe123456">
<!-- inputs of various types -->
</from>

As for the response/result part, server dumps its reply into the targeted iframe, so I have three alternatives:

  • - use iframe's onLoad (onReadyStateChange) event: attach a get_data() function to it.
  • - frequently/manually poll iframe for data using setInterval(get_data, milliseconds).
  • - inject some script into the server response that makes iframe itself call get_data() .

I am puzzled as to which alternative is the most preferrable, efficient and browser independent. Which one would you recommend?

And another question is how I can check if an iframe has data in it.

I use the following script to get the iframe's inner document object (excerpt from get_data() fucntion ):

if ( iframe.contentDocument ){

      doc = iframe.contentDocument;

    }else if( iframe.contentWindow ){

      doc = iframe.contentWindow.document;

    }else if ( document.frames ){

      doc = document.frames[iframe.name].document;

    }else if( window.frames[iframe.name] ){

      doc = window.frames[iframe.name].document;

    }

Where iframe = document.createElement("iframe");

And then i check whether doc.body && doc.body.innerHTML exist and are nonempty by this snippet:

/* in IE doc.readyState is bogus: immediately 'complete' */
if ( !( !doc.readyState ||
          doc.readyState && doc.readyState == 'complete' ) )
                         { /*die*/}

if ( !( doc.body && doc.body.innerHTML ) )
                         { /*die*/}

/* get the response */
  • 2 Contributors
  • 3 Replies
  • 2K Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for almostbob

if you use

<form action="process.php" target="#iframe123456" method='get'>
<!-- inputs of various types -->
</form>
<iframe name="iframe123456" width='100%' height='4000px' frameborder='0'></iframe>

get is supposed to retuirn the values, you should get the iframe updated each time you submit

Member Avatar for ivannz

It gets updated because form's method and action ("get" and "process.php") are targeted at the iframe hence the results are redirected to iframe. what i'm interested in is how, by what method to detect if iframe's content is fresh and updated, not stale, old or empty.
i don't mean something like including a random number in server response or a timestamp. i mean which is better to use:

  • iframe.onload event
  • a timer to regularly check if the iframe has fresh data
  • a script inside the server response, that calls data_ready() function in the main script

To see if the iframe has new and fresh data I do the following:

  • - I reset the iframe to an empty document before calling form.submit();
    var name = "#iframe" + Math.ceil( Math.Random(  ) * 10000000 );

/* create iframe */
var div = document.createElement("div");
div.innerHTML = '<iframe id="' + name + '" name="' + name + '" src="javascript:\'<html></html>\';"; />';
var iframe = div.firstChild;

/* set forms necessary attributes */
form.setAttribute('target', name);
form.setAttribute('action', url);
form.setAttribute('method', 'POST');

/* hide parent div */
div.style.display = iframe.style.display = "none";
div.style.position = "absolute";
div.style.top = div.style.left = "-1200px";

iframe.style.width = iframe.style.height = "1px";

/* make the iframe "active" */
document.body.appendChild( div );

/* save iframe variable somewhere */

form.submit();
  • - I check if idoc.body exists and idoc.body.innerHTML is not empty. Actually this is the essence of my quetsion, when should this check be done (onload, timer or inside an iframe itself), and is this the correct way to perform this check (not to rely on readyState etc).
    /* iframe is the very same "iframe" that I created above */
    if ( iframe.contentDocument ){

      idoc = iframe.contentDocument;

    }else if( iframe.contentWindow ){

      idoc = iframe.contentWindow.document;

    }else if ( document.frames ){

      idoc = document.frames[iframe.name].document;

    }else if( window.frames[iframe.name] ){

      idoc = window.frames[iframe.name].document;

    }
  • - I set the global flag iframe_has_usable_and_fesh_data = true and then call response processing functions like checkJSON() and eval() (taken from original RFC4627 page 6).
Member Avatar for almostbob

misinterpreted
I don't know ajax
but in php

echo 'Page loaded at '.date("g:ia dS \of F Y");

in both the outer form and the iframe source may help

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.