I'm creating an image gallery with JQuery and PHP. All functions (upload, load, load more) work normal except to delete the image.
The event should occur when the class button "button-remove-image-gallery" is pressed, but nothing happens, nor the alerts you put in does not run.
JQeury code:
/*The quick brown fox jumps over the lazy dog*/
$(document).ready(function () {
var b = 0;
var e = 0;
load(6);
$("#img-to-upload").change(function (event) {
var reader = new FileReader();
reader.onload = function (file) {
var url = file.target.result;
$("#preview-img").attr("src", url);
};
reader.readAsDataURL(this.files[0]);
});
function load(v) {
b = b + e;
e = v;
$.ajax({
url: 'sys/php/galeria.php',
type: 'POST',
data: {
'op': 'load',
'b': b,
'e': e
},
success: function (data, textStatus, jqXHR) {
if (data.error.img > 0 || data.error.other != null) {
msgBox('File error: ' + data.error.img);
msgBox('Sever: ' + data.error.other);
} else if (data.error.img == null || data.error.other != null) {
tdata = data[0].id.length - 1;
for (i = 0; i <= tdata; i++) {
newImage(data[0].src[i] + data[0].name[i], data[0].id[i]);
}
} else {
msgBox('Error unknown!');
msgBox('File error: ' + data.error.img);
msgBox('Sever: ' + data.error.other);
}
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
msgBox('Status: ' + jqXHR.status);
msgBox('Text error: ' + textStatus);
msgBox('More: ' + errorThrown);
msgBox('Response: ' + jqXHR.responseText);
}
});
}
function newImage(url, id) {
var li = $('<li></li>').attr('class', 'uploaded-image');
var divdig = $('<div></div>').attr('class', 'the-image-galeria');
var imgig = $('<img/>').attr({
'class': 'image-galeria',
'src': url,
'alt': '',
'title': ''
});
var divsig = $('<div></div>').attr('class', 'src-da-imagem-galeria');
var inputiuig = $('<input/>').attr({
'class': 'input-url-image-galeria',
'type': 'url',
'value': url
});
var btnbrig = $('<button></button>').attr({
'class': 'button-remove-image-galeria',
'type': 'button',
'data-id': id
}).html('x');
var divrig = $('<div></div>').attr('class', 'remove-image-galeria');
divrig.html(btnbrig);
divsig.html(inputiuig);
li.html(divdig.append(imgig, divsig, divrig));
$('#list-uploaded-images').append(li);
}
function msgBox(msg) {
$('.msgbox-error-galeria').css('bottom', '3%');
$('.msgboxs-galeria').append(
$('<p>' + msg + '</p>').attr('title', msg)
);
}
function deleteImage(id, index) {
$.ajax({
url: 'sys/php/galeria.php',
type: 'POST',
data: {
'id': id,
'op': 'delete'
},
success: function (data, textStatus, jqXHR) {
if (data.error.img > 0 || data.error.other != null) {
msgBox('File error: ' + data.error.img);
msgBox('Sever: ' + data.error.other);
} else if (data.error.img == null || data.error.other != null) {
var indexs = $('.uploaded-image');
$(indexs[index]).remove();
} else {
msgBox('Error unknown!');
msgBox('File error: ' + data.error.img);
msgBox('Sever: ' + data.error.other);
}
}, error: function (jqXHR, textStatus, errorThrown) {
msgBox('Status: ' + jqXHR.status);
msgBox('Text error: ' + textStatus);
msgBox('More: ' + errorThrown);
msgBox('Response: ' + jqXHR.responseText);
}
});
}
function uploadImage(form) {
var formData = new FormData(form);
console.debug(formData);
formData.append('op', 'upload');
$.ajax({
url: 'sys/php/galeria.php',
type: 'POST',
data: formData,
cache: false,
dataType: 'json',
processData: false, // Don't process the files
contentType: false, // Set content type to false as jQuery will tell the server its a query string request
success: function (data, textStatus, jqXHR) {
if (data.error.img > 0 || data.error.other != null) {
msgBox('File error: ' + data.error.img);
msgBox('Sever: ' + data.error.other);
} else if (data.error.img == null || data.error.other != null) {
newImage(data.src + data.filename, data.id);
} else {
msgBox('Error unknown!');
msgBox('File error: ' + data.error.img);
msgBox('Sever: ' + data.error.other);
}
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
msgBox('Status: ' + jqXHR.status);
msgBox('Text error: ' + textStatus);
msgBox('More: ' + errorThrown);
msgBox('Response: ' + jqXHR.responseText);
}
});
}
$('.button-remove-image-galeria').click(function () {
alert("remove");
var id = $(this).attr('data-id');
var index = $(this).index();
deleteImage(id, index);
alert('delete executado');
});
$('#buttonmoreimagegaleria').click(function () {
load(6);
//$('.button-remove-image-galeria').html("khfkjfrhje");
});
$('#form-upload-galeria').on("submit", function (e) {
e.preventDefault();
uploadImage(this);
});
$('.style-buttonout-galeria').click(function () {
$('.msgboxs-galeria').html("");
$('.msgbox-error-galeria').css('bottom', '0%');
});
});
HTML:
<div class="space-galeria">
<div class="side-upload-galeria">
<form id="form-upload-galeria" class="form-upload-galeria" enctype="multipart/form-data" method="POST" action="">
<div class="header-form-upload-galeria">
<div class="elements-form-galeria">
<div class="style-input-galeria"><input id="img-to-upload" accept="image/*" required type="file" name="0"></div>
<div class="style-buttonup-galeria"><button id="btnon" type="submit">Upload</button></div>
</div>
<div class="style-prewview-galeria"><img id="preview-img" class="prewviews-img" src="img/site/img_404.gif" alt="Preview da imagem"></div>
</div>
</form>
</div>
<div class="side-uploaded-images">
<lu id="list-uploaded-images" class="list-uploaded-images">
<!-- <li class="uploaded-image">
<div class="the-image-galeria">
<img class="image-galeria" src="https://static.pexels.com/photos/28221/pexels-photo-28221.jpg"alt="" title="">
<div class="remove-image-galeria">
<button class="button-remove-image-galeria" data-id="1" type="button">x</button>
</div>
<div class="src-da-imagem-galeria">
<input class="input-url-image-galeria" type="url" value="https://static.pexels.com/photos/28221/pexels-photo-28221.jpg">
</div>
</div>
</li>-->
</lu>
</div>
<div class="msgbox-error-galeria">
<div class="msgboxs-galeria">
<!--MSG DE ERRO-->
</div>
<div class="btnout-msgbox-galeria">
<button class="style-buttonout-galeria" type="button">X</button>
</div>
</div>
<div class="button-load-more-image-galeria">
<button id="buttonmoreimagegaleria" class="button-more-image-galeria" type="button">CARREGAR +</button>
</div>
</div>