Jquery Funktion abändern für dynamisch erzeugte select Boxen

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

1

Dienstag, 7. Juni 2011, 18:27

Die id des Selectfeldes

	PHP-Quelltext
1	<select id="'.$row->lid.'">

Das ursprüngliche JS für Select Felder zu übergeben. Hier war die id Fest und hieß "font".

Javascript-Quelltext

$(document).ready(function(){
		$("#font").change(onSelectChange);
                
	function onSelectChange(){
		var selected = $("#font option:selected");		
		var output = "";
		if(selected.val() != 0){
			output = selected.text();
		}
                $.ajax({
                    url: "inc/tour.php",
                    data: "font="+output,
                    dataType: "html",
                    success: function(data){
                    $('.window_main').html(data);
                    }
                });
	}
	});

Meine bescheidenen Überlegungen:
Da ich ja die genaue id nicht weiss, muss ich sie irgendwie da reinbekommen. Aber wie

das ist die Frage :?:

Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

lorenz

Haudegen

Dabei seit: 05.11.2002

Beiträge: 647

2

Dienstag, 7. Juni 2011, 18:47

mh ich kann aus dem beispiel nicht genau erkennen was für ein ziel du verfolgst. warum gibt es variable ids ? sollen auf einer Seite mehre dieser ids mit dem script funktionieren?

-LA

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

3

Dienstag, 7. Juni 2011, 18:55

Genau es gibt ganz viel select boxen mit diesen unterschiedlichen ids. Sie werden in einer while Schleife ausgegeben.

Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Josephine« (7. Juni 2011, 20:03)

lorenz

Haudegen

Dabei seit: 05.11.2002

Beiträge: 647

4

Dienstag, 7. Juni 2011, 19:46

hab das gerad hier mal geschrieben ist also ungetestet aber es gibt dir vielleicht ein Anstoß in die richtige Richtung

	PHP-Quelltext
1	<select id="'.$row->lid.'" class="selectClass">

Javascript-Quelltext

$(document).ready(function(){
  $(".selectClass").change(function(){
    var $this = $(this),
        id = $this.attr("id"),
        selected = $this.find("option:selected"),
        output = (selected.val() != 0)? selected.text:"";
    $.ajax({
      url: "inc/tour.php",
      data: "c="+output+"&id="+id,
      dataType: "html",
      success: function(data){
        $('.window_main').html(data);
      }
    });
  });
});

so würde dann an inc/tour in der variable c das was selected ist stehen und in id die id des select elements

-LA

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »lorenz« (7. Juni 2011, 19:46)

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

5

Dienstag, 7. Juni 2011, 23:22

Mhh, also ich habs mal eingebaut und es tut sich nix, firebug meldet nichts in der Konsole wenn ich was auswähle im Select. Was kann ich noch tun um rauszufinden warum es nicht geht?

Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

lorenz

Haudegen

Dabei seit: 05.11.2002

Beiträge: 647

6

Mittwoch, 8. Juni 2011, 00:05

vielleicht solltest dich mal mit ein par basics von jquery beschäftigen ;>>

du hast 2 mal die abfrage drin ob das script rdy ist das wird vermutlich net 2 mal getriggert ;>

einfach mal die erste ziele das

	Javascript-Quelltext
1	$(document).ready(function(){

und die letze zeile von dem stück das

	Javascript-Quelltext
1	});

rausnehmen

-LA

ps. dein code ist eh ein bisschen strange ids sollten eigentlich einzigartig sein auf einer Seite deine select boxen haben aber teils die gleiche id wenn du damit nur daten weitergeben willst solltest du vielleicht eher sowas wie data-id="19" oder so nutzen?;>

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

7

Mittwoch, 8. Juni 2011, 00:38

Ich hab die andere Funktion auskommentiert, aber es tut sich trozdem nichts.

Habe die ids in eindeutige geändert. Keine mehr ist doppelt.

Javascript-Quelltext

