crop with jcrop

<!-- Modal edit profile -->

<div class="modal fade profile" id="profile" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header btn-primary">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Profile Edit</h4>
      </div>

      <form id="frm-change-profile" enctype="multipart/form-data" action="<?=base_url('home/change_profile_manager');?>" method="POST" >
      <div class="modal-body">
          <div class="form-group">
            <label for="name-manager" class="control-label">Name Manager:</label>
              <input type="text" name="contact_person" id="contact_person" value="<?=$contact_person;?>" class="form-control">

            <label for="nama-perusahaan" class="control-label">Company:</label>
              <input type="text" name="nama_perusahaan" id="nama_perusahaan" value="<?=$nama_perusahaan;?>" class="form-control" readonly>

            <label for="email" class="control-label">E-mail:</label>
              <input type="text" name="email_perusahaan" id="email" value="<?=$email_perusahaan;?>" class="form-control" readonly>
          </div>
         <!--  <div class="form-group">
            <label for="change-img" class="control-label">Change Fhoto Profile</label>
            <div align="center" id="image_preview">
                  <a href="#"><img id="previewing" class="gambar_pic" src="<?=$profile_manager;?>" title="Click me"></a>
                  <div id="message"></div>
            </div>
          </div>-->
          <div class="form-group" id="selectImage">
            <input type="hidden" name="id_perusahaan" value="<?=$id_perusahaan;?>">
            <input type="hidden" name="dir" value="<?php echo "../infrasset/company/photo/$username_company/profil_pic";?>">
            <input type="file" name="file" id="file" class="form-control" style="display:none">
          </div>
      </form>
          <!-- Testing crop image -->
          <div class="form-group">
            <label for="change-img" class="control-label">Change Fhoto Profile</label>
            <img src="<?=asset_url('img/avatar3.png');?>" id="crop_img">   <!-- <<<<< CONTOH GAMBAR YANG AKAN DI CROP -->
            <!-- <input value="../agentsea_assets/img/avatar3.png" name="location" size="40"> -->
            <!-- <div id="preview-pane">
              <div class="preview-container">
                <img src="<?//=asset_url('img/avatar3.png');?>" class="jcrop-preview" alt="preview">

              </div>
            </div>
            <div id="form-container">
              <form id="croping" name="copimg" method="post" action="<?//=base_url('home/cropping_img');?>" target="_blank">
                <input type="hidden" id="x" name="x">
                <input type="hidden" id="y" name="y">
                <input type="hidden" id="w" name="w">
                <input type="hidden" id="h" name="h">
                <input type="submit" id="submit" value="Crop Image!">
              </form>
            </div> -->
          </div>



          <div class="form-group" id="tes"></div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary" >Change Profile</button>
      </div>
    <!-- </form> -->
    </div>
  </div>
</div>
<script src="<?=asset_url('js/jquery.form.js');?>"></script>
<script type="text/javascript">
//show modal edit profil
  $('#profile').on('show.bs.modal', function (event) {
    var button    = $(event.relatedTarget) // Button that triggered the modal
    var id_perusahaan     = button.data('id_perusahaan')
      // ajax is here
    var modal = $(this)
    modal.find('.modal-body #id_perusahaan').val(id_perusahaan)

  });

jQuery(function($) {
    $('#crop_img').Jcrop({
      // onChange: showCoords
      onSelect: showCoords,
      // setSelect : [100, 100, 50, 50]
      bgColor : 'black',
      bgOpacity : .4,
      asperctRation : 30 /15

    });
});

 function showCoords(c)
  {
    // alert("hello");
      // variables can be accessed here as
      // c.x, c.y, c.x2, c.y2, c.w, c.h
  };
// //click image
//   $(".gambar_pic").click(function(){
//     $("#file").click();
//   });

//   //Previewing image
//   $("#file").change(function() {
//     $("#message").empty(); // To remove the previous error message
//       var file = this.files[0];
//       var imagefile = file.type;
//       var match= ["image/jpeg","image/png","image/jpg"];
//       if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
//       {
//         $('#previewing').attr('src','noimage.png');
//         $("#message").html("<p id='error'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
//         return false;
//       }else{
//         var reader = new FileReader();
//         reader.onload = imageIsLoaded;
//         reader.readAsDataURL(this.files[0]);
//     }
//   });

// function imageIsLoaded(e) {
//   $("#file").css("color","green");
//   $('#image_preview').css("display", "block");
//   $('#previewing').attr('src', e.target.result);
//   // $('#previewing').attr('width', '250px');
//   // $('#previewing').attr('height', '230px');
// };

//jquery form
$(document).ready(function() {
    var options = {
        target        : "#tes",
        beforeSubmit  : showRequest,
        success       : showResponse,

        // other available options:
        //url:       url         // override for form's 'action' attribute
        //type:      type        // 'get' or 'post', override for form's 'method' attribute
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
        //clearForm: true        // clear all form fields after successful submit
        //resetForm: true        // reset the form after successful submit

        // $.ajax options can be used here too, for example:
        //timeout:   3000
    };

    // bind form using 'ajaxForm'
    $('#frm-change-profile').ajaxForm(options);
});

// pre-submit callback
function showRequest(formData, jqForm, options) {

    return true;
}

// post-submit callback
function showResponse(responseText, statusText, xhr, $form)  {
    window.location.reload();
}

</script>