jcrop not working for cropping of the image

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

<html>    
<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 type="text/javascript">
$(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);
    });
    
    $('#ftag').keyup(function(){
        
        var ftag=$('#ftag').val();
        //alert(ftag);
        $.ajax({
            type:'POST',
            url:'test1.php',
            data:'ftag_id='+ftag+'&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+'&rno_id='+rno+'&opt_id=2',               
             success:function(data)
             {                  
                 $('#cropbox').attr('src',data);
             }
         }); 
     });
 });

</script>
</body>
</html>

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.

jcrop not working for cropping of the image

0 Answers