Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Galera estou fazendo um sistema em ajax/jquery... com modal... está enviando normal e update tbm.....
Porém quando aperto em editar gostaria que as inputs viessem com os dados que já estão no banco para ficar mais fácil de editar... como faço isso?
Tentei varias formas mas não consigo acertar o script ajax com o arquivo php... obs: o mesmo modal de enviar é o do update
Index.php<!DOCTYPE html>
<html>
<head>
<title>Ajax</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<link href="CodeSeven-toastr/css/toastr.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br /><br />
<div class="container">
<div align="right">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" id="btn_add" data-toggle="modal">
Add
</button>
</div>
<div class="row">
<div id="select"></div>
</div>
</div>
</body>
</html><!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<form id="form" method="post" enctype="multipart/form-data">
<p><label>Titulo</label>
<input type="text" name="titulo" id="titulo" /></p><br />
<p><label>Subtitulo</label>
<input type="text" name="subtitulo" id="subtitulo" /></p><br />
<p><label>Select Image</label>
<input type="file" name="image" id="image" /> </p><br />
<input type="hidden" name="action" id="action" />
<input type="hidden" name="id" id="data_id" />
</div>
<div class="modal-footer">
<button type="submit" id="enviar" class="btn btn-success"><i class="fa fa-tags"></i>Vai dar certo</button>
</form>
<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
<script src="jQuery/jquery-3.2.1.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="CodeSeven-toastr/js/toastr.js"></script>
<script src="CodeSeven-toastr/custom-alert.js"></script>
<script type="text/javascript">
$(document).ready(function(){
show_data();
function show_data(){
var $select = "select";
$.ajax({
url:"_appadmin/ajax/bannerModel.php",
method:"POST",
data:{action:$select},
success:function(data){
$('#select').html(data);
}
})
}
$('#btn_add').click(function(){
$('#modal').modal('show');
$('.modal-title').text("haaaaaaaaaaaa");
$('#form')[0].reset();
$('#data_id').val('');
$('#action').val('insert');
});
//VALIDAÇÕES PARA LARGURA E ALTURA DA IMAGEM
var _URL = window.URL || window.webkitURL;
$("#image").change(function (e) {
var $ext = $('#image').val().split('.').pop().toLowerCase();
var $size = document.getElementById("image").files[0];
var file, img;
if ((file = this.files[0])){
img = new Image();
img.onload = function () {
if (jQuery.inArray($ext, ['jpg','jpeg','png']) == -1){
$('#image').val('');
toastr["error"]("", "Formato inválido!");
return false;
} else if ($size.size > 10485760){
$('#image').val('');
toastr["error"]("", "Imagem muito grande!");
return false;
} else if (this.width < 1680 || this.height < 690){
$('#image').val('');
toastr["error"]("Está imagem deve conter pelo menos 1680px por 690px..", "");
return false;
}
};
img.src = _URL.createObjectURL(file);
}
});
$('#form').submit(function(event){
event.preventDefault();
var $titulo = $('#titulo').val();
var $subtitulo = $('#subtitulo').val();
var $image = $('#image').val();
//VALIDAÇÕES
if ($image == ''){
toastr["error"]("", "Um banner precisa de imagem.. ");
return false;
} else {
$.ajax({
url:"_appadmin/ajax/bannerModel.php",
method:"POST",
data:new FormData(this),
contentType:false,
processData:false,
success:function(data){
show_data();
toastr["success"](" ", "Adicionado com sucesso!");
$('#form')[0].reset();
$('#modal').modal('hide');
}
});
}
});
$(document).on('click', '.update', function(){
$('#data_id').val($(this).attr("id"));
$('#modal').modal("show");
$('.modal-title').text("EDITAAR");
$('#action').val("update");
});
$(document).on('click', '.delete', function(){
var $id = $(this).attr("id");
var $delet = "delete";
if(confirm("Tem certeza que deseja remover este banner?")){
$.ajax({
url:"_appadmin/ajax/bannerModel.php",
method:"POST",
data:{id:$id, action:$delet},
success:function(data){
show_data();
toastr["success"](" ", "Removido com sucesso!");
}
})
} else {
return false;
}
});
});
</script>
PHP
<?php
include "Connection.class.php";
if(isset($_POST["action"])){
if($_POST["action"] == "select"){
$stmt = $conn->prepare("SELECT * FROM tb_banner ORDER BY id DESC");
$stmt->execute();
while($row = $stmt->fetch()){
print '<div class="col-md-3">
<img src="../uploads/banner/'.$row['_image'].'" class="img-responsive" />
<h4>'.$row["id"].'</h4>
<h2>'.$row["_titulo"].'</h2>
<h3>'.$row["_subtitulo"].'</h3>
<button type="button" name="update" class="btn btn-warning bt-xs update" id="'.$row["id"].'">Editar</button><br>
<button type="button" name="delete" class="btn btn-danger bt-xs delete" id="'.$row["id"].'">Remover</button>
</div>';
}
}
if($_POST["action"] == "insert"){
$titulo = $_POST["titulo"];
$subtitulo = $_POST["subtitulo"];
//PEGA A EXTENSÃO DA IMAGEM
$tmp = explode('.', $_FILES['image']['name']);
$ext = strtolower(end($tmp));
$validas = array('jpeg', 'jpg', 'png');
//RENOMEIA A IMAGEM
date_default_timezone_set('America/Sao_Paulo');
$newName = date("His") . date("dmy") . "." . $ext;
//PASTA DE DESTINO
$destino = "../../../uploads/banner/" . $newName;
//VALIDAÇÕES SERVERSIDE
if($_FILES['image'] == null){
return false;
} else if(!in_array($ext, $validas)){ //se a extensão não for valida
return false;
} else if ($_FILES['image']['size'] > 10485760){ //se for maior que 10mb permitido
return false;
} else {
//MOVE ELA PARA A PASTA DE DESTINO
move_uploaded_file($_FILES['image']['tmp_name'], $destino);
}
$stmt = $conn->prepare('INSERT INTO tb_banner (_titulo, _subtitulo, _image) VALUES (:titulo, :subtitulo, :image)');
$stmt->bindParam(':titulo', $titulo);
$stmt->bindParam(':subtitulo', $subtitulo);
$stmt->bindParam(':image', $newName);
$stmt->execute();
}
if($_POST["action"] == "update"){
$stmt = $conn->prepare("SELECT * FROM tb_banner WHERE id = :id LIMIT 1");
$stmt->execute(array(':id' => $_POST["id"]));
$return = array();
$result = $statement->fetchAll();
foreach($result as $row){
$return["titulo"] = $row["_titulo"];
$return["subtitulo"] = $row["_subtitulo"];
}
echo $return;
}
if($_POST["action"] == "delete"){
$stmt = $conn->prepare("SELECT _image FROM tb_banner WHERE id = :id");
$stmt->execute(array(':id' => $_POST["id"]));
$name = $stmt->fetch();
unlink("../../../uploads/banner/$name[0]");
$stmt = $conn->prepare("DELETE FROM tb_banner WHERE id = :id");
$stmt->execute(array(':id' => $_POST["id"]));
}
}
?>Carregando comentários...