I currently have some php script that outputs results from a query. I would like to add at the end two buttons that will show/hide the final element, but am not sure how to do this.
The following is my php script:
while($result = mysqli_fetch_array($iname))
{
echo "<b>Event Name:</b> " .$result['EventName'];
echo "<br> ";
echo "<b>Location:</b> ".$result['Location'];
echo "<br>";
//this is where I would like to add my two buttons, that would show the "hidden" content when clicked
And here is what I have written in an HTML script, that I would like to reconcile into the PHP output:
<!DOCTYPE html>
<html>
<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js></script>
<script>
$(document).ready(function(){
$("#hidden").hide();
$("#hide").click(function(){
$("#hidden").hide(500);
});
$("#show").click(function(){
$("#hidden").show(500);
});
});
</script>
</head>
<body>
<button id="show">Show</button>
<button id="hide">Hide</button>
<p id="hidden">
Some Random Text that will be shown when the buttons are clicked
</p>
</body>
</html>
Any suggestions as to how this should be done?
How about if you get the number of result rows with $num_rows = mysql_num_rows($result);
Then, put a counter in your loop.
$counter = 1;
$theClass="";
while($result = mysqli_fetch_array($iname))
{
if ($counter == mysql_num_rows($result);){
$theClass="showHide";
}
echo "<div class='$theClass'>";
echo "<b>Event Name:</b> " .$result['EventName'];
echo "<br> ";
echo "<b>Location:</b> ".$result['Location'];
echo "<br>";
echo "</div>
$counter++;
}
Then, apply your javascript to the div whose class="showHide"
Related
I have the next code:
<form method="POST">
<?php
echo "<select value>";
$xml = new SimpleXMLElement("http://news.google.com/news?ned=us&topic=h&output=rss",null,true);
foreach($xml->channel->item as $news)
{
echo "<option value='".$news->title."'>" . $news->title . "</option>";
}
echo "</select>";
?>
</form>
So i have a dropdown box with news titles, when i select a title i want to appear the description from the xml file and i dont know how to do it, if someone can help me, please
Please check this example and let me know if you want any more help.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".feeds").change(function(){
var val=$(this).val();
$(".common").hide();
$("."+val).show();
});
});
</script>
<style>
.common{display:none;}
</style>
<?php
$xml = new SimpleXMLElement("http://news.google.com/news?ned=us&topic=h&output=rss",null,true);
$select_html="<select class='feeds'>";
$d_html="";
foreach($xml->channel->item as $news){
$d_html.="<div class='".$news->guid." common'>".$news->description.'</div>';
$select_html.="<option value='".$news->guid."'>" . $news->title . "</option>";
}
$select_html.="</select>";
echo $select_html;
echo $d_html;
?>
How to get the correct image instead of getting the first image using jquery, whats wrong with the code below, can anyone help me out. it is also alerting undefined in alert box
This is My php page which is recieving multiple images file from the database using php mysql
<html>
<head>
<title></title>
<!-- <script type="text/javascript" src="food_test.js"></script> -->
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div id="showImages">
</div>
This pice of code below loops through the images from the database
<?php
for($i = 0; $i < $dbImg->count(); $i++){
$imgId = $dbImg->results()[$i]->gal_img_id;
$imgName = $dbImg->results()[$i]->gal_img_name;
echo "<a id='imgLink' href='image_gallery.php'>";
echo "<img id='galleryImage' width='100px' height='100px'
src='../images/pages/gallery/". $imgName . "'></img>";
echo "<input type='hidden' id='" . $imgId . "' name='gal_img_id'
value='" . $imgName . "'></input>";
echo $imgName;
echo "</a>";
}
?>
Here is my jquery code which is displaying only first image whenever i click any image.
$("a#imgLink img#galleryImage").each(function(){
$(this).click(function(){
$("#showImages").html($("input[name='gal_img_id']").val());
alert($("input[name='gal_img_id']").val());
});
});
</script>
</body>
</html>
It can be due to single quotes.
$("#showImages").html($("input[name=gal_img_id]").val());
alert($("input[name=gal_img_id]").val());
Try this. I had a error like this then i removed quotes from the input[name=example] and it worked.
I am currently having some issues with updating a PHP variable without refreshing the page.
In my situation the code will count the products and if there are none it won't shoot anything out. If the quantity of $total is 1 or greater it will display the amount.
<?php
$total = count_products();
if ($total == 0) {
echo " ";
} else {
echo $total;
}
?>
Now what I am having trouble with is how to update that variable. If I were to add a product, I would not see the updated result until refreshing the page completely. Is there a nice way to update the $total without having to refresh the page?
You can try ajax to do that for you without refreshing page
Basic example here
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on("click", ".thebutton", function(e) {
e.preventDefault();
$("#result").load(location.href+ ' #my');
});
</script>
<button href="#" class="thebutton"> add product button</button>
<div id="result">
<div id="my">
<?php
//echo time for demonstration
echo date('a:i:s');
?>
<!-- lets say this is where you echo your total -->
<?php
$total = count_products();
if ($total == 0) {
echo " ";
} else {
echo $total;
}
?>
</div>
</div>
Hope this would be of some help to you
I am having a problem with how to echo javascript in php. I have a form which on submit will execute itself and echo some text and will redirect to a page in 5secs. I am currently echoing this:
header("Refresh: 5;url=index2.php?ID=".$objResult["ID"]."");
echo '<html>';
echo '<head>';
echo '<title>Klant toevoegen</title>';
echo '<link rel="stylesheet" href="style.css" type="text/css" media="screen" />';
echo '</head>';
echo '<body>';
echo '<fieldset>';
echo ''.$Naam.' is added to the database, u will be redirected in a couple of seconds.<br><br>';
echo '</fieldset>';
echo '</body>';
echo '</html>';
The javascript I have is a countdown which counts down from 5 to 1. The code is this:
<script>
var countdownFrom = 5; // number of seconds
var countdownwin;
var stp;
function CountDownStart() {
stp = setInterval("CountDownTimer('CountDownTime')",1000)
}
function CountDownTimer(id)
{
if (countdownFrom==0) {clearInterval(stp); window.close(); }
else {
var x
var cntText = "Closing in "+countdownFrom+" seconds";
if (document.getElementById)
{
x = document.getElementById(id);
x.innerHTML = cntText; }
else if (document.all)
{
x = document.all[id];
x.innerHTML = cntText; }
}
countdownFrom--
}
</script>
<title>Untitled</title>
</head>
<body onload="CountDownStart()">
<Div id="CountDownTime"></div>
</body>
Now I would like to echo this countdown script to replace the <fieldset> in the html. I have tried several things like just add the whole code in 1 echo ''; and I tried to echo all the lines seperately but with both it crashes my whole script. If anyone knows how to do this it would be great!
I Wouldn't write all those echo's, instead, leave all the HTML and JS outside the PHP block
<?php
some php code
?>
HTML AND JS
<?php
More php if required
?>
And use
<?=$Naam?>
To inject your values where required
Alternatively you should look into template engines
Try to use
echo <<<EOT
/* some text here */
EOT;
You can put the script in a separate .js file and echo the script tag:
<? echo "<script type='text/javascript' src='path/to/script.js' ></script> ?>
Don't forget to remove any HTML tags from the JS file, like <body>, <head>, etc.
I just asked another question here: global variable and reduce database accesses in PHP+MySQL
I am using PHP+MySQL. The page accesses to the database and retrieve all the item data, and list them. I was planning to open a new page, but now I want to show a pop div using javascript instead. But I have no idea how to utilize the variables of PHP in the new div. Here is the code:
<html>
</head>
<script type="text/javascript">
function showDiv() {
document.getElementById('infoDiv').style.visibility='visible';
}
function closeDiv() {
document.getElementById('infoDiv').style.visibility='hidden';
}
</script>
</head>
<body>
<ul>
<?php foreach ($iteminfos as $iteminfo): ?>
<li><?php echo($iteminfo['c1']); ?></li>
<?php endforeach;?>
</ul>
<div id="infoDiv" style="visibility: hidden;">
<h1><?php echo($c1) ?></h1>
<p><?php echo($c2) ?></p>
<p>Return</p>
</div>
</body>
</html>
"iteminfos" is the results from database, each $iteminfo has two value $c1 and $c2. In "infoDiv", I want to show the details of the selected item. How to do that?
Thanks for the help!
A further question: if I want to use, for example, $c1 as text, $c2 as img scr, $c1 also as img alt; or $c2 as a href scr, how to do that?
Try this:
<?php foreach ($iteminfos as $iteminfo): ?>
<li>
<a href="javascript:showDiv(<?php echo(json_encode($iteminfo)) ?>)">
<?php echo($iteminfo['c1']); ?>
</a>
</li>
<?php endforeach;?>
Also, modify showDiv to take your row data:
function showDiv(row) {
document.getElementById('infoDiv').style.visibility='visible';
document.getElementById('infoDiv').innerHTML = row['c1'];
}
Basically, you have to consider that the javascript runs in the browser long after the PHP scripts execution ended. Therefore, you have to embed all the data your javascript might need into the website or fetch it at runtime (which would make things slower and more complicated in this case).
Do you want a single info area with multiple items listed on the page and when you click an item the info area is replaced with the new content??? or you want a new info area for each item??
I see something along the lines of the first approach, so I will tackle the latter.
<?php
//do some php magic and get your results
$sql = 'SELECT title, c1, c2 FROM items';
$res = mysql_query($sql);
$html = '';
while($row = mysql_fetch_assoc($res)) {
$html .= '<li><a class="toggleMe" href="#">' . $row['title'] . '</a><ul>';
$html .= '<li>' . $row['c1'] . '</li><li>' . $row['c2'] . '</li></ul>';
$html .= '</li>'; //i like it when line lengths match up with eachother
}
?>
<html>
</head>
<script type="text/javascript">
window.onload = function(){
var els = document.getElementsByClassName("toggleMe");
for(var i = 0, l = els.length; i < l; i++) {
els[i].onclick = function() {
if(this.style.display != 'none') {
this.style.display = 'block';
} else {
this.style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<ul>
<?php
echo $html;
?>
</ul>
</body>
</html>