Ankündigung

Einklappen
Keine Ankündigung bisher.

Variable an INPUT Feld in einem MODAL übergeben

Einklappen

Neue Werbung 2019

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

  • Variable an INPUT Feld in einem MODAL übergeben

    Hallo,

    habe hier irgendwo einen Fehler.

    PHP-Code:
     <td style="width: 152px; background: #800000"><font color="#F8F8FF"><a data-target="#myModal" data-toggle="modal" data-1="12345"><center>TEST</center></a></td>
     <
    td style="background: orange; width: 35px; padding: 5px; padding-top: 2px; padding-bottom: 2px">
      <
    center><b>3</b><br><span style="font-size: 7pt">14:21:05</span></center></td
    Code:
    <script>
    $('#myModal').on('show.bs.modal', function(event) {
      var val = $(event.relatedTarget).attr('data-1');
      $("#modal-data1").val($relTrgt.attr('data-1'));
    });
    </script>
    PHP-Code:
    <input id="modal-data1" type="text" 

  • #2
    $relTrgt ist nicht definiert. Du holst Dir doch den Wert in die Variable val. Wieso verwendest du die nicht?

    Debugging von JavaScript ist relativ simpel, Dein Browser hat Browser-Tools, dort hats einen Debugger drin. Da kannst du Dir schön die Werte anschauen und schauen was passiert. Beschäftige Dich damit, erspart viel Ärger.

    Übrigens:
    <font> ist veraltet
    <center> ist veraltet
    <b> ist veraltet
    Layout mit Tabellen ist veraltet

    Kommentar


    • #3
      Zitat von jonas3344 Beitrag anzeigen
      $relTrgt ist nicht definiert. Du holst Dir doch den Wert in die Variable val. Wieso verwendest du die nicht?

      Debugging von JavaScript ist relativ simpel, Dein Browser hat Browser-Tools, dort hats einen Debugger drin. Da kannst du Dir schön die Werte anschauen und schauen was passiert. Beschäftige Dich damit, erspart viel Ärger.

      Übrigens:
      <font> ist veraltet
      <center> ist veraltet
      <b> ist veraltet
      Layout mit Tabellen ist veraltet
      Hallo jonas3344, ich stimme Dir natürlich zu!

      Muss mir noch einiges durchlesen, da sind noch einige Themen offen ( CSS, Javascript, PHP, HTML, SQL usw.) .

      typischer Anfänger halt mit sehr viel Ungedult

      https://www.javascript-kurs.de/debug...er-konsole.htm

      Das Beispiel (Modal) habe ich aus dem Netz, habe noch überhaupt keine Ahnung von Javascript

      Kommentar


      • #4
        Habe mir ein neues Beispiel gesucht, geht auch nicht

        PHP-Code:
         <td style="width: 152px; background: #800000"><font color="#F8F8FF"><a data-target="#myModal" data-toggle="modal" data-myvalue="12345"><center>TEST</center></a></td>
         <
        td style="background: orange; width: 35px; padding: 5px; padding-top: 2px; padding-bottom: 2px">
          <
        center><b>3</b><br><span style="font-size: 7pt">14:21:05</span></center></td
        Code:
        <script>
        // data-* attributes to scan when populating modal values
        var ATTRIBUTES = ['myvalue'];
        
        $('[data-toggle="modal"]').on('click', function (e) {
          // convert target (e.g. the button) to jquery object
          var $target = $(e.target);
          // modal targeted by the button
          var modalSelector = $target.data('target');
        
          // iterate over each possible data-* attribute
          ATTRIBUTES.forEach(function (myvalue) {
            // retrieve the dom element corresponding to current attribute
            var $modalAttribute = $(modalSelector + ' #modal-' + myvalue);
            var dataValue = $target.data(myvalue);
        
            // if the attribute value is empty, $target.data() will return undefined.
            // In JS boolean expressions return operands and are not coerced into
            // booleans. That way is dataValue is undefined, the left part of the following
            // Boolean expression evaluate to false and the empty string will be returned
            $modalAttribute.text(dataValue || '');
          });
        });
        </script>

        PHP-Code:
        <input id="modal-myvalue" type="text" 

        Kommentar


        • #5
          Dein Weg ist halt der Falsche. Du suchst Dir irgendwas, irgendwo im Netz zusammen, baust das irgendwie ein und hoffst dann, dass es irgendwie funktioniert.

          Der richtige Weg wäre (und so tu ich es auch wenn ich was neues lerne):

          - Du verwendest ein Bootstrap-Modal, also gehst du auf www.getbootstrap.com, schaust Dir die Doku zum Modal an und schaust wie du den Event beim Öffnen eines Modals abfangen kannst
          - Du willst mit jQuery einen Feldwert auslesen und einsetzen, also gehst du auf www.jquery.com und schaust Dir an wie man etwas selektiert (https://api.jquery.com/category/selectors/) und dann wie man einen data-* Wert rausliest (https://api.jquery.com/attr/#attr-attributeName) und in ein input-Feld hineinsetzt (https://api.jquery.com/val/#val)

          Für das was du tun willst braucht es ein gewisses Grundverständnis der Materie. Mit Copy&Paste wirst du kaum glücklich.

          Und lern HTML-Basics, das ist der kleinste Teil vom Ganzen, aber Dein HTML-Snippet da ist grausig.

          Kommentar


          • #6
            Zitat von blackfire Beitrag anzeigen
            Das Beispiel (Modal) habe ich aus dem Netz, habe noch überhaupt keine Ahnung von Javascript
            Dann lasse solche Experimente mit Javascript erst ein mal sein.



            Kommentar


            • #7
              Zitat von jonas3344 Beitrag anzeigen
              $relTrgt ist nicht definiert. Du holst Dir doch den Wert in die Variable val. Wieso verwendest du die nicht?

              Debugging von JavaScript ist relativ simpel, Dein Browser hat Browser-Tools, dort hats einen Debugger drin. Da kannst du Dir schön die Werte anschauen und schauen was passiert. Beschäftige Dich damit, erspart viel Ärger.

              Übrigens:
              <font> ist veraltet
              <center> ist veraltet
              <b> ist veraltet
              Layout mit Tabellen ist veraltet
              So, Modal wird geöffnet, aber die Daten fehlen noch.(1)


              PHP-Code:
               <td style="width: 152px; background: #800000"><font color="#F8F8FF"><a a href="#myModal" data-toggle="modal" data-id="1" data-target="#myModal"><center>TEST</center></a></td>
               <
              td style="background: orange; width: 35px; padding: 5px; padding-top: 2px; padding-bottom: 2px">
                <
              center><b>3</b><br><span style="font-size: 7pt">14:21:05</span></center></td
              Code:
              <script>
              $('#myModal').on('shown.bs.modal', function () {
                 $('#myInput').focus()
                 $('#myInput').val(data-id)
              })
              </script>

              Kommentar


              • #8
                nichts gelernt und umgesetzt.

                Du hast immer noch veraltetes HTML.
                Darstellung wie Zentrieren usw. macht man mit CSS.

                Mit dir macht das hier keinen Spass, weil man keinen Fortschritt erkennt. du willst mit der Brechstange Dinge umsetzen die du nicht ansatzweise verstehst.

                Kommentar


                • #9
                  Zitat von protestix Beitrag anzeigen
                  nichts gelernt und umgesetzt.

                  Du hast immer noch veraltetes HTML.
                  Darstellung wie Zentrieren usw. macht man mit CSS.

                  Mit dir macht das hier keinen Spass, weil man keinen Fortschritt erkennt. du willst mit der Brechstange Dinge umsetzen die du nicht ansatzweise verstehst.
                  Hallo,

                  werde es nach und nach umsetzen, keine Sorge! Bin aber noch mit dem Modal zugange.
                  Ein altes Haus wird auch nicht sofort abgerissen oder?

                  Kommentar


                  • #10
                    Du würdest Dich allerdings hüten auf ein altes Haus noch einen Stock draufzubauen ...

                    Bau eine saubere Basis, dann kann man weiterschauen.

                    Kommentar


                    • #11
                      blackfire

                      Hier habe ich Dir mal eine halbwegs saubere Basis aus deinen spärlichen Angaben erstellt, jetzt erkär du mal was du genau machen willst.

                      HTML-Code:
                      <!DOCTYPE html>
                      <html lang=de>
                      <head>
                        <title>Test</title>
                        <meta charset=utf-8>
                        <meta name=viewport content="width=device-width, initial-scale=1">
                        <link rel=stylesheet href=https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css>
                        <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js></script>
                        <script src=https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js></script>
                        <style>
                          td:first-child{width: 152px; background: #800000; cursor:pointer;  color:#F8F8FF;text-align:center}
                          td:nth-child(2){background: orange; width: 35px; padding: 5px; padding-top: 2px; padding-bottom: 2px;text-align:center}
                          td:nth-child(2) span{font-size: 7pt}
                        </style>
                      <div class=container>
                        <div class="modal fade" id=myModal role=dialog>
                          <div class=modal-dialog>
                            <div class=modal-content>
                              <div class=modal-header>
                                <h4 class=modal-title>myModal</h4>
                                <button type=button class=close data-dismiss=modal>&times;</button>
                              </div>
                              <div class=modal-body>
                                <p>warum auch immer</p>
                                <input id=modal-myvalue type=text>
                              </div>
                              <div class=modal-footer>
                                <button type=button class="btn btn-default" data-dismiss=modal>Close</button>
                              </div>
                            </div>
                          </div>
                        </div>
                        <table>
                          <tr>
                            <td data-target=#myModal data-toggle=modal data-myvalue=12345>TEST
                            <td><b>3</b><br><span>14:21:05</span>
                        </table>
                      </div>
                      <script>
                          $("[data-target='#myModal']").click(function () {
                            $('#modal-myvalue').val($(this).data('myvalue'))
                          })
                      </script>

                      Kommentar


                      • #12
                        Zitat von kaminbausatz Beitrag anzeigen
                        blackfire

                        Hier habe ich Dir mal eine halbwegs saubere Basis aus deinen spärlichen Angaben erstellt, jetzt erkär du mal was du genau machen willst.

                        HTML-Code:
                        <!DOCTYPE html>
                        <html lang=de>
                        <head>
                        <title>Test</title>
                        <meta charset=utf-8>
                        <meta name=viewport content="width=device-width, initial-scale=1">
                        <link rel=stylesheet href=https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css>
                        <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js></script>
                        <script src=https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js></script>
                        <style>
                        td:first-child{width: 152px; background: #800000; cursor:pointer; color:#F8F8FF;text-align:center}
                        td:nth-child(2){background: orange; width: 35px; padding: 5px; padding-top: 2px; padding-bottom: 2px;text-align:center}
                        td:nth-child(2) span{font-size: 7pt}
                        </style>
                        <div class=container>
                        <div class="modal fade" id=myModal role=dialog>
                        <div class=modal-dialog>
                        <div class=modal-content>
                        <div class=modal-header>
                        <h4 class=modal-title>myModal</h4>
                        <button type=button class=close data-dismiss=modal>&times;</button>
                        </div>
                        <div class=modal-body>
                        <p>warum auch immer</p>
                        <input id=modal-myvalue type=text>
                        </div>
                        <div class=modal-footer>
                        <button type=button class="btn btn-default" data-dismiss=modal>Close</button>
                        </div>
                        </div>
                        </div>
                        </div>
                        <table>
                        <tr>
                        <td data-target=#myModal data-toggle=modal data-myvalue=12345>TEST
                        <td><b>3</b><br><span>14:21:05</span>
                        </table>
                        </div>
                        <script>
                        $("[data-target='#myModal']").click(function () {
                        $('#modal-myvalue').val($(this).data('myvalue'))
                        })
                        </script>
                        Hallo,
                        vielen Dank, sieht sehr übersichtlich aus!
                        Muss jetzt mal mehr lesen und ausprobieren, so das die Grundlagen sitzen.


                        Vielen Dank für Eure Hife hier im Forum!

                        Kommentar

                        Lädt...
                        X