Ankündigung

Einklappen
Keine Ankündigung bisher.

Bootstrap Modal mit individuellen Attributen

Einklappen

Neue Werbung 2019

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

  • Bootstrap Modal mit individuellen Attributen

    Hallo zusammen,

    ich zerbreche mir gerade den Kopf bei einem Vorhaben. Und zwar möchte ich mit nur einem einzigen Modal mehrere Funktionen nutzen, die dynamisch geladen werden. Aus irgend einem Grund werden jedoch die Attribute (data-mTitle und data-mParams) nicht geladen. Bei den Standard-Attributen wie href, id, class etc. hat es funktioniert.

    HTML-Code:
    <a href="#" data-toggle="modal" data-target="#myModal" data-mTitle="Titel 1" data-mParams="parameter1"><i class="fa fa-exclamation-triangle text-danger" data-toggle="tooltip" title="Kein Ergebnis"></i></a>
    <a href="#" data-toggle="modal" data-target="#myModal" data-mTitle="Titel 2" data-mParams="parameter2"><i class="fa fa-exclamation-triangle text-danger" data-toggle="tooltip" title="Kein Ergebnis"></i></a>

    HTML-Code:
     <div class="modal fade" id="myModal">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    <h4 class="modal-title">Titel wird geladen...</h4>
    </div>
    <div class="modal-body">
    Inhalt wird geladen...
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
    </div>
    </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    Code:
     $('#myModal').on('shown.bs.modal', function () {
      
              var $modal = $(this),
      modal_title = $(this).attr('data-mTitle'),
      modal_params = $(this).attr('data-mParams');
      
              if(typeof modal_title !== typeof undefined && modal_title !== false) {
                  title = modal_title;
              }
              else{
                  title = 'Titel XYZ';
                  }
      
              $.ajax({
                  cache: false,
                  type: 'POST',
                  url: '/ajax.php',
                  data: modal_params,
                  success: function(data) {
                      $modal.find('.modal-title').html(title);
      $modal.find('.modal-body').html(data);
                  }
              });
          })
    Wie gesagt, ich möchte für jede Funktion ungern ein neues Modal "anlegen". Würde es gerne bei einem belassen. Eine Idee, was ich da falsch mache?
    Gruß
    David

  • #2
    wenn du schon jQuery benutzt, warum dann nicht gleich richtig? für data-* Attribute gibt’s bei jQuery .data(). Wenn du dafür jQuery nicht nutzen willst, gibt’s immernoch das DOM: this.dataset.mTitle.

    Kommentar


    • #3
      Hallo Dormilich, danke für Antwort. Habe ich auch schon ausprobiert. Aber egal welche Methode ich auch wähle, die Attribute werden nicht gelesen...
      Gruß
      David

      Kommentar


      • #4
        1. data() von jQuery verwenden (wie bereits erwähnt)
        2. title mit dem keyword var an die Funktion binden
        3. Console öffnen und Breakpoints setzen, wo title ein Wert zugewiesen wird und außerdem im success Handler des AJAX-Requests

        Kommentar

        Lädt...
        X