Having trouble passing data from iframe to parent

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

Having trouble passing data from iframe to parent

Post by drayarms »

Hello folks, the problem is very straight forward. I have a form which uploads pictures. The form is located in a modal dialog box, so the php script that handles the form is processed within an iframe in the same dialog box as the form. The success or error messages from the script are then echoed out within the iframe. Everything works good so far, but the issue is, I want to transfer those feedback messages from the iframe back into the parent dialog box, specifically into another div within the dialog box which I call upload_pic_feedback. Here is the code I have which wouldn't work. Any ideas why I got it wrong?
PS I need to transfer the data from iframe to feedback box because at the end of the day, I plan to render the iframe invisible to the user. I also want to hide the form and display the feedback div which by default is hidden when upload has successfully taken place


Main HTML containing the dialog box

Code: Select all



<div id = "dialog_box">

    <form id = "upload_pic_form"  enctype="multipart/form-data" action="picture_upload.php" target = "pic_upload_iframe"   method="post">
           <input name="MAX_FILE_SIZE" value="10000000" type="hidden">

           <input name="picture" accept="image/jpg, image/png, image/jpeg, image/bmp, image/gif, video/*" type="file"> 

	   <button class = "button" name="submit" type="submit"> Submit! </button>
                         					
     </form>



     <iframe  id = "upload_pic_iframe" name="pic_upload_iframe"   width = "100px" height = "100px">


     </iframe>



     <div id = "upload_pic_feedback" style = "display:none">
 
          <?php
              
                //The picture_upload.php script which handles the form, runs within this iframe. It generates either a 
                //success or error variable which is echoed below

		if(isset($error)){echo $error;}

		if(isset($success)){echo $success;}

                //And finally here is the script which is supposed to hide the form, show the feedback div and transfer 
                //the variables from iframe to feedback div

		echo"

		<script type = 'text/javascript'>

			$('#upload_pic_form', top.document).hide();//Hide the form in the parent dialog box

			$('#upload_pic_feedback', top.document).show();//Show the feedback div

                        var send_to_parent = $('#upload_pic_iframe', top.document).html();

			$('#upload_pic_feedback', top.document).append(send_to_parent);//Append the data
                        
		</script>

		";

          ?>


     </div> <!--closes upload pic feedback-->


</div>




PS I've also tried parent.document in place of top.document, all in vain.
Post Reply