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

Eléphant du PHP | 193 Messages

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.

ViPHP
ViPHP | 1967 Messages

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');
It is nice to be important but it is more important to be nice
http://www.aureuswebfactory.fr

Eléphant du PHP | 193 Messages

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.

Eléphant du PHP | 131 Messages

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>
Cordialement
Naroth

Eléphant du PHP | 193 Messages

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.