Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Eder Cuer

Problema ao enviar formulários dinâmicos com ajax

Recommended Posts

Eae galera, estou aqui com problemas default_biggrin.pngdefault_biggrin.pngdefault_biggrin.pngdefault_biggrin.png

Estou fazendo um cadastro de slide para site com modal e ajax mas não está funcionando corretamente, quando atualizo o primeiro slide ele funciona perfeitamente mas a partir do segundo não, ele fecha o modal (o que não deveria ser feito). Também estou com problemas para excluir e cadastrar um novo slide.

Fiz vários testes e nada funcionou, tentei colocar em arquivos diferentes tanto js quanto php, tentei nomear os formulários e etc. Sinceramente não sei o que fazer e onde está o problema.

Seguem os códigos.

page_home.php:

 

div class="graph-box">
	<?php
	$sql 	= "SELECT id_admin_slide, titulo_slide, decricao_slide, nome_slide FROM admin_slide";
	$res 	= mysqli_query($link,$sql);
	$linha 	= mysqli_fetch_assoc($res);
	$dados	= mysqli_num_rows($res);
	$i 		= 1;
	if($dados > ){
		do{
			echo '
			<div class="col-md-4 graph-3">
				<h4>'.$linha['titulo_slide'].'</h4>
				<div class="gallery-img">	
					<img class="img-responsive" src="../dummy/'.$linha['nome_slide'].'">
				</div>
				<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalEditar'.$i.'">Editar</button>
				<button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#modalExcluir'.$i.'">Excluir</button>
			</div>
			<div class="modal fade" id="modalEditar'.$i.'" role="dialog" data-backdrop="static">
				<div class="modal-dialog container2">
					<!-- Modal content-->
					<form id="editar" method="post" action="" enctype="multipart/form-data">
						<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">Atualizar '.$linha['titulo_slide'].'</h4>
							</div>
							<div class="modal-body">
								<div class="form-group">
							       	<label for="imagemSlideA">Adicionar Slide</label>
							       	<input name="imagemSlideA" type="file" id="imagemSlideA">
							       	<p class="help-block">Extensões permitidas: .jpeg e .png</p>
							       	<p class="help-block">Tamanho máximo: 1MB</p>
							       	<p class="help-block">É preferível que a imagem tenha boa resolução</p>
							    </div>
								<div class="form-group">
									<label for="tituloSlideA">Título</label>
									<input name="tituloSlideA" type="text" class="form-control" id="tituloSlideA" value="'.$linha['titulo_slide'].'">
								</div>
								<div class="form-group">
									<label for="descrSlideA">Descrição</label>
									<input name="descrSlideA" type="text" class="form-control" id="descrSlideA" value="'.$linha['decricao_slide'].'">
								</div>
								<input name="idSlideA" type="hidden" class="form-control" id="idSlide" value="'.$linha['id_admin_slide'].'">
								<input name="atz'.$i.'" type="hidden" class="form-control" id="atz'.$i.'" value="atz'.$i.'">
							</div>
							<div class="modal-footer">
								<div id="retorno"></div>
								<button name="atz'.$i.'" type="sumit" class="btn btn-success">Salvar</button>
								<button id="atz" type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>   
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="modal fade" id="modalExcluir'.$i.'" role="dialog" data-backdrop="static">
				<div class="modal-dialog container2">
					<!-- Modal content-->
					<form id="excluir" action="" method="post">
						<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">'.$linha['titulo_slide'].'</h4>
							</div>
							<div class="modal-body">
								<div class="form-group">
									<label>Tem certeza que deseja excluir ?</label>
								</div>
							</div>
							<div class="modal-footer">
								<div id="retorno"></div>
								<input name="idSlide" type="hidden" class="form-control" id="idSlide" value="'.$linha['id_admin_slide'].'">
								<input name="exc'.$i.'" type="hidden" class="form-control" id="exc'.$i.'" value="exc'.$i.'">
								<button name="exc'.$i.'" type="submit" class="btn btn-danger">Sim</button>
								<button type="button" class="btn btn-default" data-dismiss="modal">Não</button>
							</div>
						</div>
					</form>
				</div>
			</div>
			';
			$i++;
		}while($linha = mysqli_fetch_assoc($res));
	}		
	?>
											            
	<div class="clearfix"> </div>
