jQuery/AJAX-Daten werden nicht hochgeladen

Question

Ich versuche eine sehr einfache Auktionsseite auf einer Website zu erstellen, an der ich gerade arbeite. Ich arbeite irgendwie daran, während ich mitfahre, aber ich bin jetzt ein bisschen festgefahren.

Daten werden in einer MySQL-Tabelle gespeichert, diese Daten haben den Image-Link, die ID und das aktuelle Gebot.

Ich dann die Daten in PHP/HTML, Beispiel hier: $ result = mysqli_query ($ con, "SELECT * Von Auktion WHERE Kategorie = 'Badezimmer' ORDER BY ID DESC");

while($row = mysqli_fetch_array($result)) 
    { 
    echo "<form name='auction' id='auction'><div class='auction-thumb'> 
       <div class='auction-name'>" . $row['Item'] . "</div>"; 
      echo "<img class='auction' src='" . $row['ImagePath'] . "' />"; 
      echo "<div class='auction-bid'>Current Bid: £" . $row['CurrentBid'] . "</div>"; 
      echo "<div class='auction-bid'>Your Name: <input type='text' class='bidder' name='bidname'/></div>"; 
      echo "<div class='auction-bid'>Your Bid: <input type='text' class='auction-text' name='bid'/></div>"; 
      echo "<div class='auction-bid'><button name='submit' id='submit' value='" . $row['ID'] . "' type='submit'>Place Bid!</button></div>"; 
    echo "</div></form>"; 
    } 
echo "</table>"; 

Dieser Code durchzieht die Artikel absolut gut. Zusammen mit einem Textfeld für einen Namen und ein Gebot (ich mache im Moment nichts mit dem Namen).

Meine jQuery sieht dann wie folgt aus:

$(document).ready(function(){ 
     $('#auction').submit(function(){ 
      var id = $('#submit').val(); 
      var bidname = $('input[name=bidname]').val(); 
      var bid = $('input[name=bid]').val(); 


      $.ajax({ 
      type: "POST", 
      url: "auction-handler.php", 
      dataType: "json", 
      data: {bidname: bidname, bid: bid, id: id}, 
      success: function(){ 
      } 
     }); 
     return true; 

     }); 
    }); 

Auch dieses ist sehr einfach und ich bin nicht besorgt über die Validierung nur noch.

Und schließlich ist hier ein Ausschnitt aus meinem PHP-Code:

$bidname = $_POST['bidname']; 
$bid = $_POST['bid']; 
$id = $_POST['id']; 

$query = "UPDATE auction SET CurrentBid = '$bid' WHERE ID = '$id'"; 

mysqli_query($con, $query) or die(mysqli_error()); 


mysqli_close($con); 

Mein Problem ist, dass, wenn ich einreichen klicken, passiert nichts wirklich. Alle Variablennamen und -werte werden in die Adresszeile des Browsers eingefügt, und die Seite scheint gerade zu aktualisieren.

Die Daten werden nicht veröffentlicht und wenn ich mit Firebug debugge, bekomme ich nur ein rotes Kreuz und es gibt mir keine Fehler.

Ich weiß von meinem Code nur, dass Best Practices nicht befolgt werden, aber ich möchte nur etwas arbeiten und dann später aufräumen.

Wenn mir jemand in die richtige Richtung zeigen könnte, wäre das eine große Hilfe.

Vielen Dank, und wenn Sie weitere Informationen benötigen, lassen Sie es mich wissen.

Answer 1

Zunächst einmal: Sie müssen Ihr form Element neu schreiben, jedes Element sollte eine eindeutige ID haben, um das jeweilige Element zu unterscheiden.

<?php while($row = mysqli_fetch_array($result)){ ?> 
    <form name='auction' id='auction<?php echo $row['ID'] ?>'> 
     <input type='hidden' name='id' value='<?php echo $row['ID'] ?>'> 
     <div class='auction-thumb'> 
      <div class='auction-name'><?php echo $row['Item'] ?></div> 
      <img class='auction' src='<?php echo $row['ImagePath'] ?>' />    
      <div class='auction-bid'>Current Bid: £<?php echo row['CurrentBid'] ?></div> 
      <div class='auction-bid'>Your Name: <input type='text' class='bidder' name='bidname'/></div> 
      <div class='auction-bid'>Your Bid: <input type='text' class='auction-text' name='bid'/></div> 
      <div class='auction-bid'> 
       <input type='submit' name='submit' value='Place Bid!'> 
      </div> 
     </div> 
    </form> 

und Ihre jQuery-Code zu

$(document).ready(function(){ 
    $('form[name="auction"]').submit(function(){ 
     var id = $(this).find('input[name="id"]').val(); 
     var bidname = $(this).find('input[name="bidname"]').val(); 
     var bid = $(this).('input[name="bid"]').val(); 

     $.ajax({ 
      type: "POST", 
      url: "auction-handler.php", 
      dataType: "json", 
      data: {bidname: bidname, bid: bid, id: id}, 
      success: function(){ 
      } 
     }); 
     return false; 
    }); 
}); 

Answer 2

Sie müssen dies ein wenig umschreiben: IDs müssen eindeutig sein, und wenn Sie Ihre Artikel durchlaufen, weisen Sie Elementen in verschiedenen Formularen dieselben IDs zu.

Wenn Sie also versuchen, die Werte in Ihrem Übergabe-Handler abzurufen, weiß jQuery nicht, welcher Wert abgerufen werden soll (wahrscheinlich erhält er den Wert des ersten Elements mit dieser ID).

Sie sollten mit dem Ändern der IDs für beispielsweise Klassen beginnen und dann das übermittelte Formular - zum Beispiel $(this) in Ihrem Submit-Handler - serialisieren (zum Beispiel ...), um die richtigen Daten zu erhalten.

Answer 3

In folgenden Schlüssel in Ajax ersetzen, die Fehler zu verfolgen.

$.ajax({ 
    url: "auction-handler.php", 
    type: "POST", 
    dataType: "json", 
    data: {bidname: bidname, bid: bid, id: id}, 
    crossDomain:true, 
    success: function(result){ console.log(result); } 
    error: function(httpReq,status,exception){ 
     alert("error - " +status+" "+exception); 
    } 
});