[RESOLU] jquery alert box boostrapt ne s'affiche que pour un clique

28 nov. 2016, 12:51

Bonjour à tous, pourriez vous m'aider?

J'ai lors des cliques sur les boutons de tableau (suppression , modification) un message d'alerte qui dit si la modification ou suppression c'est bien déroulé.
j'ai pour cela une div vide

Code : Tout sélectionner

$( "#error" )
								   .html( " <div class='alert alert-success message col-md-12' style='font-weight:bold;'><a href='#' class='close' data-dismiss='alert'>&times;</a>"+code_html+"</div>" );
									 $("#error").delay(2000).hide("slow");

Problème cela ne fonctionne qu'une seul fois après le chargement de la page.

29 nov. 2016, 00:33

As tu 'trigger" l’événement click ?
du style :

Code : Tout sélectionner

$(document).on(
    click : function () {
       //fais quelque chose
}
,'#error');

29 nov. 2016, 10:32

Merci de ton aide, oui il est triggé

Code : Tout sélectionner

// function closeInput(elm) {
    // var td = elm.parentNode;
    // var value = elm.value;
    // td.removeChild(elm);
    // td.innerHTML = value;
// }

// function addInput(elm) {alert("ok");
    // if (elm.getElementsByTagName('input').length > 0) return;

    // var value = elm.innerHTML;
    // elm.innerHTML = '';

    // var input = document.createElement('input');
    // input.setAttribute('type', 'text');
    // input.setAttribute('value', value);
    // input.setAttribute('onBlur', 'closeInput(this)');
	// input.style.textAlign = 'center';
    // elm.appendChild(input);
    // input.focus();