</div>
<!---->
<div class="modal fade" id="modalCad" role="dialog" data-backdrop="static">
	<div class="modal-dialog container2">
		<!-- Modal content-->
		<form id="novoSlide" action="" method="post" enctype="multipart/form-data">
			<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">Novo Slide</h4>
				</div>
				<div class="modal-body">
			  		<div class="form-group">
			        	<label for="imagemSlide">Adicionar Slide</label>
			        	<input name="imagemSlide" type="file" id="imagemSlide">
			        	<p class="help-block">Extensões permitidas: .jpeg e .png</p>
			        	<p class="help-block">Tamanho máximo: 1MB</p>
			        	<p class="help-block">É preferível que a imagem tenha boa resolução</p>
			      	</div>
			  		<div class="form-group">
			    		<label for="tituloSlide">Título</label>
			    		<input name="tituloSlide" type="text" class="form-control" id="tituloSlide" placeholder="Digite o título do Slide">
			  		</div>
			  		<div class="form-group">
			    		<label for="descrSlide">Descrição</label>
			    		<input name="descrSlide" type="text" class="form-control" id="descrSlide" placeholder="Digite uma descrição para o Slide">
			  		</div>
			  	</div>
				<div class="modal-footer">
					<div id="retorno"></div>
					<input type="hidden" name="adcSlide" value="adcSlide">
					<button name="adcSlide" type="submit" class="btn btn-success">Adicionar</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
				</div>
			</div>
		</form>
	</div>
</div>

 

 

 

processa.php:

 

 

<?php
include '../login/include/connect.php';
include "include/secure.php";
include "include/informações.php";
ini_set('default_charset','UTF-8');
mysqli_set_charset($link,'utf8');

if(isset($_POST['adcSlide'])){

	$sqlRestr	 = "SELECT titulo_slide, decricao_slide, nome_slide FROM admin_slide";
	$queryRestr  = mysqli_query($link,$sqlRestr);
	$linhasAfet	 = mysqli_num_rows($queryRestr);

	$tiposPermit = array('image/jpeg', 'image/pjpeg', 'image/png');
	$tamanho	 = (1024 * 500) * 2;
	$tituloSlide = $_POST['tituloSlide'];
	$descrSlide  = $_POST['descrSlide'];
	$arqName	 = $_FILES['imagemSlide']['name'];
	$arqType	 = $_FILES['imagemSlide']['type'];
	$arqSize	 = $_FILES['imagemSlide']['size'];
	$arqTemp	 = $_FILES['imagemSlide']['tmp_name'];
	$arqError	 = $_FILES['imagemSlide']['error'];

	if($linhasAfet >= 3){
		echo 'Só é possível cadastrar 3 slides!';
	}else if($arqError == ){
		if(!in_array($arqType, $tiposPermit)){
			echo 'O tipo de arquivo enviado é inválido!';
		}else if($tamanho < $arqSize){
			echo 'O arquivo ultrapassa o tamanho permitido!';
		}else{
			$pasta  = '../dummy/';
			$ext 	= explode('.', $arqName);
			$ext    = strtolower(end($ext));
			$nome 	= md5(time()).'.'.$ext;
			$upload = move_uploaded_file($arqTemp, $pasta . $nome);

			if($upload == true){
				$sqlSlide 	= "INSERT INTO `oficina`.`admin_slide` (`id_admin_slide`, `titulo_slide`, `decricao_slide`, `nome_slide`) VALUES (NULL, '$tituloSlide', '$descrSlide', '$nome');";
				$slideQuery = mysqli_query($link,$sqlSlide);

				if($slideQuery == false){
					echo 'Erro ao cadastrar slide';
				}else{
					echo 'Slide cadastrado com sucesso!';
				}
			}
		}
	}
}else if(isset($_POST['exc1']) || isset($_POST['exc2']) || isset($_POST['exc3'])){
	$idSlide  = $_POST['idSlide'];

	$sqlExc   = "DELETE FROM admin_slide where id_admin_slide =".$idSlide;
	$queryExc = mysqli_query($link,$sqlExc);

	$linhasAfet	 = mysqli_num_rows($queryExc);

	if($linhasAfet <= ){
		echo 'Erro ao excluir slide';
	}else{
		echo 'Slide excluido com sucesso!';
	}

}else if(isset($_POST['atz1']) || isset($_POST['atz2']) || isset($_POST['atz3'])){
	$tiposPermit = array('image/jpeg', 'image/pjpeg', 'image/png');
	$tamanho	 = (1024 * 500) * 2;
	$idSlide  	 = $_POST['idSlideA'];
	$tituloC     = $_POST['tituloSlideA'];
	$descrC   	 = $_POST['descrSlideA'];

	$arqName  = isset($_FILES['imagemSlideA']['name']);
	$arqType  = isset($_FILES['imagemSlideA']['type']);
	$arqSize  = isset($_FILES['imagemSlideA']['size']);
	$arqTemp  = isset($_FILES['imagemSlideA']['tmp_name']);
	$arqError = isset($_FILES['imagemSlideA']['error']);

	if(empty($arqName)){
		$sqlExc   = "UPDATE admin_slide SET titulo_slide = '".$tituloC."', decricao_slide = '".$descrC."' WHERE id_admin_slide = ".$idSlide.";";
		$queryExc = mysqli_query($link,$sqlExc);

		if($sqlExc == false){
			echo 'Erro ao cadastrar slide';
		}else{
			echo 'Slide atualizado com sucesso!';
		}
	}
	else if($arqError == ){
		if(!in_array($arqType, $tiposPermit)){
			echo 'O tipo de arquivo enviado é inválido!';
		}else if($tamanho < $arqSize){
			echo 'O arquivo ultrapassa o tamanho permitido!';
		}else{
			$pasta  = '../dummy/';
			$ext 	= explode('.', $arqName);
			$ext    = strtolower(end($ext));
			$nome 	= md5(time()).'.'.$ext;
			$upload = move_uploaded_file($arqTemp, $pasta . $nome);

			if($upload == true){
							
				$sqlExc   = "UPDATE admin_slide SET titulo_slide = '".$tituloC."', decricao_slide = '".$descrC."', nome_slide = '".$nome."' WHERE id_admin_slide = ".$idSlide.";";
				$queryExc = mysqli_query($link,$sqlExc);

				if($sqlExc == false){
					echo 'Erro ao cadastrar slide';
				}else{
					echo 'Slide atualizado com sucesso!';
				}
			}
		}
	}
				
}
	
