Warum funktioniert das Formular auf dieser Seite nur einmal?

Ich bin neu bei jQuery Mobile, also vermute ich, dass dieses Problem etwas mit JS jQuery Mobile zu tun hat.

Die Form scheint sich beim ersten Mal wie erwartet zu verhalten. Nachfolgende Einreichungen scheinen nichts zu tun ... und nach jeder Einreichung gibt es auch leicht nervige Animationen.

EDIT: Sie können "Test" für eine Beispielabfrage eingeben.

<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 
     <title>Phone Price Look-up</title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
     <style> 
      /* App custom styles */ 
     </style> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> 
     </script> 
     <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"> 
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="page1"> 
      <div data-theme="a" data-role="header"> 
       <h3> 
        Price Finder 
       </h3> 
      </div> 
      <div data-role="content"> 
       <div id="search-form-container"> 
        <form name="search-form"> 
         <div data-role="fieldcontain"> 
          <fieldset data-role="controlgroup"> 
           <label for="search_term"> 
            Enter Model Number: 
           </label> 
           <input id="search_term" placeholder="" value="" type="text" /> 
          </fieldset> 
         </div> 
         <input id="search-form-submit" type="submit" data-theme="b" value="Submit" /> 
        </form> 
       </div> 
      </div> 
      <div data-theme="a" data-role="footer"> 
       <h2> 
        www.thephonerecyclers.com 
       </h2> 
      </div> 
     </div> 
     <script> 
      $(document).ready(function() { 
       $.mobile.ajaxLinksEnabled = false; // don't really know what this does. 
       $('#search-form-submit').click(function() { 
        var searchTerm = $('#search_term').val(); 
        $.ajax({ 
         type: 'POST', 
         url: 'ajax/search.php', 
         data: {search_term: searchTerm}, 
         success: function(response) { 
          response = JSON.parse(response); 
          if (!response.success) { 
           alert('no phone found'); 
          } else { 
           var phoneInfo = JSON.parse(response.response); 
           alert(phoneInfo[0].manufacturer + ' ' + phoneInfo[0].name + ' (' + phoneInfo[0].model_no + ')' + '\n$' + phoneInfo[0].price); 
          } 
         }, 
         error: function() { 
          //handle error 
          alert('error doing ajax, mate'); 
         } 
        }); 
       }); 
      }); 
     </script> 
    </body> 
</html>

Quelle

2012-03-27 eysikal

Geben Sie Ihren Code hier ein. Ich klicke nicht auf Links in Fragen. –

Es hat beim ersten Mal nicht funktioniert. Ich verwende Chrome. –

Was funktioniert nicht? Das Verhalten sieht jedes Mal identisch mit mir aus. Und FireBug zeigt die Anfrage und die Antwort jedes Mal an. – David

Weil viel von JQuery Mobile Hash-Navigation Routing nutzt und dynamisch erstellte Inhalte, normalen Event-Handler kann nicht genug sein. In Ihrem Beispiel posten Sie ein Formular auf einer neuen Hash-Route und bauen die Seite ohne Neuladen neu auf. Die neu erstellten Objekte sind in keinem der zuvor definierten Event-Handler enthalten.

Anstatt die Click-Handler definieren, wie Sie getan haben:

$('#search-form-submit').click(function() {

Sie sollten die jQuery "auf" Funktion nutzen. Weil Sie eine ältere Version von JQuery sind inklusive und nutzen die „Live“ -Funktion, die einen ähnlichen Zweck wie dies dient:

$('#search-form-submit').live("click", function(){

das Ereignis auf diese Weise Durch die Bindung, jeder dynamisch erstellte Inhalte sollten auch vom Handler enthalten sein .

Quelle

2012-03-27 20:10:13 r0m4n

Ich hatte mich gerade gewundert, bevor ich zurückkam, um nach neuen Antworten zu suchen, ob der Hundeführer das zweite Mal nicht anlegte. Du hast meinen Verdacht bestätigt und eine funktionierende Lösung geliefert. Vielen Dank. Ich frage mich nur, ob es besser ist, 'live '(' click ', ...)' zu verwenden oder eine JS-Funktion zu erstellen, die die benötigte AJAX-Funktionalität umschließt und an die Schaltfläche im HTML-Code anhängt: ' ' – eysikal

Ich bevorzuge Handler über Inline-Code, aber soweit ich Best Practice bin nicht sicher. – r0m4n

Ihre Warnung in Ihrer Ajax-Erfolg Funktion hat Syntaxfehler, ich denke, das ist, was es von der Arbeit hält, ist:

Sie haben:

alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +(+ +phoneInfo[0].model_no+ +)+ +'\n$'+ phoneInfo[0].price);

sollte sein:

alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +'('+phoneInfo[0].model_no+')\n$'+ phoneInfo[0].price);

Quelle

2012-03-27 17:58:33 JKirchartz

Hoppla, ich habe gerade diese Klammern hinzugefügt, bevor ich meine Frage gepostet habe. Es ist jetzt behoben, behebt aber nicht das Problem, über das ich geschrieben habe. – eysikal

Korrigieren Sie die Syntaxfehler in dieser Zeile:

alert(phoneInfo[0].manufacturer +' '+ phoneInfo[0].name +(+ +phoneInfo[0].model_no+ +)+ +'\n$'+ phoneInfo[0].price);

z.B .:

alert(phoneInfo[0].manufacturer+' '+phoneInfo[0].name+'('+phoneInfo[0].model_no+')'+'\n$'+phoneInfo[0].price);

Quelle

2012-03-27 17:59:07 ThiefMaster

Whoops, ich habe gerade diese Klammern hinzugefügt, bevor ich meine Frage gepostet habe. Es ist jetzt behoben, behebt aber nicht das Problem, über das ich geschrieben habe. – eysikal

Warum funktioniert das Formular auf dieser Seite nur einmal?

Antwort

Verwandte Themen