I'm using croppie plug-in but does not work when content is overwritten using ajax/php (result show with innerHtml). What I should doing? Please help me!
read more about croppie: https://foliotek.github.io/Croppie/
Content of data.php : Compilation of php and html code
<?php
if(isset($_POST['id']) && $_POST['id'] == 1){
?>
<div id="upload-demo" style="width:350px"></div>
<strong>Select Image:</strong>
<br/>
<input type="file" id="upload">
<?php
}
?>
My Codes:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://demo.itsolutionstuff.com/plugin/croppie.js"></script>
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/croppie.css">
</head>
<body>
<div id="div1"></div>
<button>Get External Content</button>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type: 'get',
url: 'php/data.php',
data: {
id: '1'
},
success: function(response) {
document.getElementById("div1").innerHTML = response;
}
});
});
});
$uploadCrop = $('#upload-demo').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$('#upload').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
</script>
</body>
</html>
Your problem will be solved with the following code:
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type: 'get',
url: 'php/data.php',
data: {
id: '1'
},
success: function(response) {
document.getElementById("div1").innerHTML = response;
}
});
});
});
var $uploadCrop;
$uploadCrop = $('#upload-demo').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'circle'
},
boundary: {
width: 300,
height: 300
}
});
$(document).on('change', '#upload', function () {
var reader = new FileReader();
reader.onload = function (e) {
$uploadCrop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
</script>
Related
I'm trying to crop the image before uploading and I'm using Croppie.js plugin but I don't know I'm getting "Uncaught TypeError: $(...).croppie is not a function" this error in console.
I tried to use this plugin at the end of the file just before the body and also tried in the head and between the html but I'm getting the same error. I don't know why this is happening.
Here's my code.
<script src="jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/croppie/croppie.css" />
<script type="text/javascript">
$(document).ready(function(){
$image_crop = $('#upload-image').croppie({
enableExif: true,
viewport: {
width: 200,
height: 200,
type: 'square'
},
boundary: {
width: 300,
height: 300
}
});
$('#userPhoto').on('change', function () {
var reader = new FileReader();
reader.onload = function (e) {
$image_crop.croppie('bind', {
url: e.target.result
}).then(function(){
console.log('jQuery bind complete');
});
}
reader.readAsDataURL(this.files[0]);
});
$('#crop').on('click', function (ev) {
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (response) {
$.ajax({
url: "upload.php",
type: "POST",
data: {"image":response},
success: function (data) {
html = '<img src="' + response + '" />';
$("#upload-image-i").html(html);
}
});
});
});
});
</script>
I've tried all the code in a single file and it's working fine there.
I faced the same problem. Check the CDN.
You have to use two links (croppie.css and croppie.min.js) to the page where you are trying to upload the image.
CDN
https://cdnjs.com/libraries/croppie
Can someone please help me with this?
I'm not that versed at JavaScript and I've read the documentation over and over plus reviewed as many posts here as well as googled the problem. I'm not able to get my cropped result and send it to my web server. Here's my code.
HTML:
<form action="" method="post" enctype="multipart/form-data" id="formTest">
<div id="modal">
<div id="main-cropper"></div>
<a class="button actionUpload">
<span>Upload</span>
<input type="file" id="upload" value="Choose Image"
accept="image/*" name="imgf">
</a>
<button class="actionDone">Done</button>
<button class="actionCancel">Cancel</button>
</div>
</form>
JS:
<script>
var basic = $('#main-cropper').croppie({
viewport: { width: 300, height: 400, type: 'square' },
boundary: { width: 700, height: 500 },
showZoomer: true
});
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#main-cropper').croppie('bind', {
url: e.target.result
});
$('.actionDone').toggle();
$('.actionUpload').toggle();
}
reader.readAsDataURL(input.files[0]);
}
}
$('.actionUpload input').on('change', function () { readFile(this); });
$('.actionDone').on('click', function(){
$('#main-cropper').croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function (resp) {
$('#formTest').find('name=["imgf"]').val('src', resp);
});
$('.actionDone').toggle();
$('.actionUpload').toggle();
});
</script>
I did some additional research and found a solution through using AJAX. I tried it and it works. Need to do some clean up on the CSS but that's nothing major. Here is some of the modified code:
partial JavaScript:
$('.crop_image').click(function(event){
image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:"upload.php",
type: "POST",
data:{"image": response},
success:function(data)
{
$('#uploadimageModal').modal('hide');
$('#uploaded_image').html(data);
}
});
})
});
AJAX:
if(isset($_POST["image"]))
{
$data = $_POST["image"];
$image_array_1 = explode(";", $data);
$image_array_2 = explode(",", $image_array_1[1]);
$data = base64_decode($image_array_2[1]);
$imageName = time() . '.png';
file_put_contents("pg/$imageName", $data);
echo '<img src="'.$imageName.'" class="img-thumbnail" />';
}
https://www.webslesson.info/2018/03/image-crop-and-upload-using-jquery-with-php-ajax.html
Okay, what I have here is a Ajax delete record. I've tried to add jquery dialog-confirm instead of using javascript confirm. The delete function works but the problem is the animation of deleting row was not working.
Here's what I have right now. http://jsfiddle.net/altaire/YJC44/
Any help will appreciate. Thanks!
Php
while($row = $result->fetch_assoc()){
echo'<tr class="records">';
echo'<td>'.$i++.'</td>
<td align="center"><img src="images/del.png" border="0" width="10" height="10" title="Delete"></td>
<tr>;
Jquery/Ajax
$(".delbuttons").click(function () {
//e.preventDefault();
var element = $(this);
var del_id = element.attr("name");
var info = 'prdelete=' + del_id;
$("#dialog").dialog({
buttons: {
"Confirm": function () {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {}
});
$(this).parents(".records").animate({
backgroundColor: "#fbc7c7"
}, "fast")
.animate({
opacity: "hide"
}, "slow", function () {
setTimeout(function () {
window.location.reload();
}, 1000);
});
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
You have to add a js as "//code.jquery.com/ui/1.11.0/jquery-ui.js". see below demo.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$( "#effect" ).animate({backgroundColor: "#aa0000",color: "#fff",width: 500},5000);
});
</script>
</head>
<body>
<div id="effect"style="border:1px solid red;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
Try this
$('a[name="'+del_id+'"]').parents(".records")...
instead of $(this).parents(".records")...
You are trying to animate the $("#dialog") if you use $(this).
DEMO : http://jsfiddle.net/yeyene/YJC44/1/
$(".delbuttons").click(function () {
//e.preventDefault();
var element = $(this);
var del_id = element.attr("name");
//alert(del_id);
var info = 'prdelete=' + del_id;
$("#dialog").dialog({
buttons: {
"Confirm": function () {
$.ajax({
type: "GET",
url: "delete.php",
data: info,
success: function () {
// $(this).parents(".records")
$('a[name="'+del_id+'"]').parents(".records")
.css({'background': '#fbc7c7'})
.animate({
opacity: 0
}, 1000, function () {
setTimeout(function () {
window.location.reload();
}, 1000);
});
$(this).dialog("close");
}
});
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
<script type="text/javascript">
$(function () {
$("#citynm1").autocomplete("http://www.mywebsite.com/getcity.php", {
width: 160,
autoFill: false,
selectFirst: false
});
});
</script>
This script is working when site URL start with WWW but if WWW is not available this script is not working. So what can I do?
<script type="text/javascript">
$(function () {
var url="http://www.mywebsite.com/getcity.php"
urlExists(url,function(exist){
if(!exist){
url="http://mywebsite.com/getcity.php"
}
urlExists(url,function(exist2){
if(exist2){
$("#citynm1").autocomplete(url,{
width: 160,
autoFill: false,
selectFirst: false
})
}
});
});
});
</script>
Known that :
function urlExists(url, callback){
$.ajax({
type: 'HEAD',
url: url,
success: function(){
callback(true);
},
error: function() {
callback(false);
}
});
}
I open an html page using jquery dialog.
var url = "Popup.htm";
$('<div id=DialogDiv>').dialog({
dialogClass: 'DynamicDialogStyle',
modal: true,
open: function () {
$(this).load(url);
},
close: function (e) {
$(this).empty();
$(this).dialog('destroy');
},
height: 350,
width: 540,
title: 'Lookup'
});
The above code opens Popup.htm in a modal dialog.The Popup.htm has got a button but the click event is not firing.Please help.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>
<title>PopUpView</title>
<script type="text/javascript">
$(function () {
$("#btnSearch").click(function () {
$.ajax({
type: "POST",
contentType: "application/json",
url: "http://localhost:3340/Service1.svc/FetchAllCompany",
dataType: "json",
success: function (data) {
alert('ok');
var div = $("#test").empty();
$(data.d).each(function (index, item) {
div.append(
$("<tr>").append($("<td>").html(item.COMP_CODE))
.append($("<td>").html(item.COMP_NAME))
.append($("<td>").html(item.COMP_FRZ_FLAG)));
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
});
})
</script>
<body>
<div id="MainContentDiv">
<label>Search</label>
<input />
<button id="btnSearch">...</button>
<div>
<table id="test">
</table>
</div>
</div>
The click event for btnSearch is not firing