?> 

 

 

 

envia.js:

 

 

$("novoSlide").submit(function(e){
  $.ajax({
    url: "processa.php",
    type: "POST",
    data: new FormData(this),
    success: function(data){
      $("#retorno").html(data);  
    }
    processData: false,
    contentType: false
  } );
  e.preventDefault();
});

$("#editar").submit(function(){
  	var valorEdit = $(this).serialize();
 
   	$.ajax({
     	type:"POST",
     	url: "processa.php",
     	data: valorEdit,
     	success: function(data){
       		$("#retorno").html(data);  
     	}
   	});
  	return false;  
});

$("#excluir").submit(function(){
  	var valorExc = $(this).serialize();
 
   	$.ajax({
     	type:"POST",
     	url: "processa.php",
     	data: valorExc,
     	success: function(data){
       		$("#retorno").html(data);  

     	}
   	});
  	return false;  
}); 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Galera consegui resolver, existiam alguns problemas no meu código, então vamos lá...

  1. Eu estava utilizando os mesmos ID's para os formulários;
  2. Eu estava utilizando os mesmos ID's para as DIV's de retorno;

Solução:

No arquivo page_home.php, onde eu montava os formulários dinâmicos utilizei meu controlador ($i) para dar nome(ID) ao formulário, fiz o mesmo procedimento com as DIV's de retorno porém dei nomes diferentes para cada ação, por exemplo: divExc1, divExc2, divExc3, divEdt1, divEdt2.

No arquivo envia.js eu criei as funções com os nomes dos formulários: $("#excluir1"), $("#excluir2"), $("#excluir3")... Com isso tudo está funcionando perfeitamente. Como no meu caso o usuário só poderá cadastrar 3 slides então fiz dessa maneira, tenho certeza que tem outro jeito, uma maneira mais inteligente (se alguém souber não deixe de comentar default_smile.png) mas por enquanto vai assim mesmo.

E aproveitando vai um bônus ai, eu estava com problemas para enviar as imagens (input type=file) com o ajax então encontrei essa maneira:

$("#novoSlide").submit(function(e){

    var formData = new FormData($(this)[0]);

    $.ajax({
      url: "processa.php",
      type: "POST",
      data: formData,
      success: function(data){
        $("#retorno").html(data);  
      },
      processData: false,
      contentType: false
    } );
    return false;
});

