Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] PHP - jQuery-Integration

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] PHP - jQuery-Integration

    Moin moin,

    ich beschäftige mich zur Zeit mit dem Thema jQuery und stelle im Zuge dessen ein paar Projekte darauf um. Und dabei bräuchte ich eine Entscheidungshilfe, wie ich den Code um elegantesten anlege...

    Ich hätte beispielsweise eine "Liste" aus Elementen, die aus der SQL-Datenbank per PHP generiert wird. Nun ist es ja durch jQuery recht einfach möglich, so nette Drag & Drop-Funktionalitäten per class-Selektor einzubauen. Um jetzt auch noch dem Element Daten zu zuweisen, die die verarbeitenden D&D-Funktionen verwenden, ohne beispielsweise ein Standardattribut dafür zu missbrauchen (etwa id oder name) - möchte ich die jQuery-Funktion $.data() verwenden...

    Da aber das HTML dynamisch erzeugt wird, und auch der Inhalt der per $.data() übergebenen Information aus der DB stammt, muss ich doch nach jedem Schleifendurchlauf, welcher mir den Tag per echo() erzeugt, auch eine komplette JS-Sektion einleiten und dann die Beschreibung per JS vornehmen.

    Da funktioniert soweit ja auch, sieht aber ziemlich scheisse im generierten Quellcode aus...:

    Code:
    <div id="bla_1">...<div>
    <script type="text/javascript">$('#bla_1').data('d', '123');</script>
    <div id="bla_2">...<div>
    <script type="text/javascript">$('#bla_2').data('d', '456');</script>
    ...
    <div id="bla_n">...<div>
    <script type="text/javascript">$('#bla_n').data('d', 'nnn');</script>
    Kennt ihr nicht zufällig elegantere Möglichkeiten das zu realisieren. Ich kann mir nicht vorstellen, dass das so eine exotische Anforderung an eine Applikation ist...

    MfG
    RedoX
    Selbst im Rollstuhl kann man die Menschenrechte mit Füßen treten.
    Die Politik darf kein hirnfreier Raum sein.


  • #2
    wie wärs wenn du deine daten mit php generierst und dann eine javscript variable damit erzeugst

    PHP-Code:
    $meineDaten mysql_fetch_array($sql);
    echo 
    '
    <script type="text/javascript">
    var daten = new array('
    .implode('\',\'',$meineDaten.');
    </script>
    '

    nach dem du dies getan hast, schreibst du eine funktion die die alle daten in einer foreach schleife überabeitet etwa so:

    Code:
    var setData = function(){
        for(datenNr in daten){
           $('#bla_'+datenNr).data('d', daten[datenNr]);
        }
    };
    oder ist das nicht was du wolltest? habe ich vllt deine frage falsch verstanden?
    apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/witalimik

    Kommentar


    • #3
      Ja ich vermute ein bisschen Aber es ist auch schwierig zu erklären...

      Ich hole ja meine DB-Daten per while-Schleife nach und nach Zeilenweise vom Server, und bei jedem Durchlauf generiere ich aus den Zeileninfos z. B. ein div-Element. Um das div-Element nachher mit jQuery anständig verarbeiten zu können, wäre es praktisch wenn ich daran Daten anhängen könnte, die auch irgendwo in der DB-Zeile stecken...

      Dies müsste ja im selben Schleifendurchlauf geschehen, da die Daten ja temporär sind und ständig mit mysql_fetch_object o. Ä. überschrieben werden...

      Ich könnte zwar die Schleife zwei Mal durchlaufen lassen; einmal geordnet im Head für JS und einmal für HTML im body, aber das wäre wohl wenig performant.

      Zudem nervt mich, dass ich nur wegen des data()-Zuweisens eine ID für das Tag anlegen muss, die ich sonst nie wieder benötige - weil sie ja per Klassen-Selektor und this angesprochen wird. Das lässt sich aber vermutlich nicht umgehen.
      Selbst im Rollstuhl kann man die Menschenrechte mit Füßen treten.
      Die Politik darf kein hirnfreier Raum sein.

      Kommentar


      • #4
        naja wegen der ID, da kannst du $('div.className').data() verwenden. dann brauchst du keine ID.

        oder jedes div kriegt gleichen klassen namen und mit eq() kannst du eine bestimmte nummer des divs ansprechen

        PHP-Code:
        <div class="test">ASDASD</div>
        <
        div class="test">wtf</div>
        <
        div class="test">gsdfdfsg</div>
        <
        div class="wasanderes">ich bin was anderes und kann nicht mit eq angesprochen werden</div>
        alert($('div.test').eq(1).html()); //ausgabe: wtf 
        was hast du überhaupt mit der data() funktion vor? und so wie du es zz generiert hast funktioniert das doch eigentlich nicht denn der jQUery code muss doch immer in
        $.document.ready(function(){
        //jQUery
        });

        rein
        apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/witalimik

        Kommentar


        • #5
          Nee, muss nicht zwangsläufig. Wenn ich den script-Tag nach dem Element deklariere, benötige ich kein $(document).ready...

          Und mittels $('div.className').data() würde ich ja allen Elementen dieselben Daten zuweisen. Diese sollen aber unterschiedlich sein Aber mit der id könnte ich leben. Wer weiß, vielleicht kann ich sie später noch gebrauchen.

          Anwendungsbeispiel: div enthält den Namen eines Autos, das per D&D auf ein anderes div gezogen wird. Anschließend soll in jenem div der Preis angezeigt werden, der zuvor per $.data() an das Element gebunden wurde...
          Selbst im Rollstuhl kann man die Menschenrechte mit Füßen treten.
          Die Politik darf kein hirnfreier Raum sein.

          Kommentar


          • #6
            hm.. du könntest auch in dem div ein unsichtbaren span tag mit dem preis reinschreiben, dann müsstest du nicht data verwenden somit hättest du so eine konstuktion

            PHP-Code:
            <div class="blah_1">Autorname1 <span style="visibility:hidden">12</span></div>
            <
            div class="blah_2">Autorname2 <span style="visibility:hidden">12</span></div
            und dann den text() aus dem span anzeigen nach D&D sonst fällt mir da ncihts ein..
            apt-get install npm -> npm install -g bower -> bower install <package> YOLO https://www.paypal.me/BlackScorp | Mein Youtube PHP Kanal: https://www.youtube.com/witalimik

            Kommentar


            • #7
              Schreib ein generiertes nicht-HTML-Attribut rein. Bspw. dataId='sad5435sad464sa6d6da'. Die zugehörigen Daten sammelst Du parallel in einem Array. Nach dem Auslesen aller Daten erzeugst Du ein Script, das alle entspr. Attribute sucht, die Tags mit den Daten versieht und das Attribut entfernt.
              --

              „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
              Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


              --

              Kommentar


              • #8
                @BlackScorp: Ja da hatte ich auch schon drüber nachgedacht, zumindest ein hidden Input-Feld zu verwenden. Darauf liesse sich dann auch über $('.class').children('input').val() zugreifen, aber ob das viel eleganter ist? Grade bei mehreren Parametern...?

                @nikosch: Sorry, ich versteh nich so ganz, was du meinst...
                Selbst im Rollstuhl kann man die Menschenrechte mit Füßen treten.
                Die Politik darf kein hirnfreier Raum sein.

                Kommentar


                • #9
                  Pseudo-Code
                  Code:
                  schleife row=fetch
                    if row->data
                      id = generate_id (row->id)
                      echo <element .. dataId="id" />
                      $data[$id] = row->data
                    else
                      echo <element />
                  
                  if $data
                    <script>
                  
                      document.ready
                        $('[dataId]').each () {
                          var data = <?php echo json_encode ($data); ?>
                          // ..
                        }
                    </script>
                  --

                  „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                  Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                  --

                  Kommentar


                  • #10
                    Oh, ich wusste gar nicht, dass ich eigene Nicht-HTML-Attribute verwenden kann, und diese auch noch auslesbar sind...

                    Ich könnte mich jetzt mal mit einer Idee auf gaaanz dünnes Eis bewegen: Ich definiere mir einfach nicht-konforme Attribute nach Lust und Laune, und kann diese dann optimal und performant zuweisen und auslesen...

                    Code:
                    <div param1="dies" param2="das" param3="jenes">...</div>
                    Heiligt hier der Zweck nicht die Mittel - selbst wenn ich gegen die XHTML-Spezifikationen verstoße? Der Quirks-Mode springt ja zumindest nicht an...
                    Selbst im Rollstuhl kann man die Menschenrechte mit Füßen treten.
                    Die Politik darf kein hirnfreier Raum sein.

                    Kommentar


                    • #11
                      Wenn du das HTML5-Feature custom data attribute nutzt, kannst du das ganze sogar machen, ohne invaliden Code zu erzeugen. (Darauf zuzugreifen, sollte in allen modernen Browsern funktionieren, selbst wenn die noch keine tiefer gehende HTML5-Unterstützung haben.)

                      John Resig - HTML 5 data- Attributes
                      http://dev.w3.org/html5/spec/dom.htm...n-visible-data

                      [edit] Kommando zurück, hab's gerade mal ausprobiert - das Auslesen der Attribute klappt in keinem meiner Testbrowser auf die von John resig beschriebene Weise. Hab das Dokument allerdings als text/html ausgeliefert - weiss nicht, ob das bei Auslieferung als XML anders wäre. [/edit]

                      (Obwohl ich immer noch nicht überzeugt bin, dass sowas hier überhaupt notwendig ist. Wenn du die Elemente mit IDs versiehst, dann ist es doch auch kein Problem, die Daten zentral in einem JavaScript-Objekt abzulegen und über eben diese ID zu referenzieren.)

                      Kommentar


                      • #12
                        Ja sicher könnte man das so referenzieren.

                        Aber ich meine ja nur, wenn das so ginge (es geht ja - zwar nicht-valide aber oho) wäre es besser zu lesen, zu warten, und ist einfach eleganter...

                        Weiß denn zufällig jemand, ob diese invalide Technik auch browserübergreifend problemlos funktionieren würde...
                        Selbst im Rollstuhl kann man die Menschenrechte mit Füßen treten.
                        Die Politik darf kein hirnfreier Raum sein.

                        Kommentar


                        • #13
                          Zitat von redox Beitrag anzeigen
                          Aber ich meine ja nur, wenn das so ginge (es geht ja - zwar nicht-valide aber oho) wäre es besser zu lesen, zu warten, und ist einfach eleganter...
                          Was soll denn daran eleganter sein, als die benötigten Infos in einem JS-Objekt zu bündeln?

                          Kommentar


                          • #14
                            Weil ich dann zweimal per PHP eine Schleife durchlaufen lassen muss, die einmal die HTML Tags aufbaut, und zum zweiten aus einem dafür erzeugten Array an anderer Stelle die Werte fürs JavaScript durchklappert und Code dafür generiert...
                            Selbst im Rollstuhl kann man die Menschenrechte mit Füßen treten.
                            Die Politik darf kein hirnfreier Raum sein.

                            Kommentar


                            • #15
                              Nein, musst du nicht - du kannst doch die Daten für das Objekt auch gleich in eine String-Variable speichern, und deren Inhalt dann einfach später ausgeben ...

                              Kommentar

                              Lädt...
                              X