// }




 $(document).ready(function(){ 
		// On a besoin d'une portée gloable pour utiliser la variable après plusieurs appelles de fonctions
		var service_old;
			// on utilise on car pour les lignes généré dynamiquement par javascript on a besoin de rattacher un nouvel event (permet la suppression)
        $("#tableau_inventaire").on( "click", 'a.remove-row-table' ,function() {
			var id =  this.id;
			var tr = $(this).closest('tr');
			tr.remove();
			 $.ajax({
				   url : 'Controller/remove-row-table.php',
				   type : 'POST', // Le type de la requête HTTP, ici devenu POST
				   data : 'id=' + id , // On fait passer nos variables, exactement comme en GET, au script more_com.php
				   dataType : 'html',
				   success : function(code_html, statut){ // code_html contient le HTML renvoyé
						$("#error").replaceWith("<div id='error'  class='alert alert-danger message col-md-12' style='font-weight:bold;'><a href='#' class='close' data-dismiss='alert'>&times;</a>La ligne a bien était supprimée</div>") ;
						$("#error").delay(3000).hide("slow");	 	 
					}
			});
			return false;
        });
		
		
		// Permet d'enregistrer les modifications d'une ligne du tableau
		  $("#tableau_inventaire").on( "click", 'a.editbtn' ,function() {					  
			  // on garde la valeur du service avant modification pour le supprimer de la liste de recherche
              var currentTD = $(this).parents('tr').find('td');
              if ($(this).html() == 'Mod') {
				  var id = $('td:first', $(this).parents('tr')).text();
				  service_old = $("#service"+id).html();
                  currentTD = $(this).parents('tr').find('td');
				 
                  $.each(currentTD, function () {
					  
                      $(this).prop('contenteditable', true);
					  
					  // on ajoute un champ date sur la colonne livraison
					  if($(this).hasClass( "date_livraison" ))
					  {
						 
						$(this).html('<input type="date" id="datelivraison'+id+'" value="'+ toDate($(this).text()) +'"></input>');
					  }
					  // on ajoute un champ date sur la colonne de fin de garantie
					  if($(this).hasClass( "date_garantie" ))
					  {
						 
						$(this).html('<input type="date" id="dategarantie'+id+'" value="'+ toDate($(this).text()) +'"></input>');
					  }
                  });
				  
              } else {
                 $.each(currentTD, function () {
                      $(this).prop('contenteditable', false);
                  });
              }
			  
			   if($(this).html() =='Save')
			  {
					var id = $('td:first', $(this).parents('tr')).text();
				    var hostname =  $("#hostname"+id).html();
					var nom =  $("#nom"+id).html();
					var prenom =  $("#prenom"+id).html();
					var login =  $("#login"+id).html();
					var service =  $("#service"+id).html();
					var localisation =  $("#localisation"+id).html();
					var costcenter =  $("#costcenter"+id).html();
					var statut =  $("#statut"+id).html();
					var type =  $("#type"+id).html();
					var marque =  $("#marque"+id).html();
					var modele =  $("#modele"+id).html();
					var num_serie =  $("#num_serie"+id).html();
					var num_sbe =  $("#num_sbe"+id).html();
					var type_disque =  $("#type_disque"+id).html();
					var date_livraison = $("#datelivraison"+id).val();
					var fin_garantie = $("#dategarantie"+id).val();
					if(date_livraison  == '' || fin_garantie == '')
					{
						location.reload();
						alert("Veuillez entrer une date valide");
						return
					}
					var imei = $("#imei"+id).html();
					$('#date_livraison'+id).replaceWith('<td contenteditable="false" class="date_livraison" id="date_livraison'+id+'">'+toDate(date_livraison)+'</td>');
					$('#fin_garantie'+id).replaceWith('<td contenteditable="false" class="date_garantie" id="fin_garantie'+id+'">'+toDate(fin_garantie)+'</td>');
					
					
					 $.ajax({
						   url : 'Controller/mod_tab.php',
						   type : 'POST', // Le type de la requête HTTP, ici devenu POST
						   data : 'id=' + id + '&hostname=' + hostname + '&prenom=' + prenom + '&nom=' + nom + '&login=' + login + '&service=' + service + '&localisation=' + localisation
									+ '&costcenter=' + costcenter + '&statut=' + statut + '&type=' + type + '&marque=' + marque + '&modele=' + modele + '&num_serie=' + num_serie + '&num_sbe=' + num_sbe + '&type_disque=' + type_disque  // On fait passer nos variables, exactement comme en GET, au script more_com.php
									+ '&date_livraison=' + date_livraison  + '&fin_garantie=' + fin_garantie + '&imei=' + imei,
						   dataType : 'html',
						   success : function(code_html, statut){ // code_html contient le HTML renvoyé
									// mise à jour liste de recherche par service si la valeur a changé
									if(service_old != service)
									{
										$("#search_service option[value='"+service_old+"']").remove();
										$("#search_service").append('<option value="'+service+'">'+service+'</option>');
										
									}
									// ne fonctionne qu'une fois
									$("#error").replaceWith("<div id='error'  class='alert alert-success message col-md-12' style='font-weight:bold;'><a href='#' class='close' data-dismiss='alert'>&times;</a>La ligne a bien était modifiée</div>") ;
									$("#error").delay(3000).hide("slow");
									 
									
					   }
					});
			  }
			  
              $(this).html($(this).html() == 'Mod' ? 'Save' : 'Mod')
			  
			 
    
          });
		  

		  // Permet la copie d'une ligne du tableau ( celui-ci fonctionne)
		  $("#tableau_inventaire").on( "click", 'a.copybtn' ,function() {

					var id = $('td:first', $(this).parents('tr')).text();
				    var hostname =  $("#hostname"+id).html();
					var nom =  $("#nom"+id).html();
					var prenom =  $("#prenom"+id).html();
					var login =  $("#login"+id).html();
					var service =  $("#service"+id).html();
					var localisation =  $("#localisation"+id).html();
					var costcenter =  $("#costcenter"+id).html();
					var statut =  $("#statut"+id).html();
					var type =  $("#type"+id).html();
					var marque =  $("#marque"+id).html();
					var modele =  $("#modele"+id).html();
					var num_serie =  $("#num_serie"+id).html();
					var num_sbe =  $("#num_sbe"+id).html();
					var type_disque =  $("#type_disque"+id).html();
					var date_livraison = $("#date_livraison"+id).html();
					var fin_garantie = $("#fin_garantie"+id).html();
					var imei = $("#imei"+id).html();
					
					
					// on utilise le même script que pour ajouter une ligne d'inventaire mais avec les paramètrs de la lgine à copier
					$.ajax({
							 url : 'Controller/add.php',
							type : 'POST', // Le type de la requête HTTP, ici devenu POST
							data : 'add_row_tab=' + true + '&hostname=' + hostname + '&prenom=' + prenom + '&nom=' + nom + '&login=' + login + '&service=' + service + '&localisation=' + localisation
									+ '&costcenter=' + costcenter + '&statut=' + statut + '&type=' + type + '&marque=' + marque + '&modele=' + modele + '&num_serie=' + num_serie + '&num_sbe=' + num_sbe + '&type_disque=' + type_disque +
									'&date_livraison=' +  date_livraison + '&fin_garantie='+ fin_garantie + '&imei=' + imei,
							dataType : 'html'

					});
					
					$("#error").replaceWith("<div id='error'  class='alert alert-success message col-md-12' style='font-weight:bold;'><a href='#' class='close' data-dismiss='alert'>&times;</a>La ligne a bien était copiée</div>") ;
					$("#error").delay(3000).hide("slow");
					$.ajax({
							 url : 'Controller/tableau_copie_ligne.php',
							type : 'POST', // Le type de la requête HTTP, ici devenu POST
							dataType : 'html',
							success: function(result){
								// ajout de la ligne au début du tableau
								$('table > tbody > tr:first').before(result);
								
							}
							  
			 
    
					});
			});
			// conversion de la date pour pouvoir être utilisable dans l'input type date
			function toDate(dateStr) {
				
				var parts = dateStr.split("-");
				return parts[2]+"-"+parts[1]+"-"+parts[0];
			}
			
});

