• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Popup nach Auswahl in einer Drop Down generieren

marzocchi1

marzocchi1

Mitglied
Hallo zusammen,

habe folgende Aufgabe bekommen, die mir momentan unlösbar scheint.

Es handelt sich um eine Weboberfläche, wo man einige Parameter eingibt um ein Ticket zu erstellen.
Es gibt dort auch eine Drop Down Felder.

Jetzt soll ich bei einer bestimmten Auswahl im Drop Down Feld ein Pop Up genererieren.
Ist so etwas überhaupt möglich?

Wir nutzen AJAX.

Vielen Dank für eure Antworten.

marzocchi1
 
Hallo hier im Forum,

also ich sag mal so mit jquery kannst ja schauen was das dopdown macht und wenn ein wi draufklickt kannst ja machen was möchtest/kannst zb. was einblenden ein anderen versteckten klick ausführen der ein popup öffnet oder was auch immer.
Das sollte aber eigentlich kein problem sein wenn man ajax schon nutzt was aber eigentlich nichts damit zu tun hat :O)

zb so: http://jsfiddle.net/karim79/BXu26/1/

Cheffchen
 
Danke für die schnelle Antwort.

Das Problem ist das die Drop Downs nicht fest sind. Also es liegen Module in Pearl dahinter,
die anhand der vorhergehenden Auswahl die Auswahlmöglichkeiten des Drop Downs was darunter liegt generieren.
Daher kann ich nicht explizit auf den jeweiligen Eintrag im Drop Down kommen, zumindest kann ich ihn nicht sehen, bzw. im Quellcode sichtbar machen. Mein Problem ist, das ich Perl und AJAX Einsteiger bin und ich mich erst einarbeite.
 
Reicht nicht einfach ein Standard-Event, etwa so etwas
Code: 
<select id="test" onchange="alert(this.value);">
        <option value="1" selected="selected">Meine erste Wahl</option>
        <option value="2">Zeile 2</option>
</select>
Statt des alert musst halt das Popup öffnen (oder dynamisch ein sonst hidden DIV einblenden).
 
Hallo,

marzocchi1 schrieb:
Das Problem ist das die Drop Downs nicht fest sind.
Zum Vergrößern anklicken....
ja und genau deswegen macht man das mit jquery wie das beispiel im link
Daher kann ich nicht explizit auf den jeweiligen Eintrag im Drop Down kommen
Zum Vergrößern anklicken....
? du brauchst doch nur das select überwachen, entweder wenn es einen id hat darüber ider einfach über den namen.
Nach auswahl egal was wird ja die funktion ausgeführt und weist was ausgewählt ist und kannts das weiter verarbeiten.

zumindest kann ich ihn nicht sehen, bzw. im Quellcode sichtbar machen
Zum Vergrößern anklicken....
wieder ein? wenn es nicht im quelltext ist, kann der Browser das auch nicht anzeigen :O)

ah, sag jetzt nicht das mit IE Arbeitest?
Dann bist echt noch Einsteiger wenn den fehler machst :O)
schau die FF firebug an, der chrom hat auch sowas.

Cheffchen
 
Moment moment :D den Quellcode hab ich selbst geschrieben für das Formular. Ich meinte damit ich kann mir die Werte nicht aus dem Quellcode ziehen, denn diese sind variabel und in einer Datenbank hinterlegt, werden dann durch mehrere Perl Module gejagt wodurch die Auswahl festgelegt wird. Da es sich um mehrere Drop Down Boxen nacheinander handelt, kannst du dir sicher vorstellen wie groß die Auswahlmöglichkeiten sein können, da es sich um eine Flut an Datensätzen in der Datenbank handelt.

Ich meinte mit der Aussage lediglich das ich keine hard codierten Werte hab
 
und wenn du nicht weist was aus der groß die Auswahlmöglichkeiten ausgewählt werden kann wo her weist was machen möchtest bzw. was passieren soll bei einer Auswahl?

