I have little problem with Bootstrap modal. I embedded HTML code in PHP. For some reasons I want couple of modals in page.
<?php
//Looping modals...
for($i = 0; $i < 5; $i++){
echo '<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">';
echo 'Launch demo modal';
echo '</button>';
echo '<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">';
echo '<div class="modal-dialog" role="document">';
echo '<div class="modal-content">';
echo '<div class="modal-header">';
echo '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>';
echo '<h4 class="modal-title" id="myModalLabel">';
echo $i; //Title goes here.
echo '</h4>';
echo '</div>';
echo '<div class="modal-body">';
echo '...'; //Content goes here.
echo ' </div>';
echo '<div class="modal-footer">';
echo '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
echo '<button type="button" class="btn btn-primary">Save changes</button>';
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>';
}
?>
Loop works fine but I can't update title and content I my modal. All content and title data stays the same.
I tried this:
$(document).ready(function(){
$('#myModal').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
});
Well...I'm not sure how to use this correctly.
I mean I don't know hot to use jQuery in PHP code. I tried saving jQuery code in script.js file and including in my modal:
echo '<script type = "text/javascript">';
include ('script.js');
echo '</script>';
Anyway, that doesn't work.
So, how to change modal content dynamically?
You need to change the modal ID every time you loop - so add the $i var in the modal ID for example. You must have unique IDs in HTML or jQuery / Bootstrap modal won't find the correct modal.
Change
echo '<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal'.$i.'">';
and
echo '<div class="modal fade" id="myModal'.$i.'" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">';
Alternately, you might rather try varying modal content based on a trigger button.
Also - just a style note: You can have multi-line echo statements, which might make your code a little easier to read. Or close the PHP tage and re-open when done with HTML:
echo '
<div ... >
<div ... >
</div>
</div>
';
or (instead of echo):
<?php
for ($i ... ) {
?>
<div ... >
<div ... >
</div>
</div>
<?php
} //ending for loop
?>
Related
I will insert new boostrap card inside my page. My problem, I have not success to include a new card inside my content.
When i click on insert, the card is not displayed
Below the code
display a new boostrap card if record exist
<div class="row">
<button type="button" class="btn btn-primary" aria-label="Insert" id="insert">
<span aria-hidden="true">Insert</span>
</button>
</div>
<div class="row">
<ul class="row list-unstyled" id="list">
<?php
$i = 0;
while ($QoptionValue->fetch()) {
.....
?>
<li class="col-md-4" id="element'<?php echo $i; ?>">
<div class="card">
<h4 class="card-header">Card title <a class="close" href="#">×</a></h4>
<div class="card-body">
<div class="card-text">
<div><?php ..... ?></div>
</div>
</div>
</li>
<?php
$i++;
}
?>
</ul>
</div>
Display a new card or first card inside the content
<?php
$card = '<li class="col-md-4" id="element0">';
$card .= '<div class="card">';
$card .= '<h4 class="card-header">Card title <a class="close" href="#">Remove</a></h4>';
$card .= '<div class="card-body">';
$card .= '<div class="card-text">';
$card .= '<div>';
for ($l=0, $n=count($languages); $l<$n; $l++) {
$card .= Language->getImage($languages[$l]['code']) . ' ' . HTML::inputField('option_value[' . $i . '][option_value_description][name][' . $l . ']', $options_name) . '<br />';
$card .= HTML::hiddenField('option_value[' . $i . '][option_value_description][language_id][' . $l . ']', $options_name);
}
$card .= '</div>';
$card .= '<div>';
$card .= HTML::inputField('option_value[' . $i . '][sort_order]', $QoptionValue->value('sort_order'), 'id="sort_order[' . $i . ']"');
$card .= '</div>';
$card .= '<div>';
$card .= '</div>';
$card .= '</div>';
$card .= '</li>';
?>
<script>
$('#insert').click(function(){
$( "ul#list" ).append( "<?php echo $card; ?>" );
});
</script>
<script type="text/javascript">
$('.close').click(function(){
var $target = $(this).parents('li');
$target.hide('slow', function(){ $target.remove(); });
})
</script>
console error
it seems on this line has a problem :
$( "ul#list" ).append(""<li class=\"col-md-4\" id=\"element0\"><div class=\"row\"><div class=\"col-md-12\"><div class=\"card\"><h4 class=\"card-header\"><a class=\"close\" href=\"#\">Supprimer<\/a><\/h4><div class=\"card-body\">Nom de la valeur<div><img src=\"http:\/\/localhost\/test_option\/shop\/sources\/third_party\/flag-icon-css\/flags\/4x3\/gb.svg\" alt=\"Anglais\" title=\"Anglais\" width=\"16\" height=\"12\" \/> <input type=\"text\" name=\"option_value[0][option_value_description][name][0]\" class=\"form-control\" \/><br \/><input type=\"hidden\" name=\"option_value[0][option_value_description][language_id][0]\" \/><img src=\"http:\/\/localhost\/test_option\/shop\/sources\/third_party\/flag-icon-css\/flags\/4x3\/fr.svg\" alt=\"Francais\" title=\"Francais\" width=\"16\" height=\"12\" \/> <input type=\"text\" name=\"option_value[0][option_value_description][name][1]\" class=\"form-control\" \/><br \/><input type=\"hidden\" name=\"option_value[0][option_value_description][language_id][1]\" \/><\/div><div class=\"row\"><span class=\"col-md-4\">Ordre de tri<\/span><\/div><\/div><\/div><\/div><\/div><\/li>"");
Uncaught SyntaxError: missing ) after argument list
It's good practice to pass any PHP variable to javascript using json_encode(). Using json_encode() you'll always get a properly formatted JavaScript object with the quotes escaped.
<script>
$('#insert').click(function(){
$( "ul#list" ).append(<?php echo json_encode($card); ?>);
});
</script>
I have notifications on an $_SESSION array:
f ex.
11=>'1234-Client A:Message is coming, Ok:0'
14=>'3456-Client B:Message is coming, Not Ok:3'
aso.
I loop through these to print it out in dismissible bootstrap alerts.
The last indicator in the message is deciding what alert to use.
When I close a notification I want to close it AND update the $_SESSION array with '...:9' to indicate that this is closed and will not show the next time the page is reloaded.
I pass the Id to the JQuery, since this can differ from record to record, but how can I use this on the same PHP-page to change the $_SESSION array for the correct record Id?
I am trying with this code:
invoices.php:
...
$id = $_POST["id"];
echo 'Id: ' . $id . '<br />';
...
<?php if(isset($_SESSION['UploadMessage'])) :
foreach($_SESSION['UploadMessage'] as $key => $val):
$pos = strrpos($val, ":");
$alert = substr($val, $pos+1);
$val = substr($val, 0, $pos);
echo $val . ' ' . $alert . '<br />'; //'\n'
$message = $val; ?>
<?php if($alert == 0) : ?>
<div class="alert alert-success alert-dismissible" id="<?=$key;?>" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true" id="<?=$key;?>">×</span></button>
<strong>Ok! </strong><?=$message?>
X
</div>
<?php endif; ?>
<?php if($alert == 1) : ?>
<div class="alert alert-info alert-dismissible" id="<?=$key;?>" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true" id="<?=$key;?>">×</span></button>
<strong>Info! </strong><?=$message?>
</div>
<?php endif; ?>
<?php if($alert == 2) : ?>
<div class="alert alert-warning alert-dismissible" id="<?=$key;?>" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true" id="<?=$key;?>">×</span></button>
<strong>Warning! </strong><?=$message?>
</div>
<?php endif; ?>
<?php if($alert == 3) : ?>
<div class="alert alert-danger alert-dismissible" id="<?=$key;?>" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true" id="<?=$key;?>">×</span></button>
<strong>Åtgärda! </strong><?=$message?>
</div>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
...
<!-- JavaScript -->
<script>
$('button.close').on('click', function (obj) {
var id = obj.target.id;
console.log("Close "+id);
$.post('invoices.php', { 'id': 'id'});
});
</script>
I know that PHP has already loaded the document when the foreach-loop
is running, but how can I pass the value of the array-Id when I click the
close button on each notification and change the array value for this?
Can anyone help a newbie out?
I have tried changing the javascript into this, but it doesn't work.
I get the correct id in the alert box, but no update of $_SESSION is made when I reload the page.
// $.post('invoices_ajax.php', { 'id': 'id'});
$.ajax({
type: "POST",
url: 'invoices_ajax.php',
data: ({id:id}),
success: function(data) {
alert(data);
}
});
});
In my Ajax file I have this code:
<?php
$id=$_POST['id'];
echo $id;
if(isset($_SESSION['UploadMessage'])) {
foreach($_SESSION['UploadMessage'] as $k => &$v) {
echo $k . ' ' . $v . '<br />';
if($k == $id) {
$pos = strrpos($v, ":");
$v = substr($v, 0, $pos).':9';
echo $v . '<br />';
}
}
}
?>
I am using the below mentioned code.
<a href='#' onClick='$(\"div#reboot-modal\").modal();' >
calling the model code:
printf( '<div class="modal" id="reboot-modal" style="display: none; color: black;">' );
printf( '<h1>Drive Info</h1>' );
printf('<ul style="list-style-type: none;padding: 8px;margin-top: 0px;margin-bottom: 0px;">');
printf( '<li><b>Link Speed:</b></li>' );
printf( '<li><b>Serial Number:</b></li> );
printf( '<li><b>Model Number:</b></li>' );
printf( '<li><b>Boot Loader:</b></li>' );
printf( '<li><b>LightSwitch Rev:</b></li>' );
printf( '<li><b>TWIDL Version:</b></li>' );
printf( '</ul>');
printf( '</a>' );
printf( '</div>' );
Onclick Reboot-modal time, I need to pass six values dynamically and when the dialog box call that time, this values needs to be printed here.
Any solution is appreciable.Thanks in Advance.
Its better you can loop #reboot-modal-{id} for different dynamic modal and also use proper bootstrap classes.
<?php foreach($users as $user): ?>
Click <?php echo $user['id']; ?> Here....
<?php endforeach; ?>
<div class="modal fade" id="reboot-modal" style="display: none; color: black;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h4 class="modal-title">Drive Info</h4>
</div>
<div class="modal-body">
<ul class="list-unstyled">
<li><b>Link Speed:</b> <span id='rb-link'></span></li>
<li><b>Serial Number:</b> <span id='rb-serial'></span></li>
<li><b>Model Number:</b> <span id='rb-model'></span></li>
<li><b>Boot Loader:</b> <span id='rb-loader'></span></li>
<li><b>LightSwitch Rev:</b> <span id='rb-light'></span></li>
<li><b>TWIDL Version:</b> <span id='rb-twidl'></span></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$('#reboot-modal').on('show.bs.modal', function(e) {
//THIS YOUR DATABASE ID COMES FROM CURRNET CLICKED LINK
var dbId = $(e.relatedTarget).attr('data-dbid');
$.ajax({
cache: false,
type: 'POST',
url: 'newfile.php',
data: {"dbId":dbId},
dataType: "json",
success: function(data) {
$('#rb-link').html(data.rb_link);
$('#rb-serial').html(data.rb_serial);
$('#rb-model').html(data.rb_model);
$('#rb-loader').html(data.rb_loader);
$('#rb-light').html(data.rb_light);
$('#rb-twidl').html(data.rb_twidl);
}
});
});
</script>
NEW PHP FILE: (newfile.php)
// NEW PHP FILE FOR AJAX REQUEST AND RESPONSE
include('db_connection.php');
$sql = mysqli_query("select * from users where id=".$dbId);
$rows = array();
while($row = mysqli_fetch_assoc($sql)) {
$rows['rb_link'] = $row['db_link'];
$rows['rb_serial'] = $row['db_serial'];
$rows['rb_model'] = $row['db_model'];
$rows['rb_loader'] = $row['db_loader'];
$rows['rb_light'] = $row['db_light'];
$rows['rb_twidl'] = $row['db_twidl'];
}
echo json_encode($rows);
https://jsfiddle.net/t5umn3ha/38/
Try this:
here $result is result from database:
<?php foreach($result as $value){?>
echo '<a href='#' onClick='$(\"div#reboot-modal\<?php echo $value['id']; ?>").modal();' >'
<?php }?>
I have this code, I want to click on the Link that's in the <span> and then that should change the innerHTML of exactly this <span>.
<span id="button_report_<?php echo $row->id ?>_spam"><a class="btn red btn-xs" onlick="changeSpamButton<?php echo $row->id ?>()" target="report_iframe_<?php echo $row->id ?>" href="resource/report.php?id=<?php echo $row->id ?>&ttype=currency&type=spam">Spam</a></span>
<span id="button_report_<?php echo $row->id ?>_na"><a class="btn yellow btn-xs" onlick="changeNAButton<?php echo $row->id ?>()" target="report_iframe_<?php echo $row->id ?>" href="resource/report.php?id=<?php echo $row->id ?>&ttype=currency&type=na">Unavailability</a></span>
<script type="text/javascript">
function changeSpamButton<?php echo $row->id ?>() {
document.getElementById("button_report_<?php echo $row->id ?>_spam").innerHTML = '<a class="btn default btn-xs">Spam</a>';
}
function changeNAButton<?php echo $row->id ?>() {
document.getElementById("button_report_<?php echo $row->id ?>_na").innerHTML = '<a class="btn default btn-xs">Unavailability</a>';
}
</script>
Any help is greatly appreciated. Thank you!
As I said, you'd have to change onlick to onclick. But to give you an idea how to simplify the event handling:
<span data-type="spam">
<a onclick="changeButton(this.parentNode)">Spam</a>
</span>
<span data-type="na">
<a onclick="changeButton(this.parentNode)">Unavailability</a>
</span>
<script type="text/javascript">
var content = {
'spam': '<a class="btn default btn-xs">Spam</a>',
'na': '<a class="btn default btn-xs">Unavailability</a>'
};
function changeButton(element) {
element.innerHTML = content[element.getAttribute('data-type')];
}
</script>
This makes your code easier to read, understand and maintain.
Reading material: Introduction to event handling - quirksmode.org
I've been trying to dynamically create a modal view in a table.
The data used to create the table is comming from a sql database.
Now my problem:
Whenever I click on a button called "Details" the modal view is opening and contains the data it should.
However, when I try to close the view with the "Close"- Button or the X in the top right corner the modal view will close for a second and reopen on its own.
The background will get darker after I do one of the above mentioned operations.
Here comes the tricky part. Whenever I close the view with the escape button on my keyboard, it'll close as it should and I'll get back to my previous view.
<?php
mysql_connect("localhost", "****" , "****");
mysql_select_db("hallo");
$sql= "SELECT * FROM erfassung WHERE Status='Abgeschlossen'";
$query=mysql_query($sql) or die (mysql_error());
while($row = mysql_fetch_assoc($query)) {
$thisId = $row['id'];
$thisModalId = 'modal'.$thisId;
$thisModalIdHref = '#'.$thisModalId;
$thisFormDoneId = $row['id'].'FormDoneId';
// Create table row
echo "<tr onclick=\"input\" data-toggle=\"modal\" href='$thisModalIdHref'>";
echo "<td>";
echo $row['Name'];
echo "<td>";
echo $row['Betreff'];
echo "<td>";
echo "<button class=\"btn btn-primary btn-lg\" data-toggle=\"modal\" data-target='$thisModalIdHref'>";
echo "Details";
echo "</button>";
echo"<div class=\"modal fade\" id='$thisModalId' tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\" aria-hidden=\"true\">";
echo "<div class=\"modal-dialog\">";
echo "<div class=\"modal-content\">";
echo "<div class=\"modal-header\">";
echo "<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button>";
echo "<h4 class=\"modal-title\" id=\"myModalLabel\">Weitere Information </h4>";
echo "</div>";
echo"<div class=\"modal-body\">";
echo "<dl class=\"dl-horizontal\">";
echo "<dt>Bereich</dt>";
echo "<dd>" .$row['Bereich']. "</dd>";
echo "</dl>";
echo"</div>";
echo"<div class=\"modal-footer\">";
echo "<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>";
echo "<button type=\"button\" class=\"btn btn-primary\">Save changes</button>";
echo"</div>";
echo"</div>"; //<!-- /.modal-content -->
echo"</div>";//<!-- /.modal-dialog -->
echo"</div>";//<!-- /.modal -->
echo "</td>";
echo "</tr>";
}
?>
For clarification:
If the $thisModalId is changed to the previous "MyModal" it works, but the button will, as it's supposed to, open the same text.
If you need any more source code or something else, I'd be more than happy to post it.
Thanks in advance for your help guys.
Best regards.
This is probably caused by the fact that your modal div is defined inside the element (tr) that the onclick handler is defined on. If the close button handler does not consume the click event, it will bubble to the containing elements all the way up (div, div, div, div, td, tr). When it gets to the tr, the onclick handler will execute and the modal will open again.
Obviously, you can solve this by not having your modal div inside your table structure, which doesn't really have a function anyway. This means that you will have to perform more than one separate loop, because the divs have to be all the way outside the table. This does not have to mean that your code will get messy if you take the advice of some of the commenters above and separate your PHP from your HTML a little bit.
Try something like this:
<?php
// Collect data
mysql_connect("localhost", "****" , "****");
mysql_select_db("hallo");
$sql= "SELECT * FROM erfassung WHERE Status='Abgeschlossen'";
$query=mysql_query($sql) or die (mysql_error());
$modals = array();
while($row = mysql_fetch_assoc($query)) {
$modals[] = array(
'id' => 'modal' . $row['id'],
'href' => '#modal' . $row['id'],
'FormDoneId' => $row['id'] . 'FormDoneId',
'Name' => $row['Name'],
'Betreff' => $row['Betreff'],
'Bereich' => $row['Bereich'],
);
}
?>
<table> <!-- Or something -->
<?php
foreach ($modals as $modal) {
// Create table rows
?>
<tr onclick="input" data-toggle="modal" href="<?php echo $modal['href'] ?>">
<td>
<?php echo $modal['Name'] ?>
<td>
<?php echo $modal['Betreff'] ?>
<td>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="<?php echo $modal['href'] ?>">
Details
</button>
</td>
</tr>
<?php
}
?>
</table>
<?php
foreach ($modals as $modal) {
// Create modal divs
?>
<div class="modal fade" id='<?php echo $modal['id'] ?>' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Weitere Information </h4>
</div>
<div class="modal-body">
<dl class="dl-horizontal">
<dt>Bereich</dt>
<dd><?php echo $modal['Bereich'] ?></dd>
</dl>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div> //<!-- /.modal-content -->
</div>//<!-- /.modal-dialog -->
</div>//<!-- /.modal -->
<?php
}