2017-09-26 1 views
0

J'essaie de cliquer sur le bouton "Modifier" et d'envoyer les données du formulaire à une autre page JSP afin d'exécuter une instruction UPDATE dans la base de données. Pour une raison quelconque, je ne peux pas obtenir le bouton "update" id pour exécuter la fonction click() avec l'appel AJAX car l'alerte "ham" n'apparaît pas. Désolé, j'ai plusieurs commentaires sur les approches à ce sujet dans les balises de script depuis que j'ai essayé plusieurs choses. Quelqu'un pourrait-il m'aider avec ça? La page jsp actuelle se présente comme suit:Comment se fait-il que ma demande de publication AJAX ne fonctionne pas?

<!DOCTYPE html> 

<head> 
    <script src="/.jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://code.jquery.com/jquery=latest.min.js" type="text/javascript"> 
    var getUrlParameter = function getUrlParameter(sParam) { 
     var sPageURL = decodeURIComponent(window.location.search.substring(1)), 
     sURLVariables = sPageURL.split('&'), 
     sParameterName, 
     i; 
     for (i = 0; i < sURLVariables.length; i++) { 
     sParameterName = sURLVariables[i].split('='); 
     if (sParameterName[0] == sParam) { 
      return sParameterName[1] == undefined ? true : sParameterName[1]; 
     } 
     } 
    }; 

    $(document).ready(function() { 
     var key = getUrlParameter("key"); 

    }); 
    $(form).submit(function() { 
      if (-1 == this.action.indexOf('register')) { 
      var jForm = $(this); 
      $.post(this.action, $(this).serialize(), function(data) { 
       if (data.status == 'SUCCESS') { 
        jForm[0].action = data.redirectUrl; 
        jForm.submit(); 
       } 
       return false; 
       } 
      } 
      }); 

     window.onload = function() { 
      document.getElementById("submit").onclick = function() { 
      location.href = "/View.jsp"; 
      } 
     } 

     window.onload = function() { 
      document.getElementById("update").onclick = function() { 
      location.href = "/View.jsp"; 
      } 
     } 
     $(document).ready(function() { 
      $('#update').on('click', function(e) { 
        alert('ham'); 
        $.ajax({ 
        type: "post", 
        url: "change.jsp", 
        data: $("#form").serialize(), 
        success: function(msg) { 
         alert(msg.data); 
        }, 
        error: function(xhr, ajaxOptions, thrownError) { 
         alert(xhr.status); 
         alert(thrownError); 
        } 
        }); 


        $(document).ready(function() { 
        function click() { 
         alert('ham'); 
         $.ajax({ 
         type: "post", 
         url: "change.jsp", 
         data: $("#form").serialize(), 
         success: function(msg) { 
          alert(msg.data); 
         }, 
         error: function(xhr, ajaxOptions, thrownError) { 
          alert(xhr.status); 
          alert(thrownError); 
         } 
         }); 

         window.location.href = "change.jsp"; 
         return false; 
        } 
        }); 



        /*function validateForm(){ 
        var x=document.forms["insert"]["ID"].value; 
        alert(x.len()); 
        if(x==null||x==""){ 
        alert("ID must be filled out"); 
        return false; 
        } 
        }*/ 

    </script> 
</head> 

<body> 
    ... 
    <form id="myForm" action="register" method="post" name="insert"> 
    ID: 
    <input type="text" name="ID" required value="<%=id%>" /> 
    <br/> RHINO: 
    <input type="text" name="rhino" required value="<%=rhino%>" /> 
    <br/> OX: 
    <input type="text" name="ox" required value="<%=ox%>" /> 
    <br/> HORSE: 
    <input type="text" name="horse" required value="<%=horse%>" /> 
    <br/> 

    <input type="submit" value="Submit" id="submit" /> 
    <!--<input type="submit" value="Update" id="change"/>--> 
    <button id="update" onclick="return click()">Change</button> 
    </form> 
    ... 
</body> 

</html> 
+1

c'est un peu le bordel. Fonctions multiples docment.ready et window onload, parfois imbriquées les unes dans les autres par l'apparence de celui-ci. Et certaines choses qui devraient être dans un document.ready ne sont pas (par exemple un gestionnaire de soumission). Aussi du code qui semble être à peu près un duplicata d'autres bits. Presque certainement vous donner des questions de portée comme la réponse ci-dessous suggère. Vous pouvez consolider tout cela en un document. Prêt, pour commencer, supprimer la duplication, puis réessayer. On dirait que vous ajoutez juste document.ready etc. quand vous en avez envie sans vraiment comprendre ce que vous faites? – ADyson

+0

@ sundance91: Veuillez ne pas vandaliser les questions et invalider les réponses existantes. Si vous avez une nouvelle question, postez-la comme nouvelle question. Notez également que la question à laquelle vous avez modifié cette question était essentiellement impossible à résoudre dans le format de Stack Overflow. Il était beaucoup trop large et serait répondu par l'un des innombrables tutoriels disponibles sur Internet. – David

Répondre

3

vous définissez la fonction dans un domaine fermé:

$(document).ready(function() { 
    function click() { 
     //... 
    } 
}); 

Il existe seulement dans ce function anonyme utilisé comme gestionnaire ready. Une fois cette fonction terminée, tout ce qui est défini dans cette portée n'est plus utilisé si rien ne la référence.

Ensuite, vous essayez d'appeler la fonction de portée mondiale:

<button id="update" onclick="return click()">Change</button> 

Ainsi, la fonction ne peut pas être trouvé.

Au lieu d'essayer de l'invoquer à partir du code en ligne dans le code HTML, utilisez la bibliothèque jQuery que vous utilisez déjà et attacher le gestionnaire à l'événement click:

$(document).ready(function() { 
    $('#update').click(function() { 
     // the code in your click() function goes here 
    } 
}); 

Et supprimer ce gestionnaire en ligne:

<button id="update">Change</button> 

(Note: Il peut très bien être autres problèmes dans ce code, il est en fait assez difficile à suivre sans indentation du tout, mais à tout le moins ce problème semble le plus immédiat après avoir cliqué sur.. ce bouton. Il doit être capable de trouver la fonction pour l'exécuter.)

Mise à jour: Un autre utilisateur a formaté le code dans votre question, et il semble y avoir d'autres problèmes. Plus précisément, vous effectuez plusieurs tentatives simultanées pour attacher des comportements très différents au clic de ce bouton. Un de ces événements semble même être une redirection, qui annulerait simplement toutes les autres opérations car la page est en train de recharger. Simplifiez votre code Effectuez exactement et seulement l'opération que vous voulez sur ce bouton.

+0

Où est l'ajax dans votre réponse? – Shubham

+0

@Shubham: Il n'y en a pas. Parce que ce n'était pas le problème dans la question originale. La question a apparemment été vandalisée plus tôt aujourd'hui, invalidant toutes les réponses précédentes. Je l'ai réparé. – David

+0

Oups, je viens de donner une réponse en fonction de ce que j'ai vu plus tôt – Shubham