Par contre celui pour la copie fonctionne et s'affiche autant de fois que je clique sur le bouton. Autre chose si j'active l'event click edit j'ai bien le message de modification mais le message suppression ne fonctionnera pas et inversement.

29 nov. 2016, 13:39

Bonjour,

Ton problème vient de l'élément que tu caches.

Voici comment ce déroule ton code :

1. Initialement

<script>
$("#error").html( " <div class='alert alert-success message col-md-12' style='font-weight:bold;'><a href='#' class='close' data-dismiss='alert'>&times;</a>"+code_html+"</div>" );
$("#error").delay(2000).hide("slow");
</script>

<div id="error"></div>

2. Ajout de l'alerte

<script>
$("#error").html( "<div class='alert alert-success message col-md-12' style='font-weight:bold;'><a href='#' class='close' data-dismiss='alert'>&times;</a>"+code_html+"</div>" ); //On fait cette ligne
$("#error").delay(2000).hide("slow");
</script>

<div id="error">
<div class='alert alert-success message col-md-12' style='font-weight:bold;'><a href='#' class='close' data-dismiss='alert'>&times;</a>ducodehtmlrandom</div>
</div>

3. Attente plus cache l'alert

<script>
$("#error").html( "<div class='alert alert-success message col-md-12' style='font-weight:bold;'><a href='#' class='close' data-dismiss='alert'>&times;</a>"+code_html+"</div>" ); 
$("#error").delay(2000).hide("slow");
</script>

<div id="error" style="display:none;"> <!-- la div parente est cachée -->
<div class='alert alert-success message col-md-12' style='font-weight:bold;'><a href='#' class='close' data-dismiss='alert'>&times;</a>ducodehtmlrandom</div>
</div>

4. Deuxième passage

<script>
$("#error").html( "<div class='alert alert-success message col-md-12' style='font-weight:bold;'><a href='#' class='close' data-dismiss='alert'>&times;</a>"+code_html+"</div>" ); //On fait cette ligne
$("#error").delay(2000).hide("slow");//On fait cette ligne
</script>

<div id="error" style="display:none;">  <!-- la div parente est cachée -->
<div class='alert alert-success message col-md-12' style='font-weight:bold;'><a href='#' class='close' data-dismiss='alert'>&times;</a>unautrecodehtmlrandom</div>
</div>

Voila comment ton code marche le soucis c'est que tu cache la div parente et pas l'alert elle même je te conseille donc de remplacer

<script>
$("#error").delay(2000).hide("slow");
</script>

par

<script>
setTimeout(function() {
    $("#error").empty();
 }, 2000);
</script>

30 nov. 2016, 13:34

Merci de ton aide,

j'ai trouvé plus simple

Code : Tout sélectionner

$("#error").replaceWith("<div id='error'  class='alert alert-success message col-md-12' style='font-weight:bold;'><a href='#' class='close' data-dismiss='alert'>&times;</a>La ligne a bien était modifiée</div>") ;
									$("#error").delay(3000).hide("slow");

je remplace le contenu de la div sa marche nikel.

[RESOLU] jquery alert box boostrapt ne s'affiche que pour un clique

Qui est en ligne