Solved

how to open a jquery dialog window after form is submitted

Posted on 2010-08-23
5
1,397 Views
Last Modified: 2012-05-10
Hello,

I have a web page that uses an html submit button that submits a form to itself and runs some php code.  At the end of that php code (after the form is submitted), I would like to open my jquery dialog window, but I'm unsure how to accomplish this...any ideas?
<?php
	$folder = 'images/';
	$orig_w = 500;
	$caption = $_POST[caption]; 
	$albumCoverImage = $_POST[albumCoverImage]; 
	if( isset($_POST['submit']) )
	{
		$imageFile = $_FILES['image']['tmp_name'];
		$filename = basename( $_FILES['image']['name']);
		$info = pathinfo($folder.$filename);
		$fileext = $info['extension'];
		list($width, $height) = getimagesize($imageFile);		
		$src ='';
		if (strtolower($fileext) == 'png') {
			$src = imagecreatefrompng($imageFile);
		}
		else if(strtolower($fileext) == 'gif'){
			$src = imagecreatefromgif($imageFile);
		}
		else if(strtolower($fileext) == 'jpg'){
			$src = imagecreatefromjpeg($imageFile);
		}
		else{
			echo "File type not supported, .gif, .jpg or .png required!";
		}			
		$orig_h = ($height/$width)* $orig_w;
		$tmp = imagecreatetruecolor($orig_w, $orig_h);
		imagecopyresampled($tmp, $src, 0,0,0,0,$orig_w,$orig_h,$width,$height);	
		if (strtolower($fileext) == 'png') {
			imagepng($tmp, $folder.$filename,100);
		}
		else if(strtolower($fileext) == 'gif'){
			imagegif($tmp, $folder.$filename,100);
		}
		else if(strtolower($fileext) == 'jpg'){
			imagejpeg($tmp, $folder.$filename,100);
		}
		else{
			echo "File type not supported, .gif, .jpg or .png required!";
		}
		imagedestroy($tmp);
		imagedestroy($src);
		$filename = urlencode($filename);
		header("Location: crop.php?filename=$filename&height=$orig_h");
	}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
		<title>Opus1 Image Upload</title>
		<link type="text/css" href="../jqueryui/css/ui.all.css" rel="stylesheet" />
		<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="../jqueryui/ui/ui.core.js"></script>
		<script type="text/javascript" src="../jqueryui/ui/ui.resizable.js"></script>
		<script type="text/javascript" src="../jqueryui/ui/ui.dialog.js"></script>            
		<script type="text/javascript" src="../jqueryui/ui/effects.core.js"></script>
		<script type="text/javascript" src="../js/jquery.opacityrollover.js"></script>			
		<link type="text/css" href="../jqueryui/css/demos.css" rel="stylesheet" />
		<link type="text/css" href="../jqueryui/css/ui.theme.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/basic.css" type="text/css" />
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript">
		$(document).ready(function() {
			$("#upload").click(function() {
				alert('Handler for .submit() called.');
				$('#addAlbumDialog').dialog('open');							
			});
			$("#addAlbumDialog").dialog({
                  bgiframe: true,
                  autoOpen: false,
                  height: 400,
                  width: 400,
                  modal: true,
                  buttons: {
                        'Save': function() {
							var caption=$("#captionAlbum");
							var albumCoverImage=$("#albumCoverImage"); 
							var albumCover=$("#albumCover"); 
							//alert(albumCover.val());
							//$.post("../addAlbumdb.php", {caption:caption.val(),albumCoverImage:albumCoverImage.val()});
							$(this).dialog('close');
							alert("about to post");
							$("#uploadFrm").submit();	
                        },
                        Cancel: function() {
                              $(this).dialog('close');
                        }
                  },
                  close: function() {
                        //allFields.val('').removeClass('ui-state-error');
					  }
				});
			});
			function createNewAlbum(albumSelected)
			{
				if(albumSelected == 1){
					$('#addAlbumDialog').dialog('open');
				}	
			}
		</script>
    </head>
    <body>
		<h1>Opus1 Gallery - Image Upload</h1>
		<form id="uploadFrm" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
			<p>
				<input type="file" name="image" id="image" size="50"/>
				<input type="button" id="upload" value="Upload!"/>
				<input type="submit" name="submit" value="Upload" id="submit" style="display: none"/>
			</p>			
		</form>	
		<div id="addAlbumDialog" title="Add Album" style="display:none">			
				<fieldset>
				<label for="captionAlbum">Caption:</label>
				<input id="captionAlbum" type="text" name="captionAlbum"/> 
				<br />
				<label for="albumCover">Album Cover:</label>
				<input TYPE="checkbox" name="albumCover" id="albumCover">
				<input id="albumCoverImage" type="hidden" name="albumCoverImage" value="default"/> 
				</fieldset>       
		</div>		
    </body>
</html>

Open in new window

0
Comment
Question by:cgray1223
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 22

Expert Comment

by:Mrunal
ID: 33507696
have you tried this:

http://api.jquery.com/unload/
0
 

Author Comment

by:cgray1223
ID: 33507717
The only downside to the unload function is that it gets called when the user hits back or forward button and I can't detect the difference between that action and a form submittal to the page itself.  Thanks for the idea.
0
 

Author Comment

by:cgray1223
ID: 33507889
Thanks for the suggestion mroonal.  It got me a little closer, but I still can't resubmit the form from the dialog window.  

