title: jcrop not working for cropping of the image
body: <p>i am using the jcrop for croping the image. when i directly give the image name in src in image tag its working fine. But when i change the src using keyup function from an input its not working.  Here is my code</p>
  <pre><code>&lt;html&gt;    
  &lt;body&gt;
  &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;form-group col-lg-2&quot;&gt;
                  &lt;div class=&quot;input-group&quot;&gt;
                      &lt;div class=&quot;input-group-addon&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-search&quot;&gt;&lt;/span&gt;&lt;/div&gt;
                      &lt;input type=&quot;text&quot; name=&quot;ftag&quot; id=&quot;ftag&quot; class=&quot;form-control&quot; 
                        placeholder=&quot;Ex: TS0059&quot; /&gt;                       
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-group col-lg-2&quot;&gt;
                  &lt;div class=&quot;input-group&quot;&gt;
                      &lt;div class=&quot;input-group-addon&quot;&gt;&lt;span class=&quot;glyphicon glyphicon-user&quot;&gt;&lt;/span&gt;&lt;/div&gt;
                      &lt;input type=&quot;text&quot; name=&quot;rollno&quot; id=&quot;rollno&quot; class=&quot;form-control&quot; placeholder=&quot;Roll Number&quot; /&gt;                      
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
  &lt;/div&gt;
  &lt;img src=&quot;#&quot; id=&quot;cropbox&quot; class=&quot;img&quot; /&gt;&lt;br /&gt;
  &lt;div id=&quot;btn&quot;&gt;
      &lt;input type='button' id=&quot;crop&quot; value='CROP'&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;img src=&quot;#&quot; id=&quot;cropped_img&quot; style=&quot;display: none;&quot;&gt;
  &lt;/div&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  $(document).ready(function(){
      var size;       
      
      $('#cropbox').Jcrop({           
        //aspectRatio: 1,
           onSelect: function(c){
            size = {x:c.x,y:c.y,w:c.w,h:c.h};
            $(&quot;#crop&quot;).css(&quot;visibility&quot;, &quot;visible&quot;);          
          }
      }); 
      
   
      $(&quot;#crop&quot;).click(function(){
          var img = $(&quot;#cropbox&quot;).attr('src');
          $(&quot;#cropped_img&quot;).show();
          $(&quot;#cropped_img&quot;).attr('src','image-crop.php?x='+size.x+'&amp;y='+size.y+'&amp;w='+size.w+'&amp;h='+size.h+'&amp;img='+img);
      });
      
      $('#ftag').keyup(function(){
          
          var ftag=$('#ftag').val();
          //alert(ftag);
          $.ajax({
              type:'POST',
              url:'test1.php',
              data:'ftag_id='+ftag+'&amp;opt_id=1',               
              success:function(data)
              {                    
                  $('#info').html(data);
              }
          }); 
      });
  
      $('#rollno').keyup(function(){          
          var ftag=$('#ftag').val();
          var rno=$(this).val();          
          $.ajax({
               type:'POST',
               url:'test1.php',
               data:'ftag_id='+ftag+'&amp;rno_id='+rno+'&amp;opt_id=2',               
               success:function(data)
               {                  
                   $('#cropbox').attr('src',data);
               }
           }); 
       });
   });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Here in the above code the image is displaying  but the corp is not working on the image. when i change the rollnumber the image should be displayed. It is working properly but the crop is not working. if i static the image then the crop is working.</p>