Abraço!

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por violin101
      Caros amigos, saudações.
       
      Por favor, me permita tirar uma dúvida com os amigos.

      Tenho um Formulário onde o Usuário digita todos os Dados necessários.

      Minha dúvida:
      --> como faço após o usuário digitar os dados e salvar, o Sistema chamar uma Modal ou mensagem perguntando se deseja imprimir agora ?

      Grato,
       
      Cesar
    • Por Carcleo
      Tenho uma abela de usuarios e uma tabela de administradores e clientes.
      Gostaria de uma ajuda para implementar um cadastro
       
      users -> name, login, passord (pronta) admins -> user_id, registratiom, etc.. client -> user_id, registratiom, etc...
      Queria ajuda para extender de user as classes Admin e Client
      Olhem como estáAdmin
      <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Admin extends User {     use HasFactory;            protected $fillable = [         'name',         'email',         'password',         'registration'     ];      private string $registration;     public function create(         string $name,          string $email,          string $password,         string $registration     )     {         //parent::create(['name'=>$name, 'email'=>$email, 'password'=>$password]);         parent::$name = $name;         parent::$email = $email;         parent::$password = $password;         $this->registration = $registration;     } } User
      <?php namespace App\Models; // use Illuminate\Contracts\Auth\MustVerifyEmail; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable; use Illuminate\Database\Eloquent\Relations\BelongsToMany; class User extends Authenticatable {     /** @use HasFactory<\Database\Factories\UserFactory> */     use HasFactory, Notifiable;     static string $name;     static string $email;     static string $password;     /**      * The attributes that are mass assignable.      *      * @var list<string>      */     protected $fillable = [         'name',         'email',         'password',     ];          /**      * The attributes that should be hidden for serialization.      *      * @var list<string>      */     protected $hidden = [         'remember_token',     ];     /**      * Get the attributes that should be cast.      *      * @return array<string, string>      */     protected function casts(): array     {         return [             'email_verified_at' => 'datetime',             'password' => 'hashed',         ];     }          public function roles() : BelongsToMany {         return $this->belongsToMany(Role::class);     }       public function hasHole(Array $roleName): bool     {                 foreach ($this->roles as $role) {             if ($role->name === $roleName) {                 return true;             }         }         return false;     }         public function hasHoles(Array $rolesName): bool     {                 foreach ($this->roles as $role) {             foreach ($rolesName as $rolee) {             if ($role->name === $rolee) {                 return true;             }          }         }         return false;     }         public function hasAbility(string $ability): bool     {         foreach ($this->roles as $role) {             if ($role->abilities->contains('name', $ability)) {                 return true;             }         }         return false;     }     } Como gravar um Admin na tabela admins sendo que ele é um User por extensão?
      Tentei assim mas é claro que está errado...
      public function store(Request $request, Admin $adminModel) {         $dados = $request->validate([             "name" => "required",             "email" => "required|email",             "password" => "required",             "registration" => "required"         ]);         $dados["password"] =  Hash::make($dados["password"]);                  $admin = Admin::where("registration",  $dados["registration"])->first();                  if ($admin)              return                    redirect()->route("admin.new")                             ->withErrors([                                 'fail' => 'Administrador já cadastrados<br>, favor verificar!'                   ]);                            $newAdmin = $adminModel->create(                                    $dados['name'],                                    $dados['email'],                                    $dados['password'],                                    $dados['registration']                                 );         dd($newAdmin);         $adminModel->save();         //$adminModel::create($admin);                  return redirect()->route("admin.new")->with("success",'Cadastrado com sucesso');     }  
    • Por violin101
      Caros amigos, saudações.
       
      Gostaria de tirar uma dúvida com os amigos, referente a PDV.
       
      Estou escrevendo um Sistema com Ponto de Vendas, a minha dúvida é o seguinte, referente ao procedimento mais correto.

      Conforme o caixa vai efetuando a venda, o Sistema de PDV já realiza:
      a baixa direto dos produtos no estoque
      ou
      somente após concretizar a venda o sistema baixa os produtos do estoque ?
       
      Grato,
       
      Cesar
       
    • Por violin101
      Caros amigos do grupo, saudações e um feliz 2025.
       
      Estou com uma pequena dúvida referente a Teclas de Atalho.

      Quando o Caps Lock está ativado o Comando da Tecla de Atalho não funciona.
      ou seja:
      se estiver para letra minúscula ====> funciona
      se estiver para letra maiúscula ====> não funciona
       
      Como consigo evitar essa falha, tanto para Letra Maiúscula quanto Minúscula ?

      o Código está assim:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'r' ) return;// Não é Ctrl+r, portanto interrompemos o script evt.preventDefault(); });  
      Grato,
       
      Cesar
    • Por violin101
      Caros amigos, saudações.
       
      Por favor, poderiam me ajudar.

      Estou com a seguinte dúvida:
      --> como faço para para implementar o input código do produto, para quando o usuário digitar o ID o sistema espera de 1s a 2s, sem ter que pressionar a tecla ENTER.

      exemplo:
      código   ----   descrição
           1       -----   produto_A
       
      Grato,
       
      Cesar
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.