the $('form#uploadFrm').submit(function() gets called when I click my input submit button and launches the dialog window, and then the button function on the dialog calls the .submit function again by executing $("#uploadFrm").submit() but the form doesn't get submitted even though I have a conditional that forces the function to return empty or true (tried both).  If I just leave the .submit function empty it will submit.  So that seems to tell me the dialog's .submit() call isn't working properly or the form is in a weird state.

<?php
      $folder = 'images/';
      $orig_w = 500;
      
      if( isset($_POST['submit']) )
      {
            $imageFile = $_FILES['image']['tmp_name'];
            $filename = basename( $_FILES['image']['name']);
            $info = pathinfo($folder.$filename);
            $fileext = $info['extension'];
            list($width, $height) = getimagesize($imageFile);            
            $src ='';
            if (strtolower($fileext) == 'png') {
                  $src = imagecreatefrompng($imageFile);
            }
            else if(strtolower($fileext) == 'gif'){
                  $src = imagecreatefromgif($imageFile);
            }
            else if(strtolower($fileext) == 'jpg'){
                  $src = imagecreatefromjpeg($imageFile);
            }
            else{
                  echo "File type not supported, .gif, .jpg or .png required!";
            }                  
            $orig_h = ($height/$width)* $orig_w;
            $tmp = imagecreatetruecolor($orig_w, $orig_h);
            imagecopyresampled($tmp, $src, 0,0,0,0,$orig_w,$orig_h,$width,$height);      
            if (strtolower($fileext) == 'png') {
                  imagepng($tmp, $folder.$filename,100);
            }
            else if(strtolower($fileext) == 'gif'){
                  imagegif($tmp, $folder.$filename,100);
            }
            else if(strtolower($fileext) == 'jpg'){
                  imagejpeg($tmp, $folder.$filename,100);
            }
            else{
                  echo "File type not supported, .gif, .jpg or .png required!";
            }
            imagedestroy($tmp);
            imagedestroy($src);
            $filename = urlencode($filename);
            header("Location: crop.php?filename=$filename&height=$orig_h");
      }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
            <title>Opus1 Image Upload</title>
            <link type="text/css" href="../jqueryui/css/ui.all.css" rel="stylesheet" />
            <script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
            <script type="text/javascript" src="../jqueryui/ui/ui.core.js"></script>
            <script type="text/javascript" src="../jqueryui/ui/ui.resizable.js"></script>
            <script type="text/javascript" src="../jqueryui/ui/ui.dialog.js"></script>            
            <script type="text/javascript" src="../jqueryui/ui/effects.core.js"></script>
            <script type="text/javascript" src="../js/jquery.opacityrollover.js"></script>                  
            <link type="text/css" href="../jqueryui/css/demos.css" rel="stylesheet" />
            <link type="text/css" href="../jqueryui/css/ui.theme.css" rel="stylesheet" />
            <link rel="stylesheet" href="../css/basic.css" type="text/css" />
            <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
            <script type="text/javascript">
            $(document).ready(function() {
                  $("#upload").click(function() {
                        alert('Handler for .submit() called.');
                        //$('#addAlbumDialog').dialog('open');                                          
                  });
                  $('form#uploadFrm').submit(function(){
                        alert("form submitted");
                        var temp=$("#captionAlbum");
                        alert(temp.val());
                        if(temp.val() != ''){
                        
                        }else{
                              $('#addAlbumDialog').dialog('open');      
                              return false;
                        }                  
                  });
                  $("#addAlbumDialog").dialog({
                  bgiframe: true,
                  autoOpen: false,
                  height: 400,
                  width: 400,
                  modal: true,
                  buttons: {
                        'Save': function() {
                                          var caption=$("#captionAlbum");
                                          var albumCoverImage=$("#albumCoverImage");
                                          var albumCover=$("#albumCover");
                                          //alert(albumCover.val());
                                          //$.post("../addAlbumdb.php", {caption:caption.val(),albumCoverImage:albumCoverImage.val()});
                                          $(this).dialog('close');
                                          alert("about to post");      
                                          $("#uploadFrm").submit();
                        },
                        Cancel: function() {
                              $(this).dialog('close');
                        }
                  },
                  close: function() {
                        //allFields.val('').removeClass('ui-state-error');
                                }
                        });
                  });
                  function createNewAlbum(albumSelected)
                  {
                        if(albumSelected == 1){
                              $('#addAlbumDialog').dialog('open');
                        }      
                  }
            </script>
    </head>
    <body>
            <h1>Opus1 Gallery - Image Upload</h1>
            <form id="uploadFrm" name="uploadFrm" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data">
                  <p>
                        <input type="file" name="image" id="image" size="50"/>
                        <input type="submit" name="submit" value="Upload" id="submit"/>
                  </p>            
                  <div id="addAlbumDialog" title="Add Album" style="display:none">                  
                        <fieldset>
                        <label for="captionAlbum">Caption:</label>
                        <input id="captionAlbum" type="text" name="captionAlbum"/>
                        <br />
                        <label for="albumCover">Album Cover:</label>
                        <input TYPE="checkbox" name="albumCover" id="albumCover">
                        <input id="albumCoverImage" type="hidden" name="albumCoverImage" value="default"/>
                        </fieldset>      
                  </div>                              
            </form>      
            
    </body>
</html>
0
 
LVL 3

Accepted Solution

by:
SuchetaL earned 500 total points
ID: 33518194
Have you checked the .live event in the jquery? For the you will need to upgrade you jquery to 1.4.1

and then -
   $('form#uploadFrm').live('submit', function(){})

Incase you do not want to use the LIVE function - you will have to re-attach the handler to the event. As when the dialog pop's the events are not attached.


http://api.jquery.com/live/ 

Hope that helps ....

0

Featured Post

More Than Just A Video Library

Train for your certification. Learn the latest DevOps tools. Grow your skillset to do better work.

At Linux Academy, we release new training modules every week so you'll always be up to date on the latest tech.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

717 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question