$(document).ready(function(){
  $(".selectClass").change(function(){
    var $this = $(this),
        id = $this.attr("lid"),
        selected = $this.find("option:selected"),
        output = (selected.val() != 0)? selected.text:"";
    $.ajax({
      url: "inc/details.php",
      data: "c="+output+"&lid="+id,
      dataType: "html",
      success: function(data){
        $('.window_main').html(data);
      }
    });
  });
});

	PHP-Quelltext
1	<select class="selectClass" lid="'.$row->lid.'">

Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

lorenz

Haudegen

Dabei seit: 05.11.2002

Beiträge: 647

8

Mittwoch, 8. Juni 2011, 00:57

die erste und letze Zeile des snippets sollten halt noch raus das es dann nur noch so aussieht

Javascript-Quelltext

$(".selectClass").change(function(){
  var $this = $(this),
      id = $this.attr("lid"),
      selected = $this.find("option:selected"),
      output = (selected.val() != 0)? selected.text:"";
  $.ajax({
    url: "inc/details.php",
    data: "c="+output+"&lid="+id,
    dataType: "html",
    success: function(data){
      $('.window_main').html(data);
    }
  });
});

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

9

Mittwoch, 8. Juni 2011, 10:14

Tut sich immer noch nix, hoffe ich hab das Richtig gemacht die Funktion in die ready funktion mit einzubauen:
Auch wenn die Funktion nicht in der ready funktion ist gehts net.

