Ankündigung

Einklappen
Keine Ankündigung bisher.

nicht input-button sondern button type button

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 2
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige 1 2 Weiter
  • #1

    nicht input-button sondern button type button

    Hi, wieder mal fehlt mir die generelle Idee.

    Nach Datenbank-Abfrage erstelle ich unterschiedlich viele Button mit integrierten kleinen Graphiken aus meiner DB.
    Sowie ich einen der erstellten Buttons anklicke wird auch die zugrundeliegende große Graphik angezeigt. Soweit so gut.

    Mein Problem:

    Wie kann ich auf die Information, die der angeklickte Button ja wohl noch weiß, zugreifen. Denn die entsprechende Variable in der die Information an den Butten übergeben wurde ist ja für php in diesem Moment nicht mehr verfügbar? Was weiß der Button was ich nicht weiß. Oder wo liegt mein Denkfehler.
    Danke für jeden Hinweis, halweks
    Stichworte: -
  • #2
    Buttons in HTML gehören einer Form-Struktur an, Buttons haben entweder eine Submit-, Reset- oder Cancel- Aufgabe. Alle anderen Eigenschaften sind client-seitig via Javascript verarbeitet. Javascript kann direkt auf das Parent-Form zugreifen und "alle" Daten auslesen. Nach einem Submit stehen alle natürlichen Werte ( ausgeschlossen nicht gecheckte Checkboxes und leere Upload-Felder ).

    Was sollen denn deine Buttons so an Aufgaben übernehmen und vor allem wo sollen diese Aufgaben stattfinden ?
    [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

    Kommentar

    • #3
      Information, die der angeklickte Button ja wohl noch weiß

      Hi trOy, vorab Danke für die schnelle Reaktion. Nun zu Deiner Frage:
      Was sollen die Butten für eine weitere Aufgabe übernehmen.

      Was bisher einwandfrei klappt ist folgendes:

      Im Rahmen einer
      while ($row = $result->fetch_assoc()) werden dreiunterschiedliche große Bilder in den Variablen:

      $bild50( = $row ["bild_50"]);
      $bild400( = $row ["bild_400"]);
      $original = $row ["bild_gross"]; (in diesen Variablen ist der Pfad zu den Bildern hinterlegt) deklariert und danach wird dem Button das 50er Bild als Thumbnail und das 400er Bild als Info mitgegeben.
      echo "<button type='button' onclick=GR.src='$bild400' '> <img src='$bild150' height='100' width='70' border='1'</button>";

      Sowie ich nach dem Erstellen der Butten einen beliebigen davon anklicke wird das 400er-Bild im entsprechendem Pfad ausgelesen und angezeigt.

      Und nun mein Problem:

      Sowie also das 400er-Bild angezeigt wird sollte eine weitere Aktion, die mir ein js-script mit einer Lupenfunktion aufruft, erfolgen. Diesem Script müsste ich nun einen Pfad übergeben. Aber ich weiß nicht wo php die drei Pfade versteckt oder ob sie schlichtweg "vergessen sind.
      Das ganze Procedere findet auf ein und derselben Seite statt.

      Ich hoffe so ist mein Problem besser beschrieben als zuvor. Da ich mit js keine Erfahrung habe hoffe ich das sich meine Frage über php lösen läßt.
      Danke und herzliche Grüße aus dem Allgäu - halweks

      Kommentar

      • #4
        Zuletzt geändert von monolith; 04.11.2014, 16:21.
        PHP versteckt nichts - du musst mit PHP für die Ausgabe sorgen.

        Schon mal jQuery benutzt? Das ist ein JavaScript-Framework. Soll das Coden mit JS einfacher machen. Wird im Folgenden benutzt.

        Bitte CSS benutzen um das Aussehen von HTML-Elementen zu bestimmen.

        PHP-Code:
        <!DOCTYPE html>
        <html>
        <head>
            <style>
                button img { border: 1px solid  black; }
                button img.default { width: 70px; height: 100px; }
            </style>
        </head>
        <body>
            <?php
                        ... // PHP-Code

                        echo '<button type="button" data-small="'.$bild50.'" data-medium="'.$bild400.'" data-original="'.$original.'"><img class="default" src="'.$bild150.'" alt="Preview"></button>';
                    ?>

            <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
            <script>
                $(document).ready(function() // Laden des DOM abwarten
                {
                    $('button').click(function() // Allen Buttons einen click-Handler verpassen
                    {
                        var $img = $(this).find('img'); // Das Bild in Variable speichern

                        $img.removeClass('default'); // Die CSS-Klasse entfernen

                        var small = $img.attr('data-small'); // Den Pfad zu dem Bild ermitteln
                        var medium = $img.attr('data-medium'); // Den Pfad zu dem Bild ermitteln
                        var original= $img.attr('data-original'); // Den Pfad zu dem Bild ermitteln

                        $img.attr('src', medium); // Das Bild aendern

                        // Hier den Pfad an das Lupen-Skript uebergeben!
                        
                    });
                });
            </script>
        </body>
        </html>

        Kommentar

        • #5
          Button auslesen und JQuery

          Hi monolith, toll wie flott die Antworten kommen!

          nachdem ich vor kurzem mit HTML, CSS und dann mit PHP begonnen habe, versuche ich nun auch noch bei JQuery eine Orientierung zu bekommen. Auf den ersten Blick erscheint mir das doch "einfacher" als js zu sein.
          Sowie ich in der Lage bin Dein Script zu verstehen und es gezielt anwenden kann, und dann noch Fragen offen sind melde ich mich nochmals. Einfach nur ein Script kopieren reicht mir nicht aus. Ich möchte gerne verstehen was ich - dankbarer weise - als Hilfe bekommen habe.
          Danke auch für den CSS-Hinweis. Aber aller Anfang ist bekanntermaßen schwer. Meine kompletten Seiten werde ich diesbezüglich sowieso überarbeiten müssen.
          Herzlichen Gruß - halweks

          Kommentar

          • #6
            Hi monolith,
            nach einem, wenn auch kurzem JQuery-Studium, habe ich versucht Dein Script in den Griff zu bekommen. Allerdings nicht gerade erfolgreich.
            In den Variablen small, medium und original werden die Pfade aus den gerade angeklicktem Button ausgelesen?
            Um dies zu überprüfen habe ich nach jedem auslesen per
            document.write("Im Augenblick ist small: ", small, ". <br>");
            versucht.
            Allerdings wird dann ein leeres Browserfester mit folgender Ausgabe gezeigt :

            [object Object]Im Augenblick ist small: undefined.
            Im Augenblick ist medium: undefined.
            Im Augenblick ist original: undefined.

            Mir scheint dass ich hier etwas nicht verstanden habe.
            mfg und Danke, halweks

            Kommentar

            • #7
              Nachtrag: die php-Datei
              PHP-Code:
              <!DOCTYPE html>
              <html>
              <head>
                  <style>
                      button img { border: 1px solid  black; }
                      button img.default { width: 70px; height: 100px;}
                      #links{ width:600px; height:200px;overflow:scroll;}
                      #lupe{ margin-left:320px; }
                  </style>
                  <link rel="stylesheet" type="text/css" href="styles/magnifier.css">
                  <link rel="stylesheet" type="text/css" href="styles/gallery.css"><!-- rolich -->
                  <link rel="stylesheet" type="text/css" href="styles/gallerie.css"><!-- weks -->    
                  <script type="text/javascript" src="js/event.js"></script>
                  <script type="text/javascript" src="js/magnifier.js"></script>
                  <script type="text/javascript" src="js/gallery.js"></script>
                  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
              </head>
              <body>
              <p>hier stehen meine Button mit der "aufmontierten" $bild150-Variablen</p>
              <div id="links">
                  <?php
                      error_reporting              (E_ALL);
                                    ini_set('display_errors', 1);
                      
                                    $db = @new MySQLi('localhost', 'root', 'website', 'unikate');
                      if (              mysqli_connect_errno()) 
                          {
                          die(              'Konnte keine Verbindung zu Datenbank aufbauen, MySQL meldete: '.mysqli_connect_error());
                          }
                                    $suche_vorschau =  "SELECT * FROM `ketten` WHERE `sorte`= 'hals' AND `preis` > 150 ORDER BY art_nr ";
                                    $sql = $suche_vorschau;
                                    //echo $sql;
                                    $result = $db->query($sql);
                                  if (!              $result) {
                          die (              'Konnte den folgenden Query nicht senden: '.$sql."<br />\nFehlermeldung: ".$db->error);
                      }
                      if (!              $result->num_rows) {
                          echo               "<p class='info'><center><br><br>Es sind<br>keine<br><br>Unikate<br><br>in dieser<br>Kategorie<br>vorhanden</center></p>";
                                        $bild = 'images/leer-01-400.png'; 
                      } else {
                          while (              $row = $result->fetch_assoc()) 
                          {                  //Die Pfade der Bilder
                                            $bild150= $row ["bild_150"];       // dies sind die Pfade zu den Bildern nicht die Bilder selbst
                                            $bild400 = $row ["bild_400"];      // in der DB sind nur die Pfade zu den Bildern abgelegt
                                            $original = $row ["bild_gross"];   // 
                              //Buttonausgabe + + + + + + + + + + + + + + + + + + +                
                                            echo 
                                                '<button type="button" 
                                      data-small="'              .$bild150.'" 
                                      data-medium="'              .$bild400.'" 
                                      data-original="'              .$original.'">
                                      <img class="default" src="'              .$bild400.'" 
                                      alt="Preview">
                                  </button>'              ;                                                        
                              echo               "<input type='checkbox' name='artikel[]'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
                          }                        
                      }    
                                ?>

                  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
                  <script>
                      $(document).ready(function() // Laden des DOM abwarten
                      {
                          $('button').click(function() // Allen Buttons einen click-Handler verpassen
                          {
                              var $img = $(this).find('img'); // Das Bild in Variable speichern
                              document.write( $img );
                              $img.removeClass('default'); // Die CSS-Klasse entfernen

                              var small = $img.attr('data-small'); // Den Pfad zu dem Bild ermitteln
                              document.write("Im Augenblick ist small: ", small, ". <br>");
                              var medium = $img.attr('data-medium'); // Den Pfad zu dem Bild ermitteln
                              document.write("Im Augenblick ist medium: ", medium, ". <br>");
                              var original= $img.attr('data-original'); // Den Pfad zu dem Bild ermitteln
                              document.write("Im Augenblick ist original: ", original, ". <br>");
                              $img.attr('src', medium); // Das Bild aendern
                          });
                      });
                  </script>
                                  <!-- Hier den Pfad an das Lupen-Skript uebergeben!  -->
              </div> <!-- ende links -->

              <p>Und hier folgt die Lupenanzeige nach dem Script von: 
              <a href="http://mark-rolich.github.io/Magnifier.js/"> Mark Rohlich</a></p>
              <p>Sowie man das rechte Bild mit der Maus &uuml;berf&auml;hrt wird links davon die  Verg&ouml;&szlig;erung 
              angezeigt.</p>
                      <div id="lupe">
                                  <a class="magnifier-thumb-wrapper" href='images/ketten/hals/02/auswahl/000-02c.JPG'>
                                      <!-- nur für extra Vergrößerung in neuer html-Seite -->
                                      <!-- Original-Bild mit ~2000 x ~1000 px -->
                                      <img id="test-container" src='images/ketten/hals/02/auswahl/400-02c.JPG'>                        
                                      <!-- <img id="test-container" src="images/ketten/hals/01/auswahl/400-01e.JPG"> -->
                                      <!-- Bild mit ~350 x 400 px -->
                                  </a>    
                          
                              <div class="magnifier-preview" id="preview" style="width: 250px; height: 400px"><!-- die Lupe -->
                              </div>
                      
                              <script type="text/javascript" src="js/Event.js"></script>
                              <script type="text/javascript" src="js/Magnifier.js"></script>
                              <script type="text/javascript">
                                  var evt = new Event(),
                                  m = new Magnifier(evt);
                                  m.attach({
                                      thumb: '#test-container',
                                      large: 'images/ketten/hals/02/auswahl/000-02c.JPG', 
                                  
                                      largeWrapper: 'preview',
                                      zoom: 5
                                  });
                              </script>
              </body>
              </html>
              Das Resultat:
              [IMG]C:\Users\Wolfgang\Desktop\Zuordnung gelingt nicht.png[/IMG]
              Zur Lupe: in diesem Beispiel ist der Pfad zum Bild noch mit festen Angaben. Hier sollten die Variablen dann übernommen werden.

              Kommentar

              • #8
                Statt docmuent.write kannst du auch console.log(variable) nutzen um Debug-Ausgaben in die Konsole zu schreiben.

                Im JS-Code ist $img das Bild im Button. Mit der attr-Methode greifen wir nun auf Attributwerte dieses Bildes zu. Schaut man sich das aber genauer an stellt man fest: Das Bild hat diese Attribute gar nicht, sondern der Button. Es muss daher statt
                Code:
                                var small = $img.attr('data-small'); // Den Pfad zu dem Bild ermitteln
                var medium = $img.attr('data-medium'); // Den Pfad zu dem Bild ermitteln
                var original= $img.attr('data-original'); // Den Pfad zu dem Bild ermitteln
                lauten:
                Code:
                                var small = $(this).attr('data-small'); // Den Pfad zu dem Bild ermitteln
                var medium = $(this).attr('data-medium'); // Den Pfad zu dem Bild ermitteln
                var original= $(this).attr('data-original'); // Den Pfad zu dem Bild ermitteln
                $(this) ist der Button, weil wir uns in einer Ereignis-Methode (click) des Buttons befinden. Bei solchen Methoden zeigt this automatisch auf das auslösende Element, in dem Fall also den Button.

                Kommentar

                • #9
                  Variablenübergabe von Script zu Script

                  Hi und Danke für die Korrektur.
                  Die console.log(variable) zeigt mir auch die richtig ausgelesenen Pfade zu den entsprechenden Bildern an.

                  Sowie ich aber in dem dann folgendem "Lupen-script" den noch statisch vorhandenen Pfad durch die Variablen ersetze geht nichts mehr.

                  Mit anderen Worten: die Variablenübergabe an ein anderes Script habe ich wohl noch nicht begriffen. Seit Tagen lese ich "jQuery" und und sehe vor lauter Bäumen den Wald nicht mehr.
                  Wäre toll wenn Du mir nochmals auf die Sprünge helfen könntest.
                  HG halweks

                  Kommentar

                  • #10
                    Hab ich das Richtig verstanden, dass du von $bild400 den kompletten Pfad wohin übergeben willst, statt nur des Dateinamens?

                    Kommentar

                    • #11
                      Ja absolut korrekt. Ich speichere in der DB nur die Pfade zu den Bildern.
                      In der console.log(variable) bekomme ich auch je Button und Klick die richtigen Werte aufgelistet. z.B.

                      Button 1
                      images/ketten/hals/06/auswahl/000-06b.JPG (Hier liegt: original)
                      images/ketten/hals/06/auswahl/400-06b.JPG (Hier liegt: medium)
                      images/ketten/hals/06/auswahl/150-06b.JPG (Hier liegt: small)

                      Button 2
                      images/ketten/hals/10/auswahl/000-10c.JPG
                      images/ketten/hals/10/auswahl/400-10c.JPG
                      images/ketten/hals/10/auswahl/150-10c.JPG

                      Button 3
                      images/ketten/hals/14/auswahl/000-14b.JPG
                      images/ketten/hals/14/auswahl/400-14b.JPG
                      images/ketten/hals/14/auswahl/150-14b.JPG

                      usw. usw.

                      Sowie ich nun die Inhalte der Variablen im nächsten Script (Lupe) eintrage und dort z.B. mit console.log(medium) abfrage sagt mir die Konsole:
                      ReferenceError: medium is not defined

                      Kommentar

                      • #12
                        Variablenübergaben von Script zu Script

                        Ja richtig.
                        Im Script der onclick-zuordnung werden mir die Pfade der Button mit console.log(variable) auch korrekt angezeigt.
                        z.B.
                        images/ketten/hals/21/auswahl/000-21e.JPG (der Pfad zum Original)
                        images/ketten/hals/21/auswahl/400-21e.JPG (der Pfad zum reduzierten Bild)
                        images/ketten/hals/21/auswahl/150-21e.JPG (Der Pfad zum Thumbnail für die Buttonanzeige)

                        Sowie ich aber im nächsten Script die bisher vorhandenen statischen Pfade durch die Variablen ersetze, sagt mir die Konsole:

                        ReferenceError: original is not defined

                        Wie mir scheint kann ein js keine Daten von einem jquery-script übernehmen. Und abgesehen davon werden die Variablen auch noch in einem html-Teil benötig.
                        Die Konsequenz: Das gesamte Konstrukt muss ich neu organisieren.
                        Trotzdem Danke für die vielen Lösungsansätze.

                        Kommentar

                        • #13
                          Code:
                                          var small = $img.attr('data-small'); // Den Pfad zu dem Bild ermitteln
                var medium = $img.attr('data-medium'); // Den Pfad zu dem Bild ermitteln
                var original= $img.attr('data-original'); // Den Pfad zu dem Bild ermitteln
                          Das sind lokale Variablen, die nur in einem lokalen Kontext verfügbar sind. Entweder machst du sie global verfügbar - suboptimal - oder du übergibst sie irgendwie an die Stellen an denen du sie benötigst. (Das hat übrigens nichts mit jQuery zu tun.)

                          Kommentar

                          • #14
                            suboptimal hin oder her - auch das habe ich versucht.

                            aber was mir als Anfänger ganz sicher weiterhilft:

                            oder du übergibst sie irgendwie an die Stellen an denen du sie benötigst.

                            So präzise und ausführlich hätte es gar nicht sein müssen ! ! !

                            Kommentar

                            • #15
                              Zuletzt geändert von monolith; 15.11.2014, 15:53.
                              Zitat von halweks Beitrag anzeigen
                              suboptimal hin oder her - auch das habe ich versucht.
                              Code:
                              window.small = $img.attr('data-small'); // Den Pfad zu dem Bild ermitteln
window.medium = $img.attr('data-medium'); // Den Pfad zu dem Bild ermitteln
window.original= $img.attr('data-original'); // Den Pfad zu dem Bild ermitteln
                              Bitte lerne Grundlagen. Du merkst doch selber, dass du kaum vorwärts kommst wenn du permanent jede Kleinigkeit hier nachfragen musst. Ein überdeutlicher Indikator dafür, wie wichtig Grundlagenwissen ist.

                              So präzise und ausführlich hätte es gar nicht sein müssen ! ! !
                              Es ist nicht meine - bzw. unsere - Aufgabe zu erraten, wie die Schnittstelle zu dem Drittskript aussieht. Du kannst daher keine präziseren Angaben erwarten.

                              Kommentar

                              Vorherige 1 2 Weiter
                              Lädt...
                              X