Develop Reference

How to use bootstrap dismissible alerts in html/php/JQuery and change $_SESSION array

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 />';
}
}
}
?>

Bootstrap popup modal with Get php function

please help me.. i am having a trouble with the popup modal.. how to get a certain data/value and display it to the modal.. I dynamically fetch a data from database and display it to html form, when i clicked one of the displayed item the modal popup should show containing the said description. My problem is that when I clicked one of the items it popup the modal but it contains all the data that is not related to the item that i Clicked.
Example i fetched form database this 2 items below (see pictures below),
when i clicked one of them the popup modal should show containing the said value like below
but i am having a trouble when i clicked one of them it show all the description with the other item like below
my code is here
<script type="text/javascript">
$(function () {
$("#btnShow").click(function(){
$.ajax({
url: 'prologue.php?story=$row[title]',
method: 'get',
success: function(data) {
$(".modal-body").html(data);
},
error:function(xhr,code,text){
alert("error occoured : "+text);
}
});
$('#demoModal').modal('show');
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Compiled Story</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="../js/js/bootstrap.min.js"></script>
<link href="../js/js/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="shortcut icon" href="../logo.png">
</head>
<body>
<table class="story-albums-lib" style="margin-left: 250px;">
<?php
$con=mysqli_connect("localhost","root","","scenezone");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = "SELECT * FROM create_story
WHERE title IN (SELECT story FROM story_chapter WHERE status = '1');";
$result=mysqli_query($con,$sql);
// Fetch all
$i = 0;
while($row = mysqli_fetch_array($result)){
if ($i % 5 == 0) {
echo "<tr>";
}
echo "<td><a href='prologue.php?story=$row[title]'><img src='../stories/" .$row['image']."' alt='Image' id='btnShow' style='width: 200px; height: 250px; border-radius: 8px;'></a>
<br><p id='btnShow' style='margin-left:50px;'>".$row["title"]."</p>
</td>";
if ($i % 5 == 4) {
echo "</tr>";
}
$i++;
}
// Free result set
mysqli_free_result($result);
mysqli_close($con);
?>
</div>
<!-- Modal -->
<div class="modal fade" id="demoModal" 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"><?php echo $row ['email'];?></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btnchapterlist" class="btn btn-primary">Start Reading</button>
</div>
</div>
</div>
</div>
</table>
</div>
</body>
</html>
here is my prologue.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "scenezone";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT * FROM create_story
WHERE title IN (SELECT story FROM story_chapter WHERE status = '1');";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo "<center>";
echo "<tr>";
echo "<td><img src='../stories/".$row['image']."' alt='Image' class='img-responsive;' style='width: 200px; height: 250px;'>
<br><p> Title: ".$row["title"]."
<br>Genre : ".$row["genre"]."
<br>Author : ".$row["pen_name"]."
<br>Prologue : ".$row["description"]."</p>
</td>";
echo "</tr>";
echo "</center>";
}
} else {
echo "0 results";
}
$conn->close();
?>

Did you have tried to use a foreach() or a for() loop to populate your modal?
Consider also to use an $.each() inside the success function of your ajax request.
EDIT: As requested here is how i will try to fetch the needed data, I will not include the prepared statements, this is not a problem during the develop of your page, but you need to implement them in the release version for security reason.
<?php
$con=mysqli_connect("localhost","root","","scenezone");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$sql = "SELECT * FROM create_story
WHERE title IN (SELECT story FROM story_chapter WHERE status = '1');";
$result=mysqli_query($con,$sql);
// Fetch all
foreach($result as $row):
$title = $row[title];
$email = $row['email'];
$image = $row['image'];
?>
<!DOCTYPE html>
<html>
<head>
<title>Compiled Story</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="../js/js/bootstrap.min.js"></script>
<link href="../js/js/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="shortcut icon" href="../logo.png">
</head>
<body>
<table class="story-albums-lib" style="margin-left: 250px;">
</div>
<!-- Modal -->
<div class="modal fade" id="demoModal" 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"><?php echo $email; ?></h4>
</div>
<div class="modal-body">
<tr>
<td><a href='prologue.php?story=<? echo $title; ?>'>
<img src='../stories/" .<? echo $image; ?>."' alt='Image' id='btnShow' style='width: 200px; height: 250px; border-radius: 8px;'></a>
<br><p id='btnShow' style='margin-left:50px;'>".<? echo $title ?>."</p>
</td>
</tr>
<? endforeach;
mysqli_free_result($result);
mysqli_close($con);?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btnchapterlist" class="btn btn-primary">Start Reading</button>
</div>
</div>
</div>
</div>
</table>
</div>
</body>
</html>

How to execute jquery inside category.php which should work for each individual post in category wordpress

I am trying to execute a onclick event on div of each post in category with the help of jquery. How can I execute it.
I assign the value of div id dynamically as answer_postid
for example post 1 has post id 01 so its div id="answer_01"
and post 2nd has post id 02, so its div id="answer_02"
Now I want to hide all the divs of each post inside category when document is completely loaded
and also want to execute onclick event on a element a with id viewanswer_postid
different posts contains <a> with different id as viewanswer_o1, viewanswer_02......
I tried by putting script in content.php
doesn't work.
<script>
$(document).ready(function() {
$("div#answer_<?php echo get_the_ID();?>").hide();
});
</script>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header page-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-meta text-muted">
<?php ipt_kb_posted_on(); ?>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<div class="entry-content">
<?php the_content(); ?>
<table class="mcqtable">
<tbody>
<tr>
<td class="index"><?php echo '<a id="index_A_'.get_the_ID ().'" href="javascript: void 0;">A.</a>';?>
<td class="option"><?php echo get_post_meta($post->ID, 'option_A', true); ?></td>
<td class="index"><?php echo '<a id="index_B_'.get_the_ID ().'" href="javascript: void 0;">B.</a>';?>
<td class="option"><?php echo get_post_meta($post->ID, 'option_B', true); ?></td>
</tr>
<tr>
<td class="index"><?php echo '<a id="index_C_'.get_the_ID ().'" href="javascript: void 0;">C.</a>';?>
<td class="option"><?php echo get_post_meta($post->ID, 'option_C', true); ?></td>
<td class="index"><?php echo '<a id="index_D_'.get_the_ID ().'" href="javascript: void 0;">D.</a>';?>
<td class="option"><?php echo get_post_meta($post->ID, 'option_D', true); ?></td>
</tr>
</tbody>
</table>
<a class="view_answer_<?php echo get_the_ID(); ?>" href="javascript: void 0;">View Answer</a>
<div id="answer_<?php echo get_the_ID();?>">
<?php echo 'Correct Answer is: '.get_post_meta($post->ID, 'option_correct', true); ?>
</div>
<?php
wp_link_pages( array(
'before' => __( '<p class="pagination-p">Pages:</p>', 'ipt_kb' ) . '<ul class="pagination">',
'after' => '</ul><div class="clearfix"></div>',
) );
?>
</div><!-- .entry-content -->
<footer class="entry-meta text-muted well well-sm">
<?php
/* translators: used between list items, there is a space after the comma */
$category_list = get_the_category_list( __( ', ', 'ipt_kb' ) );
/* translators: used between list items, there is a space after the comma */
$tag_list = get_the_tag_list( '', __( ', ', 'ipt_kb' ) );
if ( ! ipt_kb_categorized_blog() ) {
// This blog only has 1 category so we just need to worry about tags in the meta text
if ( '' != $tag_list ) {
$meta_text = __( 'This entry was tagged <i class="glyphicon glyphicon-tags"></i> %2$s. <br />Bookmark the <i class="glyphicon glyphicon-bookmark"></i> permalink.', 'ipt_kb' );
} else {
$meta_text = __( 'Bookmark the <i class="glyphicon glyphicon-bookmark"></i> permalink.', 'ipt_kb' );
}
} else {
// But this blog has loads of categories so we should probably display them here
if ( '' != $tag_list ) {
$meta_text = __( 'This entry was posted in <i class="glyphicon glyphicon-folder-open"></i> %1$s and tagged <i class="glyphicon glyphicon-tags"></i> %2$s. <br />Bookmark the <i class="glyphicon glyphicon-bookmark"></i> permalink.', 'ipt_kb' );
} else {
$meta_text = __( 'This entry was posted in <i class="glyphicon glyphicon-folder-open"></i> %1$s. <br />Bookmark the <i class="glyphicon glyphicon-bookmark"></i> permalink.', 'ipt_kb' );
}
} // end check for categories on this blog
printf(
$meta_text,
$category_list,
$tag_list,
get_permalink()
);
?>
<?php edit_post_link( __( 'Edit', 'ipt_kb' ), '<span class="edit-link"><i class="glyphicon glyphicon-edit"></i> ', '</span>' ); ?>
</footer><!-- .entry-meta -->

Is the jQuery code inside the loop?
That's not a very good technique.
Why not assign a class="answer" to each answer div and then use
$(document).ready(function() {
$('div.answer').each(function(){
$(this).hide();
});
});
outside of the loop?
Also, it would be more helpful if you posted one plain HTML example, to see exactly what's wrong (every theme has a different structure, so saying content.php isn't much helpful). Hope this helps.

Replace HTML content via jQuery AJAX request

I am trying to create an AJAX filter using jQuery and PHP. When my user selects an ingredient from the dropdown I look to see in my database if a recipe exists with that ingredient and if the user created the recipe. This query works perfectly and allows me to loop through and create HTML for each recipe. I want to update the HTML via AJAX. At the moment I have this for my AJAX:
$(document).ready(function() {
$('#filterButton').click(function(e) {
e.preventDefault();
// When the filter button is clicked, grab the ingredient ID and the cuisine ID
var mainIngred = $('#sel1').val();
var cuisine = $('#cuisine').val();
var userID = $('#userIDHidden').val();
var data = {
"ingredID" : mainIngred,
"tagID" : cuisine,
"userID" : userID
}
var filterajaxurl = '/recipe-project/filter-ajax.php';
$.ajax({
url: filterajaxurl,
type: "POST",
data: data,
success:function(data) {
$("#cookbook-recipe").html(data);
}
});
});
});
This is the PHP script I call, when it's called I want to replace the default data in the div with the ID cookbook-recipe with the HTML below after the PHP has looped through and got each recipe.
include_once('classes/class-database-functions.php');
$db_functions = new Database_Functions();
$ajax_recipes = $db_functions->ajax_filter_search(23,6);
$recipes_array = array();
foreach ($ajax_recipes as $ajax_recipe) {
$search_recipes = $db_functions->get_single_recipe($ajax_recipe);
$rows = mysqli_fetch_array($search_recipes, MYSQL_ASSOC);
array_push($recipes_array,$rows);
} ?>
<?php
if (isset($recipes_array) ) {
foreach ( $recipes_array as $single_recipe ) { ?>
<div class="col-md-4 portfolio-item">
<a href="single-recipe.php?id=<?php echo $single_recipe['recipe_id'];?>">
<?php if ( $single_recipe['recipe_image'] == '' ) { ?>
<img class="img-responsive" src="http://placehold.it/300x200" alt="">
<?php } else { ?>
<img class="img-responsive" src="<?php echo $single_recipe['recipe_image']; ?>" alt="">
<?php } ?>
</a>
<h4>
<a href="#">
<?php echo $single_recipe['recipe_name']; ?>
</a>
</h4>
</div>
<?php } } else { ?>
<div class="col-md-4 portfolio-item">
<h4>Please Add Some Recipes</h4>
</div>
<?php } ?>
Below is my default HTML
<button id="filterButton" class="btn btn-lg active" role="button">Filter Recipes</button>
<div id="cookbook-recipes" class="col-md-9">
<?php
if (isset($recipes_array) ) {
foreach ( $recipes_array as $single_recipe ) { ?>
<div class="col-md-4 portfolio-item">
<a href="single-recipe.php?id=<?php echo $single_recipe['recipe_id'];?>">
<?php if ( $single_recipe['recipe_image'] == '' ) { ?>
<img class="img-responsive" src="http://placehold.it/300x200" alt="">
<?php } else { ?>
<img class="img-responsive" src="<?php echo $single_recipe['recipe_image']; ?>" alt="">
<?php } ?>
</a>
<h4>
<a href="#">
<?php echo $single_recipe['recipe_name']; ?>
</a>
</h4>
</div>
<?php } } else { ?>
<div class="col-md-4 portfolio-item">
<h4>Please Add Some Recipes</h4>
</div>
<?php } ?>
</div>
However the HTML doesn't get replaced when I click the button and I get no console errors, can anyone see why?

It may help you.
Setting all HTML in a variable and finally echoing it:
$html_reponse = "";
<?php
if (isset($recipes_array) ) {
foreach ( $recipes_array as $single_recipe ) {
$html_reponse .= "<div class='col-md-4 portfolio-item'>";
$html_reponse .= "<a href='single-recipe.php?id=".$single_recipe['recipe_id']."'>";
if ( $single_recipe['recipe_image'] == '' ) {
$html_reponse .= "<img class='img-responsive' src='http://placehold.it/300x200' alt=''>";
} else {
$html_reponse .= "<img class='img-responsive' src='".$single_recipe['recipe_image']."' alt=''>";
}
$html_reponse .= "</a>";
$html_reponse .= "<h4>";
$html_reponse .= "<a href='#'>".$single_recipe['recipe_name']."</a>";
$html_reponse .= "</h4>";
$html_reponse .= "</div>";
}
}else{
$html_reponse .= "<div class='col-md-4 portfolio-item'>";
$html_reponse .= "<h4>Please Add Some Recipes</h4>";
$html_reponse .= "</div>";
}
echo $html_reponse;exit;
In your JS:
success:function(data) {
// remove this alert after your testing.
// It is just to placed that we successfully got the reponse
alert("We got Response");
// Just showing response in Browser console 'press F12 shortcut to open console in your browser'
console.log(data);
// removing existing HTML from the container and then entering new one!
$("#cookbook-recipe").empty().html(data);
}
If it still doesn't work, you might have some problem in getting response. Make sure that it comes to your Ajax success callback event.

Bug when I .load in opencart

I edited my checkout/cart.tpl and initially everything looks fine, but then when I "add cart" something the code changes automatically and everything be strange.
EXAMPLES
1- when I enter in website and look to cart, everything looks fine:
2- THE BUG/MISTAKE. When I update my cart, when I click in "Add cart" only appear this part of my cart, without prices and checkout etc:
HTML/cart.TPL
<div id="cart">
<img src="images/bag.png" alt="Bag" />Cart: <span id="cart-total"><?php echo $text_items; ?></span>
<div class="cart_menu">
<?php if ($products || $vouchers) { ?>
<div class="cart_items">
<?php foreach ($products as $product) { ?>
<div class="c_item_img floatleft">
<?php if ($product['thumb']) { ?>
<img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" />
<?php } ?>
</div>
<div class="c_item_totals floatleft">
<div class="c_item_totals_detail floatleft">
<h5><?php echo $product['name']; ?></h5>
<span><?php echo $product['quantity']; ?> x <?php echo $product['total']; ?></span>
</div>
<div class="close_icon_cart floatleft">
<img src="images/close.png" onclick="cart.remove('<?php echo $product['key']; ?>');" title="<?php echo $button_remove; ?>" alt="" />
</div>
</div>
<?php } ?>
</div>
<div class="cart_totals">
<?php foreach ($totals as $total) { ?>
<div class="c_totals_left floatleft">
<p></p>
</div>
<div class="c_totals_right floatleft">
<p><?php echo $total['title']; ?> <?php echo $total['text']; ?></p>
</div>
<?php } ?>
</div>
<div class="cart_view_bottom">
<div class="c_totals_left floatleft">
<?php echo $text_cart; ?>
</div>
<div class="c_totals_right floatleft">
<?php echo $text_checkout; ?>
</div>
</div>
<?php } else { ?>
<div class="cart_items">
<p class="text-center"><?php echo $text_empty; ?></p>
</div>
<?php } ?>
</div>
</div>
.JS
<script type="text/javascript"><!--
$('#button-cart').on('click', function() {
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
dataType: 'json',
beforeSend: function() {
$('#button-cart').button('loading');
},
complete: function() {
$('#button-cart').button('reset');
},
success: function(json) {
$('.alert, .text-danger').remove();
$('.form-group').removeClass('has-error');
if (json['error']) {
if (json['error']['option']) {
for (i in json['error']['option']) {
var element = $('#input-option' + i.replace('_', '-'));
if (element.parent().hasClass('input-group')) {
element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
} else {
element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
}
}
}
if (json['error']['recurring']) {
$('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
}
// Highlight any found errors
$('.text-danger').parent().addClass('has-error');
}
if (json['success']) {
$('.breadcrumb').after('<div class="alert alert-success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');
$('#cart-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
$('#cart > div').load('index.php?route=common/cart/info .cart_menu .cart_items');
}
}
});
});
//--></script>
I already tried put all div classes in JavaScript but it didn't work, unfortunately.

I'm almost positive that your problem is due to the fact that you have used the id "cart" in your checkout/cart template which is already in use by the cart module handled by module/cart. It's important to understand that these are two different things and the cart id needs be unique - especially when you are using javascript to update it's contents.
Try changing the id in checkout/cart.tpl to something other than "cart".