Spoiler
Javascript-Quelltext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
$(function(){

    $('ul#users li').click(function(){
    $.ajax({
       type: "GET",
       url: "inc/details.php",
       data: "id="+$(this).attr('name'),
       dataType: "html",
       success: function(data){
         $('.window_main').html(data);
         $('.tablesorter').tablesorter();
       }
     });
    });
    
    $('#add').click(function(){
    $.ajax({
       url: "inc/kunde_add.php",
       data: "id=add",
       dataType: "html",
       success: function(data){
         $('.window_main').html(data);
         $('.tablesorter').tablesorter();
         $(document).ready(function() { 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
       }
     });
    });

    $(document).ready(function(){
		$("#font").change(onSelectChange);
                
	function onSelectChange(){
		var selected = $("#font option:selected");		
		var output = "";
		if(selected.val() != 0){
			output = selected.text();
		}
                $.ajax({
                    url: "inc/tour.php",
                    data: "font="+output,
                    dataType: "html",
                    success: function(data){
                    $('body').css('font-size',output);
                    $('select').css('font-size',output);
                    $('li').css('font-size',output);
                    }
                });
	}
        
   $(".selectClass").change(function(){
    var $this = $(this),
        id = $this.attr("lid"),
        selected = $this.find("option:selected"),
        output = (selected.val() != 0)? selected.text:"";
    $.ajax({
      url: "inc/details.php",
      data: "c="+output+"&lid="+id,
      dataType: "html",
      success: function(data){
        $('.window_main').html(data);
      }
    });
 });
        
        
	}); 
        

    

    

    
    
    
    }); // end

Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Josephine« (8. Juni 2011, 10:14)

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

10

Mittwoch, 8. Juni 2011, 11:57

wie wärs , wenn du eine kleine aufteilung machst, damit du eine übersicht bekommst und selber dann weist was eigentlich in deinem quellcode passiert

deine js datei könnte dann so aussehen:

Javascript-Quelltext

/**
* Ajax funktion um Details anzuzeigen
*/
var detailsAnzeigen = function(name){
 $.ajax({
       type: "GET",
       url: "inc/details.php",
       data: "id="+name,
       dataType: "html",
       success: function(data){
         $('.window_main').html(data);
         $('.tablesorter').tablesorter();
       });
}

/**
* Funktion um Schriftgroese zu aendern
*/
var fontWechseln = function(fontsize){
 $.ajax({
                    url: "inc/tour.php",
                    data: "font="+fontsize,
                    dataType: "html",
                    success: function(){
                    $('body').css('font-size',fontsize);
                    $('select').css('font-size',fontsize);
                    $('li').css('font-size',fontsize);
                    
                    });
}

/**
* Hauptfunktion die alles aufruft
*/
$(function(){

//Klick auf ein Listen element
 $('ul#users li').click(function(){
detailsAnzeigen($(this).attr('name'));
});

//Auswahl der Schriftgöße
$("#font").change(function(){
var selected = $("#font option:selected");		
		var output = "";
		if(selected.val() != 0){
			output = selected.text();
		}
fontWechseln(output);
});


});//Ende der Haupt funktion

also dass du alles in kleinere aufgaben unterteilst und dann in der hauptfunktion diese zusammenfügst, dann hast du und wir eine bessere übersicht.

Zudem tut sich nix, bringt uns nicht weiter, du hast doch Firebug und Console , da könnten eventuell fehlermeldungen kommen. Dann kannste nachschauen was eigentlich bei deinem Ajax request ausgelöst wird und was kriegst du als ergebnis zurück.
Einfach den kompletten quellcode zu posten ist Kontraproduktiv und keiner hat sich lust es anzuschauen

zusätzlich wäre noch ein Upload deines scripts auch noch nützlich für uns.

MFG

Mein kleines Projekt
-Cruel Online-

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

11

Mittwoch, 8. Juni 2011, 14:53

Habe versucht das ganze Übersichtlich nach deinem Beispiel zu ordnen. Die Funktion um die es geht heißt nun Kundendaten updaten und wird in der Hauptfunktion unter Auswahl der Kundendaten aufgerufen. Firebug habe ich in der Konsole ich ein Häckchen bei:
- JS Fehler anzeigen
- JS Warnungen anzeigen
- XMTLHttpRequests.
Die Konsole zeigt nichts an wenn ich auf besagtem Select rumklicke.

Linnk zum Projekt: http://job.wmw.cc/test/
(oberstes Shortcut, Andreas auwählen unter Leistungen zu sehende Auswahlboxen sind wie folgt gesetzt)

Auszug aus der details.php: das erste <select>:

	PHP-Quelltext
1	<select class="selectClass" data-id="'.$row->lid.'">

Der geordnete übersichtliche JS Code:

Spoiler
Javascript-Quelltext
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/** 
* Funktionen
*/

// details.php anzeigen
var detailsAnzeigen = function(name){
    $.ajax({
        type: "GET",
        url: "inc/details.php",
        data: "id="+name,
        dataType: "html",
        success: function(data){
            $('.window_main').html(data);
            $('.tablesorter').tablesorter();
        }
    });
}



// Schriftgroesse aendern
var fontWechseln = function(fontsize){
    $.ajax({
        url: "inc/tour.php",
        data: "font="+fontsize,
        dataType: "html",
        success: function(){
        $('body').css('font-size',fontsize);
        $('select').css('font-size',fontsize);
        $('li').css('font-size',fontsize);
        $('input').css('font-size',fontsize);
        }            
    });
}

// Kundendaten updaten
var dataUpdaten = function(output,id){
    $.ajax({
      url: "inc/details.php",
      data: "data="+output+"&data-id="+id,
      dataType: "html",
      success: function(data){
        $('.window_main').html(data);
      }
    });
}

/**
* Hauptfunktion die alles aufruft
*/
$(function(){

    // Klick auf Kundennamen (tour.php to details.php)
    $('ul#users li').click(function(){
        detailsAnzeigen($(this).attr('name'));
    });

    // Klick auf Neuer Kunde (tour.php to kunde_add.php)
    $('div#add').click(function(){
        $.ajax({
            type: "GET",
            url: "inc/kunde_add.php",
            data: "id=add",
            dataType: "html",
            success: function(data){
                $('.window_main').html(data);
            }
        });
    });

    // Auswahl der Schriftgoesse
    $("#font").change(function(){
        var selected = $("#font option:selected");		
        var output = "";
	if(selected.val() != 0){
            output = selected.text();
	}
    fontWechseln(output);
    });

    // Auswahl der Kundendaten
    $(".selectClass").change(function(){
        var $this = $(this),
        id = $this.attr("data-id"),
        selected = $this.find("option:selected"),
        output = (selected.val() != 0)? selected.text:"";
        
    dataUpdaten(output,id);
    });

 });// Ende der Hauptfunktion

Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von »Josephine« (8. Juni 2011, 14:53)

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

12

Mittwoch, 8. Juni 2011, 14:56

2 werte werden bei jquery so übergeben:

	Javascript-Quelltext
1 2 3 4 5 6 7 8 9 10	$.ajax({ type: "GET", url: "seite.php", data: {'param1':'value1','param2':'value2','param3':'value3'}, dataType: "html", success: function(data){ alert("geladen!"); }); }

dies bewirkt dass du dann in deiner Firebug console folgenden aufruf angezeigt kriegst:

seite.php?param1=value1&param2=value2&param3=value3

für value kannst du dann deine variablen einsetzen wie $(this).irgendwas usw.. oder eben das was du an die funktion übergeben hast

Mein kleines Projekt
-Cruel Online-

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »cccpmik« (8. Juni 2011, 14:56)

Josephine

Haudegen

Dabei seit: 30.04.2009

Beiträge: 624

13

Mittwoch, 8. Juni 2011, 15:08

Wollte output und id an die Funktion Kundendaten updaten übergeben

Javascript-Quelltext

// Kundendaten updaten
var dataUpdaten = function(output,id){
    $.ajax({
      url: "inc/details.php",
      data: "data="+output+"&data-id="+id,
      dataType: "html",
      success: function(data){
        $('.window_main').html(data);
      }
    });
}

    // Befindet sich in der Hauptfunktion
    // Auswahl der Kundendaten
    $(".selectClass").change(function(){
        var $this = $(this),
        id = $this.attr("data-id"),
        selected = $this.find("option:selected"),
        output = (selected.val() != 0)? selected.text:"";
        
    dataUpdaten(output,id);
    });

Unterschätze nie jemanden der einen Schritt zurück geht! Er könnte Anlauf nehmen.

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 2 999

14

Mittwoch, 8. Juni 2011, 15:37

Javascript-Quelltext

$("select.leistungen").change(function () {
          var id,selectedValue;

           id=$(this).attr('data-id');
          $("select.leistungen option:selected").each(function () {
             if($(this).val() != 0){
             dataUpdaten($(this).val(),id);
             }
             
              });
        })

ich würde deine auswahl so aufbauen:

HTML

<select class="leistungen" id="aktuelle leistung ID">
<option value="0">Bitte Wählen</option>
<option value="ID der Leistung 1">Leistung1</option>
<option value="ID der Leistung 2">Leistung2</option>
<option value="ID der Leistung 3">Leistung3</option>
</select>

mit dem oberen code rufst du dann folgenden ajax befehl auf

Javascript-Quelltext

var dataUpdaten = function(old,new){
$.ajax({
                    url: "inc/update_leistung.php",
                    data:({'old':old,'new':new}),
                    dataType: "html",
                    success: function(){
                         $('.window_main').html(data);
                    
                    });

};

damit rufst du eine update-leistungen.php auf mit parametern old=zahl&new=anderezahl

damit kannst du dann die alte leistung mit der neuen ersetzen..

Mein kleines Projekt
-Cruel Online-

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »cccpmik« (8. Juni 2011, 15:37)

lorenz

Haudegen

Dabei seit: 05.11.2002

Beiträge: 647

15

Mittwoch, 8. Juni 2011, 17:30

die erste Zeile sollte vermutlich so aussehen

	HTML
1	<select class="leistungen" data-id="aktuelle leistung ID">

und der JS code ist ein wenig naja, nicht wirklich schön

vielleicht hab ich ihn gerad beim überfliegen auch nur falsch verstanden würde ich eher so lösen

Javascript-Quelltext

$("select.leistungen").change(function () {
  var $this = $(this),
        id = $this.attr("data-id"),
        $selected = $this.find("option:selected"),
        update = (selected.val() != 0) ? selected.val():false;
  if (update !== false){
    dataUpdate(id,update);  
  }
});