title: Image cropping area selection not working with popup in jQuery and PHP
body: <p>I am working with jQuery UI dialog and the imgAreaSelect jQuery plugin. When I combine them, I face a problem with image selection. Other things are working but the only issue is with the image selection. This is a link to the <a href="http://jqueryui.com/dialog/#modal-form" rel="nofollow noreferrer">popup</a> I am using; this is a cropping <a href="http://www.techumber.com/2012/09/live-image-crop-script-with-php-jquery.html" rel="nofollow noreferrer">demo</a>. The image below is the output.
  <img src="https://i.stack.imgur.com/JVtwk.jpg" alt="enter image description here">.</p>
  
  <p>I'm doing the uploading and cropping process in the dialog. My code is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" /&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/jquery.imgareaselect.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/process.js"&gt;&lt;/script&gt;
      &lt;?php
        if(isset($_POST['submit'])){
          //error variable init
          $err="";
          $path = "uploads/";
          //allowed image format will be used for filter
          $allowed_formats = array("jpg", "png", "gif", "bmp");
          $imgname = $_FILES['img']['name'];
          $tmpname = $_FILES['img']['tmp_name'];
          $size = $_FILES['img']['size'];
          if($imgname){
            list($name, $ext) = explode(".", $imgname);
            if(in_array($ext,$allowed_formats) &amp;&amp; $size&lt;(1024*1024)) {
              if($ext=="jpg" || $ext=="jpeg") {
                $src = imagecreatefromjpeg($tmpname);
              } else if($ext=="png") {
                $src = imagecreatefrompng($uploadedfile);
              } else {
                $src = imagecreatefromgif($uploadedfile);
              }
              list($width,$height)=getimagesize($tmpname);
              if($width &gt; 400){
                $newwidth=399;
                $newheight=($height/$width)*$newwidth;
                $tmp=imagecreatetruecolor($newwidth, $newheight);
                imagecopyresampled($tmp, $src, 0, 0, 0, 0, $newwidth, $newheight, $width,$height);
                $image = $path.$imgname;
                imagejpeg($tmp,$path.$imgname,100);
                move_uploaded_file($image,$path.$imgname);
              ?&gt;
                &lt;script type="text/javascript"&gt;
                  $(document).ready(function(){
                    $("#dialog-form").dialog({modal: true});
                  });
                &lt;/script&gt;
              &lt;?php
              } else {
                //moving uploaded image to uploads dir
                if(move_uploaded_file($tmpname,$path.$imgname)) {
                  //uploaded image
                  $image="uploads/".$imgname;
                } else {
                  $err="&lt;strong&gt;Oh snap!&lt;/strong&gt;failed";
                }
              }
            } else {
              $err="&lt;strong&gt;Oh snap!&lt;/strong&gt;Invalid file formats..!";
            }
          } else {
            $err="&lt;strong&gt;Oh snap!&lt;/strong&gt;Please select image..!";
          }
        }
      ?&gt;
      &lt;style type="text/css"&gt;
        .container {
          width: 940px;
          margin: 0 auto;
        }
        .logo{
          text-align: center;
        }
        .mini-layout {
          border: 1px solid #DDD;
          -webkit-border-radius: 6px;
          -moz-border-radius: 6px;
          border-radius: 6px;
          -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);
          -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
          box-shadow: 0 1px 2px rgba(0,0,0,.075);
          margin-bottom: 20px;
          padding: 9px;
          width: 900px;
          margin: 0 auto;
        }
        .span4,.span5{
          width: 49%;
          float: left;
        }
        .span4{
          border-right: 1px solid #ddd;
        }
        .span5{
          width: 45%;
          padding:0 1em;
        }
        .span7{
          clear: both;
          border: 1px solid #ddd;
          margin: 0 auto;
          width: 320px;
          padding: 5px;
          border-radius: 5px;
        }
        #imgc{
          margin: 0 0.3em;
          border:5px solid #eee;
          max-width: 400px;
        }
        div.frame {
          background: #fff;
          padding: 5px;
          border: solid 2px #ddd;
        }
        input[type="file"],button{
          padding: 5px 20px;
          background: #333;
          color: #fff;
          border: 0;
          border-radius: 4px;
          cursor: pointer;
        }
        h1{
          color: #0089ca;
        }
      &lt;/style&gt;
      &lt;style&gt;
        body { font-size: 62.5%; }
        label, input { display:block; }
        input.text { margin-bottom:12px; width:95%; padding: .4em; }
        fieldset { padding:0; border:0; margin-top:25px; }
        h1 { font-size: 1.2em; margin: .6em 0; }
        div#users-contain { width: 350px; margin: 20px 0; }
        div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
        div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
        .ui-dialog .ui-state-error { padding: .3em; }
        .validateTips { border: 1px solid transparent; padding: 0.3em; }
      &lt;/style&gt;
      &lt;script&gt;
        $(function() {
          $("#dialog-form").dialog({
            autoOpen: false,
            height: 500,
            width: 650,
            modal: true,
            buttons: {
              Cancel: function() {
                $(this).dialog("close");
              }
            },
            close: function() {
              allFields.val("").removeClass("ui-state-error");
            }
          });
          $("#create-user" )
            .button()
            .click(function() {
              $("#dialog-form").dialog("open");
            });
          });
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="dialog-form"&gt;
        &lt;fieldset&gt;
          &lt;div class="container"&gt;
            &lt;div class="mini-layout"&gt;
              &lt;div class="span4"&gt;
                &lt;?php 
                //if image uploaded this section will shown
                  if(isset($image)) {
                    echo "&lt;h1&gt;Select an area on image&lt;/h1&gt;&lt;img style='' src='".@$image."' id=\"imgc\" style='width:100%' &gt;";
                  }
                ?&gt;
              &lt;/div&gt;
              &lt;div class="span5"&gt;
                &lt;?php
                //if image uploaded this section will be shown
                  if(@$image) {
                    echo '&lt;div&gt;';
                    echo '&lt;h1&gt;Preview&lt;/h1&gt;';
                    echo '&lt;div class="frame"  width: 100%; height: 100px;"&gt;';
                    echo '&lt;div id="preview" style="width: 100%; height: 100px; overflow: hidden;"&gt;';
                    echo '&lt;img src="'.@$image.'" style="width: 100px; height: 100px;"&gt;';
                    echo '&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
                    echo "&lt;div id='thumb'&gt;&lt;/div&gt;";
                    echo "&lt;img src='' id='cropedimg' /&gt;";
                    echo '&lt;button id="cropbtn"&gt;Crop&lt;/button&gt;';
                  }
                ?&gt;
              &lt;/div&gt;
              &lt;div class="span7"&gt;
                &lt;?php
                  //if any error while uploading
                  if(@$err) {
                    echo '&lt;div class="alert alert-error"&gt;'.@$err.'&lt;/div&gt;';
                  }
                ?&gt;
                &lt;form id="imgcrop" method="post" enctype="multipart/form-data" action=""&gt;
                  Upload image: &lt;input type="file" name="img" id="img" /&gt;
                  &lt;input type="hidden" name="imgName" id="imgName" value="&lt;?php echo($imgname) ?&gt;" /&gt;
                  &lt;button name="submit"&gt;Submit&lt;/button&gt;
                &lt;/form&gt;
              &lt;/div&gt;
              &lt;div style="clear:both"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/fieldset&gt;
      &lt;/div&gt;
      &lt;button id="create-user"&gt;Create new user&lt;/button&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>