wassereimer wassereimer - 2 months ago 13
jQuery Question

Bootstrap Modal Replace Placeholder

I´ve already searched a while for this but i couldn´t figure out how to get it work. I am new to jQuery/AJAX and Bootstrap and i hope it is not to easy....

I have this Button in a loop

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#info" data-added="<?php if( strtotime($ecp_code->added) > strtotime('2000-01-01 01:00:00') ) { echo date('d.m.y H:i', strtotime($ecp_code->added)); } else { echo "-";} ?>" data-modified="<?php if( strtotime($ecp_code->changed) > strtotime('2000-01-01 01:00:00') ) { echo date('d.m.y H:i', strtotime($ecp_code->changed)); } else { echo "-";} ?>"><i class="fa fa-info" style="width:14px;"></i></button>


That´s the Modal

<div class="modal fade" id="info" tabindex="-1" role="dialog" aria-labelledby="infoLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
Informations
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
Added: PLACEHOLDER
Modified: PLACEHOLDER2
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>


The Script:

<script>
$(document).ready(function () {
$('#info').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var added = button.data('added');
var modified = button.data('modified');

var content = 'Added: ' + added + ' Modified: ' + modified + '';

var modal = $(this);
modal.find('.modal-body').text(content);
});
});
</script>


That´s working fine. It replaces the whole content from the modal-body.




But now i want that just a single word is replaced. PLACEHOLDER with the var added and PLACEHOLDER2 with the var modified. (It´s just an example)

<script>
$(document).ready(function () {
$('#info').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var added = button.data('added');
var modified = button.data('modified');
var modal = $(this);
var res = replace("PLACEHOLDER", (added));
modal.find('.modal-body').text(res);
});
});
</script>


Something like this is not working.

One more Question: Do you know good resources where i can lern jQuery and AJAX?

Answer

Insert two new elements in the modal-body

<div class="modal-body">
    <label>Added:</label>
    <div id="Added"></div>
    <label>Modified:</label>    
    <div id="Modified"></div>
</div>

modal.find('.modal-body #Added').text(your content added);

And:

modal.find('.modal-body #Modified').text(your content modified);

If the content you are adding to those divs contains html tags you can better use .html() in place of .text()