Trazer os dados no update com ajax/jquery me ajudem pf

JapahReturN · Outubro 3, 2017

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">&times;</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"]));



  }




}

?>

Entrar

Arquivado

Trazer os dados no update com ajax/jquery me ajudem pf

Recommended Posts

JapahReturN 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeigniter - Dúvida referente a PDV

PHP+Codeigniter - Dúvida em Relação a Teclas

Conexão mysql com outro domínio

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante