2016-07-24 16 views
1

Ich habe ein paar ähnliche Fragen gesehen, aber alles, was ich bisher versucht habe, ist gescheitert und ich hoffe, jemand kann klarer machen, was Noob-Fehler ich hier habe. Die Sache ist, ich habe eine ziemlich große automatisch generierte Anzahl von Tabellen und jetzt brauche ich eine einfache JQuery, um die versteckte uniqe ID jeder Zeile zu erhalten und sie als Eingabe für ein Ajax-Skript zu verwenden. Und hier ist frustriert bin, weil ich bin nicht einmal in der Lage, dass dumme Zahl zu erhalten ... Nun, im Moment enthält die Zeile die ID und eine Schaltfläche es wie folgt zu erhalten:Rückgabewert eines mit einem Knopf

<div class="pull-right"> 
    <input type="hidden" class="thisSeriesID" th:value="${appointment.seriesID}"> 
    <button class="btn btn-default entryChecker"><span class="glyphicon glyphicon-refresh"></span></button> 
</div> 

Jetzt ist ich derzeit mit dieser JQuery, um die ID zu erhalten und zu testen, ob es funktioniert oder nicht. Es ist nur die jüngste von vielen Versuchen, aber ebenso nutzlos:

<script type="text/javascript"> 
     $(function(){ 
      $(".entryChecker").click(function(){ 
      var x = $(this).prev().val(); 
      document.getElementById("demo").innerHTML = x.toString(); 
      }); 
     } 
     ); 
</script> 

Mein Ziel ist natürlich, dass wenn ich eine der Tasten drücken, ich die entsprechende ID in dieser Zeile erhalten:

<p id="demo"></p> 

Aber Sie, Leute, die schlauer sind als ich, haben vielleicht geahnt: Nichts passiert. Kann mir jemand einen Hinweis geben, wo ich versagt habe?

Antwort

1
<html> 
<head> 
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script> 


    $(document).ready(function() { 
     $(".entryChecker").click(function(){ 
      var myvalue = $(this).prev('.thisSeriesID').val(); 
      console.log(myvalue); 
      document.getElementById("demo").innerHTML = myvalue; 
      }); 
       }); 


    </script> 
</head> 
<body> 
    <div class="pull-right"> 
    <input type="hidden" class="thisSeriesID" value="5" /> 
    <button class="btn btn-default entryChecker"> Check<span class="glyphicon glyphicon-refresh"></span></button> 
</div> 
    <div id="demo"> </div> 
</body> 
</html> 
+0

Vielen Dank für die schnelle Antwort. Obwohl es einer meiner vorherigen Versuche war und jetzt, wo ich es erneut getestet habe, funktioniert es immer noch nicht. –

+0

bitte entfernen th: vor Ihrem Wert auf hiden Feld –

+0

Und hier dachte ich th: Wert ist eine gültige Thymeleleaf-Anweisung Ich muss meine Java-Klasse, die die Tabelleninformationen enthält lesen. Die Sache ist, wenn ich es lösche, ändert sich wieder nichts. Es funktioniert immer noch nicht. Ich frage mich, ob es ein Fehler sein könnte, weil die ID eine ganze Zahl ist ... –

0

Erste `th: Wert ist kein Attribut, verwenden Sie Wert statt es.

können Sie Daten- * Eigenschaft verwenden, die eindeutige ID

<div class="pull-right"> 
    <button class="btn btn-default entryChecker" data-uniqueid ="${appointment.seriesID}"><span class="glyphicon glyphicon-refresh"></span></button> 
</div> 


<script type="text/javascript"> 
     $(function(){ 
      $(".entryChecker").click(function(){ 
      var x = $(this).data('uniqueid'); 
      $("#demo").html(x); 
      }); 
     }); 
</script> 
+0

Ich benutze thymeleaf, also denke ich, ich brauche th: Wert, um meine Daten zu bekommen. Nun, ich werde deine Version versuchen, aber ich bezweifle irgendwie, dass der Knopf weiß, was ein Termin ist, wenn ich ihn so benutze .. –

+0

data-* attr enthält die uniqueid, wenn du darauf klickst, bekommst du es. demo - https://jsbin.com/yurayozuxi/edit?html , js, Ausgabe –

+0

Das ist nicht, was ich meine.;) Ich habe keine Zweifel, dass Ihre Version für eine statische Website funktioniert, aber ich bekomme meine Daten aus einer externen Datenbank und versuche, eine Lösung zu finden, die mit Thymeleaf funktioniert. –

0

Wenn Sie th:value als Eingabeattribut verwenden, um zu bekommen, dann müssen Sie attr('th:value') seinen Wert zu erhalten verwenden. Hier ist js:

$(function(){ 
       $(".entryChecker").click(function(){ 
        var hidden= $(this).prev("input[type='hidden']"); 
        var val = hidden.attr('th:value'); 
        $("#demo").html(val); 
       }); 
      }); 
+0

Verdammt, das sieht vielversprechend aus! Aber es funktioniert immer noch nicht ... –

+0

Können Sie das endgültige HTML bereitstellen? – Danis

+0

500 Zeilen Code? Ich denke nicht, dass das notwendig ist. Es ist nur eine Ahnung, aber ... denken Sie, dass es möglich ist, dass der Wert null ist, weil die Daten, die mir von dem Java-Programm gegeben werden, das die Datenbank liest, eine ganze Zahl zurückgibt? –