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.
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?
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); } }); })
Kommentar