ich bin davon ausgegangen das bei einer bestimmten auswahl was bestimmtes passieren soll?

Cheffchen
 
Ja stimmt schon das etwas bestimmtes passieren soll, aber diese Werte sind nicht immer da bei denen das passieren soll.

Ein Beispiel:

Bei Auswahlmöglichkeit D soll ein Popup kommen

1. Drop down -> Auswahl A
2. Drop down -> Auswahlmöglichkeiten B, C, D

1. Drop Down -> Auswahl B
2. Drop Down -> Auswahlmöglichkeiten B,C

Somit tritt nur im 1. Fall der Fall ein das das Pop Up überhaupt generiert werden kann.
 
Danke Cheffchen,

werde es mal versuchen :) leider funktioniert dein Link nicht.
Könntest du den Code mal so posten?

Greets

marzocchi1
 
Also ein Block sieht bei mir so aus:


Code: 
                <div>
                    <label for="ServiceID" class="Mandatory"><span class="Marker">*</span>$Text{"ServiceID"}:</label>
                    $Data{"ServiceStrg"}
                    <div id="ServiceIDError" class="TooltipErrorMessage" ><p>$Text{"This field is required."}</p></div>
                    <div id="ServiceIDServerError" class="TooltipErrorMessage NoJavaScriptMessage$QData{"ServiceIDInvalid"}" ><p>$Text{"This field is required."}</p></div>
                    <div class="Clear"></div>
                 
                </div>

Hier soll der Spaß eingebaut werden.

Greets

Marzocchi1
 
Hallo,

der Link oben geht jetzt und hier der code zusammen.

Was sollen wir mit dem code der selber variable enthält?
der endcode der im browser ankommt ist interessant denn da sehe ich kein select oder was auch immer in der art.
HTML: 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
$(function() {
$("#theSelect").change(function() {
    $("#someInput").val($(this).val());
  if($(this).val()=="D"){
    //HIER der POPUP CODE ODER WAS AUCH IMMER
    alert("Auswahl D");
  }
}).change(); 
}); 
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<select id="theSelect">
    <option value="">-- auswahl bitte --</option>
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="D">D</option>
</select>
<br />
<input id="someInput"/>
</body>
</html>
 
Das sollte wenn ich es richtig verstehe so funktionieren oder?

Code: 
<script type="text/javascript">
    $(function() {
    $("#ServiceID").change(function() {
    $("#ServiceID").val($(this).val());
        if($(this).val()=="Workplace PC - Laptop"){
            alert("Dies ist falsch");
  }
}).change();
});
</script>

Ich möchte ja zum Beispiel ganz einfach wenn ich in der Drop Down die schon vorhanden ist Workplace PC - Laptop auswähle, das eine Meldung kommt. Sollte ja simpel sein
 
Hallo,

ja, wenn das select die id=ServiceID hat.
die zeile musst löschen, war nur test das den wert in das inputfeld geschrieben hat und ist so jetzt etwas falsch.
HTML: 
$("#ServiceID").val($(this).val());

Cheffchen
 
Das heisst ich brauche trotzdem noch einen select?
Weil wenn ich einen Select einbaue mit den Optionen erzeugt er mir ja eine neue Drop Down Box. Zumindest war das bei mir bis jetzt so.
Muss mich wirklich entschuldigen das ich mich so doof anstelle, aber ich arbeite erst seit gestern in diesem Job und habe vorher jahrelang nichts mit HTML und JScript gemacht, daher ist es für mich wieder so etwas wie ein Neueinstieg.

Hier mal der Code wie es jetzt aussieht aber nicht funktioniert :)

Code: 
<!-- dtl:block:TicketService -->
                <div>
                    <label for="ServiceID" class="Mandatory"><span class="Marker">*</span>$Text{"ServiceID"}:</label>
                    $Data{"ServiceStrg"}
                    <div id="ServiceIDError" class="TooltipErrorMessage" ><p>$Text{"This field is required."}</p></div>
                    <div id="ServiceIDServerError" class="TooltipErrorMessage NoJavaScriptMessage$QData{"ServiceIDInvalid"}" ><p>$Text{"This field is required."}</p></div>
                    <div class="Clear"></div>
                </div>

