jcrop not working to crop the image when dynamically loading

my idea is to crop image. when i type the rollnumber the image will be displayed and ihave to crop the image. The image is displaying but unable to crop the image. I am sending the src to the image using ajax. The ajax code is also given. If i will make the image static jcrop is working. the cropped image is also displyaing in the div.

<html>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <head>
 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <!-- Optional theme -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
 <!-- Latest compiled and minified JavaScript -->
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <link rel="stylesheet" href="jquery.Jcrop.min.css" type="text/css" />
 <script src="jquery.min.js"></script>
 <script src="jquery.Jcrop.min.js"></script>
 </head>
 <body>
<div class="container">
        <div class="row">
            <div class="form-group col-lg-2">
                <div class="input-group">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div>
                    <input type="text" name="ftag" id="ftag" class="form-control" placeholder="Ex: TS0059" />                       
                </div>
            </div>
            <div class="form-group col-lg-2">
                <div class="input-group">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                    <input type="text" name="rollno" id="rollno" class="form-control" placeholder="Roll Number" />                      
                </div>
            </div>
        </div>          
 </div>
 <img src="#" id="cropbox" class="img" /><br />
   <div id="btn">
     <input type='button' id="crop" value='CROP'>
   </div>
<div>
    <img src="#" id="cropped_img" style="display: none;">
</div>
<script>
$(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};
       $("#crop").css("visibility", "visible");             
      }
    }); 
    
 
    $("#crop").click(function(){
        var img = $("#cropbox").attr('src');
        $("#cropped_img").show();
        $("#cropped_img").attr('src','image-crop.php?x='+size.x+'&y='+size.y+'&w='+size.w+'&h='+size.h+'&img='+img);
    });     

    $('#rollno').keyup(function(){
        
        var ftag=$('#ftag').val();
        var rno=$(this).val();
        var sc='photo/'+rno+'.jpg';
        
        $.ajax({
            type:'POST',
            url:'test1.php',
            data:'ftag_id='+ftag+'&rno_id='+rno+'&opt_id=2',                
            success:function(data)
            {
                //alert(data);
                $('#cropbox').attr('src',data);                 
            }
        });         
        
    }); 
    
});  
</script> 
<?php
   include('connect.php');
   $opt=$_POST['opt_id'];
   if($opt==2)
   {
      $ftag=$_POST['ftag_id'];
      $rno=$_POST['rno_id'];
      echo"photo/$rno.jpg";
   }

 ?>

jcrop not working to crop the image when dynamically loading

0 Answers