J'utilise la fonction javascript à l'intérieur de la boucle while. Cette boucle imprime la liste des enregistrements et le bouton d'édition. Lorsque vous cliquez sur le bouton d'édition, il y a une fonction (disons editBtnClicked (id)). Problème: il y est appelé mais la page est actualisée automatiquement.

Que se passe-t-il là-bas que je n'ai pas pu trouver? Quelqu'un y a jeté un œil.

function editBtnClicked(id) {
                console.log("Edit Section");
                $(".showData").css("display", "none");
                $(".showInputField").css("display", "block"); }

<button id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked('<%=id%>');">
0
chikku 18 juil. 2015 à 10:46

3 réponses

Meilleure réponse

Par défaut, les button éléments sont { {X1}}. Si vous ne voulez pas qu'il s'agisse d'un bouton d'envoi, utilisez plutôt type="button":

<button type="button" id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked('<%=id%>');">

Si, pour une raison quelconque, vous souhaitez qu'il continue d'être un bouton d'envoi, mais que vous souhaitez empêcher la soumission: dans votre attribut onclick, passez le event dans votre fonction:

<button id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked(event, '<%=id%>');">

Ce event existera dans le contexte créé pour cet appel, soit en tant que global (Chrome, IE) ou en tant que local (Firefox).

Ensuite, dans votre gestionnaire, utilisez preventDefault:

function editBtnClicked(event, id) {
    $.Event(event).preventDefault(); // Note the jQuery event wrapper
    console.log("Edit Section");
    $(".showData").css("display", "none");
    $(".showInputField").css("display", "block");
}

Cela dit, je changerais probablement cela complètement et utiliserais la délégation d'événement au lieu d'un attribut onclick.

Sur certains conteneurs, tous ces boutons seront dans:

$("selector for the container").on("click", "button.edit", editBtnClicked);

... et lors de leur sortie (notez que j'ai supprimé le id - vous avez dit que c'était une boucle, vous ne pouvez pas avoir le même id plus d'une fois!):

<button type="button" type="button" value="Edit" class="edit btn btn-info" data-id="'<%=id%>'">

Et dans la fonction:

function editBtnClicked() {
    var id = $(this).attr("data-id"); // Get the ID
    console.log("Edit Section");
    $(".showData").css("display", "none");
    $(".showInputField").css("display", "block");
}
1
T.J. Crowder 18 juil. 2015 à 08:08

1- attachez preventDefault () pour cliquer sur l'événement ou retourner false à la fin de la fonction pour empêcher la soumission. Dans le deuxième cas, vous devez écrire onclick = "return editBtnClicked ('<% = id%>')"

2- Ne mettez pas votre fonction dans la boucle. Pensez à utiliser l'ID à l'intérieur de votre fonction afin de ne pas avoir à répéter la fonction à l'intérieur de la boucle.

0
Ali Sheikhpour 18 juil. 2015 à 07:58

Veuillez utiliser PreventDefault pour référence: http://api.jquery.com/event.preventdefault/

  function editBtnClicked(e) {
            e.preventDefault();
            console.log("Edit Section");
            $(".showData").css("display", "none");
            $(".showInputField").css("display", "block"); 
  }

 <button id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked('<%=id%>');">
-1
Daniel 18 juil. 2015 à 07:53