<!--dtl:js_on_document_complete-->
<script type="text/javascript">//<![CDATA[
    $('#ServiceID').bind('change', function (Event) {
        Core.AJAX.FormUpdate($('#NewCustomerTicket'), 'AJAXUpdate', 'ServiceID', ['TypeID', 'Dest', 'PriorityID', 'SLAID', $Data{"DynamicFieldNamesStrg"}]);
    });
//]]></script>

<!-- Oben steht der Block zum Auswählen und einlesen der auswahl -->

<script type="text/javascript">
   
   
    $(function() {
    $("#ServiceStr").change(function() {
        if($(ServiceStr).val()=="Workplace PC - Laptop"){
            alert("Dies ist falsch");
  }
}).change();
});
</script>
 
Hallo,

der code ist wurst, was kommt im browser an.
ich würde mal raten das select #ServiceID hat und nicht #ServiceStr. deswegen ändern und der code ist da nicht ganz richtig, entwerder komplett ins <head> schieben oder zeile 23-27 (der rest löschen) verschieben zwischen zeile14/15.

Browser ist wichtig und da kommt um firebug Firefox nicht drum rum oder Chrom, einfach mal F12 drücken, ohne das kannst kaum was mit JS machen bzw. auf fehler suche gehen oder was der browser überhaupt macht.

Cheffchen
 
Das Problem ist das das Head automatisch generiert wird aus den Summen der einzelnen DTL's, daher kann ich das nicht direkt reinpfeffern.

Der obige Code funktioniert wunderbar auch das Update, einzig und allein mein Alärmchen bei der Auswahl von Workplace PC - Laptop funktioniert nicht.
Wahrscheinlich die kleinere Aufgabe läuft nicht ....

Es handelt sich hierbei ja nicht um eine Website, sondern um eine komplette Software
 
Code: 
<select class="Validate_Required" id="ServiceID" name="ServiceID" aria-required="true" aria-invalid="false"><option value="">-</option><option value="1" selected="">Workplace PC - Laptop</option></select>

Das kommt raus. Hab es mit Chrome gemacht = )

Was ich bis jetzt erreichen konnte ist das die Funktion in soweit funktioniert wenn ich statt entspricht entspricht nicht angebe. Das komische ist das er dann bei egal welcher Auswahl das Pop Up produziert, also auch bei Workplace PC - Laptop, obwohl ja entspricht nicht Workplace PC - Laptop angegeben ist. Somit scheint er die falschen Werte zu übergeben wenn ich das richtig sehe?

Kann es eventuell daran liegen das es sich hier nicht um einen Zahlenwert handelt sondern um einen String? Oder gibt .val einfach nur den Wert an der in der Variable enthalten ist unabhängig vom Inhalt
 
Zuletzt bearbeitet:
Hallo,
das hätten wir vor 19Beiträge gebraucht :O)
also id ist ServiceID wie schon vermutet aber das value ist ja 1 und der Text ist "Workplace PC - Laptop"
Code: 
<option value="1" selected="">Workplace PC - Laptop</option>
jetzt ist die frage, ist der Punkte immer value=1? müsste ja eigentlich, dann brauchst die abfrage nur so machen wo auch noch syntax fehler waren ' und # vergessen
Code: 
if($('#ServiceID').val()=="1"){
wenn es leider nicht fest ist musst den text auslesen was aber nicht so optimal ist da man den ja mal schnell ändert.
Code: 
if($('#ServiceID :selected').text()=="Workplace PC - Laptop"){

Cheffchen.

tipp: schau die mir mal die jquery seite an da gibts auch immer schöne beispiel: http://api.jquery.com/
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben