Frage Problem mit mehrfacher ID

[kaiwe]

Hallo zusammen,
ich habe folgendes Problem:
Innerhalb einer bootstrap basierten Website habe ich auf einer Unterseite mehrere Bereiche,
welche mittels einer Tableiste anwählbar sind. Der jeweilige Inhalt eines Bereiches wir mittels
<Code>
$(document).ready(function(){
$("a[href='#showTicketRange']").click(function() {
//alert('it works !!!!');
$('#showTicketRange').load("./components/Ticket/labelShowTicket.php");
});
});
</Code>
aus der Datei labelShowTicket.php geladen, wo mittel eines SELECT Feldes und JQuery
der entsprechende Typ gewählt wird und dann das entsprechende "Formular" geladen wird.

<select id="selectTicketTyp" class = "form-control input-sm">
<option value = "0" selected >bitte wählen</option>
<option value = "3" >Anfrage</option>
<option value = "4" >Schadensmeldung</option>
</select>


<!--show select value-->
$(document).ready(function(){
$('#selectTicketTyp').change(function() {
var newTicketTypID = ($("#selectTicketTyp option:selected").val());
$('#maskTicketTyp').load("./components/Ticket/ticketTyp.php?newTicketTypID=" + newTicketTypID);

});
});

Dies funktioniert alles wunderbar, solange ich den Inhalt nur in einem Reiter lade.
Sobald ich den gleichen Inhalt über mehrere Reiter lade, funktioniert der erste, solange man die anderen
nicht anwählt.

Ganz prinzipiell ist das auch klar: Es darf jede ID nur EINMAL vorkommen !

Meine Frage ist nun, wie man dieses Problem löst, ohne die ID's je Aufruf unterschiedlich zu benennen.

Diese Idee hat nämlich spätestens dann ein Ende, wenn man entsprechende Plugins aus bootstrap
verwendet, wo man die ID's nicht beliebig umbenennen kann.

Das Ziel wäre es, die ID's beim Aufruf neu zu initialisieren ....

Wenn ich die Seite aufrufe, geschieht das ja auch ;-)

Ich will/muss leider die gleichen Strukturen in mehreren Reitern verwenden.

Kann mir da bitte jemand helfen.

Schon mal vielen Dank !

 

[Sentence]

Moin,
document.getElementById gibt nunmal nur ein Element zurück, nicht mehrere!
Multiple ID's mit dem gleichen Namen, ergeben in jedem Brwoser ein anderes Ergebnis, also vergiss das lieber.

$('#showTicketRange').load("./components/Ticket/labelShowTicket.php");

Damit lädst du das ganze doch aus einer PHP Datei, dort musst du die ID dann dynamisch vergeben oder das ganze mit einer CSS Klasse regeln.

<select class = "form-control input-sm selectTicketTyp">

MfG

 

[Sentence]

Achso, an deinen .selectTicketTyp kommst du dann so:

$('.selectTicketTyp').change(function() {
var newTicketTypID = ($(this).val());
alert(newTicketTypID);
});

MfG

 

[kaiwe]

Hallo,
danke für die schnelle Nachricht.
Ich schau mir das gleich an ......

 

[kaiwe]

Hallo Sentence,

vielen Dank für Deine Nachricht.
Dein Vorschlag funktioniert prinzipiell, löst aber nicht mein Problem, weil ich damit ja alle PlugIns, welche ich auf mehreren Tabs verwende, komplett umschreiben müßte und damit nicht mehr updatesicher wäre.

Ich habe das jetzt wie folgt gelöst:

<!--show select value-->
$(document).ready(function(){
    $("a[href='#showTicketRange2']").click(function() {
        //alert('it works !!!!');
        $('#showTicketRange1,#showTicketRange2,#showTicketAll,#createTicket').empty();
        $('#showTicketRange1').load("./components/Ticket/labelShowTicket.php");
       
    });
});

Trotzdem natürlich vielen Dank !

 

[Aaron3219]

Also das ist eigentlich nicht relativ einfach:
$("a[id^=showTicketRang]")...
Da kannst du auch überall die gleiche ID verwenden und musst nicht zwingend eine 1 und 2 dahinter machen.

oder falls sie die gleiche HTML-Struktur haben:

<div class="main-container">
   <div>
      <div>
         Hier eigentlich die ID. Kann aber wegelassen werden.
      </div>
   </div>

   <div>
      <div>
         Hier eigentlich die ID. Kann aber wegelassen werden.
      </div>
   </div>

   <div>
      <div>
         Hier eigentlich die ID. Kann aber wegelassen werden.
      </div>
   </div>
</div>

Dann einfach:
$(".main-container > div > div")...

Also CSS Selektoren benutzen ;)