I have a function that prints out articles from my database and three links Edit , Add , Show/hide.
In the show/hide link i want to be able to hide/show that particular article.
How can i do that?
EDIT: I need to be able to hide/show articles in my backend page and it needs to stay hidden in the frontend page
function displaynews()
{
$data = mysql_query("SELECT * FROM news") // query
or die(mysql_error());
while ($info = mysql_fetch_array($data))
{
$id = $info['id'];
echo "<br>
<a href=Edit.php?id=$id>Edit</a></a>
<a href='addnews.php'> Add </a>
<a href='#'>Show/Hide</a><br><strong>" .
$info['date'] .
"</strong><br>" .
$info['news_content'] .
"<hr><br>"; // Print Articles and Date
}
}
You could use some Javascript and set the style attribute to display:none to hide, then display:block to show it again. Or use jQuery.
Use jquery.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
</head>
show/hide
<div id="whatever">
Content
</div>
<script>
//Try these too
$('#whatever').hide();
$('#whatever').show();
$('#whatever').toggle();
</script>
Use following code:
PHP Code:
function displaynews()
{
$data = mysql_query("SELECT * FROM news") // query
or die(mysql_error());
while ($info = mysql_fetch_array($data))
{
$id = $info['id'];
echo "<div class="news"><br><a href=Edit.php?id=$id>Edit</a></a><a href='addnews.php'> Add </a><a href=hide.php>Show/Hide</a><br><strong>". $info['date']."</strong><br>". $info['news_content'] . "<hr><br></div>"; // Print Articles and Date
}
}
Javascript/jQuery Code (Don't forget to add jQuery in your page)
<script type="text/javascript">
$(document).ready(function(){
$(".news").click(function(){
$(this).toggle();
});
});
</script>
Related
I have created a drop down menu in php that is displayed however, when a value has been clicked, I don't know how to collect this information.
<html>
<body>
<?php
$mydb = new mysqli('localhost','root','','TestTimeTableSolution');
$rows = $mydb->query("SELECT DISTINCT TeacherID FROM Teacher;")->fetch_all(MYSQLI_ASSOC);
$teachers = array();
foreach ($rows as $row) {
array_push($teachers, $row["TeacherID"]);
}
$dropdownMenu = "<select name='TeacherID' form='Teacher'><option value='Null' selected>All</option>";
foreach ($teachers as $topic) {
$dropdownMenu .= "<option value='" . $topic . "'>" . $topic . "</option>";
}
$dropdownMenu .= "</select>";
echo $dropdownMenu;
?>
</body>
</html>
Based on your last comment, "i want it to be dynamic so as soon as the user clicks on something the relevant information will pop up", it sounds like you will probably want to use Ajax/JavaScript (I will demonstrate a simple jQuery example, notating for clarity):
<?php
$mydb = new mysqli('localhost','root','','TestTimeTableSolution');
?>
<html>
<!-- Add the jQuery library -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// Act when the document is ready
$(function(){
// listen for the select to change
$('select[name=TeacherID]').on('change',function(){
// Run the ajax – you can also use the shortcut $.post method found at:
// https://api.jquery.com/jquery.post/
$.ajax({
// This is the page that is going to do the data lookup/display action
url: '/lookup.php',
// This is how it's sending the data to that page
type: 'post',
// This is what is being sent ($_POST['submit'] in this case)
data: {
// Use $(this) to isolate the current selected element and get value (.val())
// The value is represented as $topic in your php
'submit': $(this).val()
},
// If all goes well and the page (lookup.php) returns a response
success: function(response) {
// Place the response into the div (see html snippet)
$('#loadspot').text(response);
}
});
});
});
</script>
<body>
<?php
$rows = $mydb->query("SELECT DISTINCT TeacherID FROM Teacher;")->fetch_all(MYSQLI_ASSOC);
$teachers = array();
foreach ($rows as $row) {
array_push($teachers, $row["TeacherID"]);
}
$dropdownMenu = "<select name='TeacherID' form='Teacher'><option value='Null' selected>All</option>";
foreach ($teachers as $topic) {
$dropdownMenu .= "<option value='" . $topic . "'>" . $topic . "</option>";
}
$dropdownMenu .= "</select>";
echo $dropdownMenu;
?>
<!---------------------------------------------->
<!-- THIS IS WHERE THE CONTENT WILL LOAD INTO -->
<!---------------------------------------------->
<div id="loadspot"></div>
</body>
</html>
In order for this to work, you need the page lookup.php in the domain root (you can make it whatever/where ever you want, but you need to match in the javascript url):
/lookup.php
<?php
# This is what will get placed into the parent page <div id="loadspot"></div>
# Do you your php here in place of this line and return whatever "relative information" you want
print_r($_POST);
You should review the jQuery page I have linked to to get more information and direction for that library and make sure you use your browser's developer tools to monitor javascript errors in the console. Ideally, you want to understand all this via the documentation instead of just copy and paste and move on...
I need to make drop down list as a link to different pages. How do I do that using PHP, MySQL and HTML.
<?php
mysql_connect('localhost','root','');
mysql_select_db('test');
$sql="select first_name from users";
$result=mysql_query($sql);
echo "<select First_name=''>";
echo "<a href='index.html'>";
while($row=mysql_fetch_array($result)){
echo ":<option value='".$row['first_name']."'>".$row['first_name']."</option>";
}
echo"</a>";
echo"</select>";
?>
You can't use links on the option tag, in order to do that, you need to use javascript.
You can try to do something like this:
echo "<select name=\"First_name\" onchange=\"document.location='?'+this.value\">";
PHP is a server-side script and does not manipulate a page after a user has adjusted it. Like real time. Only javascript and others do that. PHP creates a page with what you want to see but if you need to change something bases on a dropdown use java. Here is a function that can do that. It unhides a div tag that can have your info you need.
<script type="text/javascript">
window.onload = function() {
var eSelect = document.getElementById('dropdown');
var divtag1 = document.getElementById('divtag1');
var divtag2 = document.getElementById('divtag2');
eSelect.onchange = function() {
if(eSelect.selectedIndex === 1) {
divtag1.style.display = 'block';
}
if(eSelect.selectedIndex === 2) {
divtag2.style.display = 'block';
}//or if you want it to open a url
if(eSelect.selectedIndex === 3) {
window.open("https://yourwebsite.com", "_NEW");
}
}
}
</script>
echo "<div id=\"divtag1\" style=\"display:none;\">/*your code*/
</div>";
echo "<div id=\"divtag2\" style=\"display:none;\">/*your code*/
</div>";
I am new with AJAX and JQuery. I am trying to use it to call two PHP scripts. I found some examples online but just to call functions. I am just trying to call the scripts so it will load everything on my main PHP file that will then be display on the screen the results withouth refreshing the page.
Here is the fiddle example, it works if I put all my PHP scripts in one file : http://jsfiddle.net/vw4w3ay5/
thanks in advance, your help is very much appreciated!
main_php file (where I want to call my other PHP scripts):
<div id="map_size" align="center">
<script type="text/javascript">
/*I WANT TO CALL THE TWO SCRIPTS BEFORE EXECUTE THE FUNCTION BELOW*/
$(".desk_box").click( function() {
$(".station_info").hide(); // to hide all the others.
$("#station_info"+ $(this).attr('data') ).show();
});
</script>
display_desk.php (Script I want to call):
<?php
include 'db_conn.php';
//query to get X,Y coordinates from DB for the DESKS
$desk_coord_sql = "SELECT coordinate_id, x_coord, y_coord FROM coordinates";
$desk_coord_result = mysqli_query($conn,$desk_coord_sql);
//see if query is good
if($desk_coord_result === false) {
die(mysqli_error());
}
//didsplay Desk stations in the map
while($row = mysqli_fetch_assoc($desk_coord_result)){
//naming X,Y values
$id = $row['coordinate_id'];
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];
//draw a box with a DIV at its X,Y coord
echo "<div class='desk_box' data='".$id."' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>id:".$id."</div>";
} //end while loop for desk_coord_result
mysqli_close($conn); // <-- DO I NEED TO INCLUDE IT HERE OR IN MY db_conn.php SINCE IM INCLUDING IT AT THE TOP?
?>
display_stationinfo.php(second script I want to call):
<?php
include 'db_conn.php';
//query to show workstation/desks information from DB for the DESKS
$station_sql = "SELECT coordinate_id, x_coord, y_coord, section_name FROM coordinates";
$station_result = mysqli_query($conn,$station_sql);
//see if query is good
if($station_result === false) {
die(mysqli_error());
}
//Display workstations information in a hidden DIV that is toggled
while($row = mysqli_fetch_assoc($station_result)){
//naming values
$id = $row['coordinate_id'];
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];
$sec_name = $row['section_name'];
//display DIV with the content inside
echo "<div class='station_info' id='station_info".$id."' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>Hello the id is:".$id."</br>Section:".$sec_name."</br></div>";
}//end while loop for station_result
mysqli_close($conn); // <-- DO I NEED TO INCLUDE IT HERE OR IN MY db_conn.php SINCE IM INCLUDING IT AT THE TOP?
?>
What about? :
<div id="map_size" align="center">
<?php
echo "<script>";
include "display_desk.php";
include "display_stationinfo.php";
echo "</script>";
?>
<script type="text/javascript">
/*I WANT TO CALL THE TWO SCRIPTS BEFORE EXECUTE THE FUNCTION BELOW*/
$(".desk_box").click( function() {
$(".station_info").hide(); // to hide all the others.
$("#station_info"+ $(this).attr('data') ).show();
});
</script>
To be sure add $(document).ready(function(){
});
/EDIT/
Hum you want to use Ajax . did you try with :
$.post("yourURL.php",function(html){
/*here what you want to do*/
/*return of your script in html*/
});
Hello, I would like to add some JQuery code when my MySQL query match a specific ID, here is my code:
<?php
$chkgreenmark ="select * from TABLE where PARAM = '$VARIABLE'";
$sqlchkgreenmark = mysqli_query($GLOBALS['mysqli'],$chkgreenmark);
$numsqlchkgreenmark = mysqli_num_rows($sqlchkgreenmark);
if($numsqlchkgreenmark > 0) { ?>
<script type="text/javascript">
$(".calendercolumn .dragbox #dragID").append("<div class='detailssaved'><a href='#' ><img src='./images/check_mark.JPG' height='15' width='15'></a></div>");
</script>
<?php
}?>
The problem is that I get the JQuery code even when I don't have any result.
Can anyone please help me?
Try this
<?php
$chkgreenmark ="select * from TABLE where PARAM = '$VARIABLE'";
$sqlchkgreenmark = mysqli_query($GLOBALS['mysqli'],$chkgreenmark);
$numsqlchkgreenmark = mysqli_num_rows($sqlchkgreenmark);
if($numsqlchkgreenmark > 0)
{
echo '<script type="text/javascript">
$(".calendercolumn .dragbox #dragID").append("<div class=\'detailssaved\'><a href=\'#\' ><img src=\'./images/check_mark.JPG\' height=\'15\' width=\'15\'></a></div>");
</script>';
}
?>
Live Demo
I tried #rynhe answer, but didn't work for me until i added the Document Ready function
<?php
$chkgreenmark ="select * from TABLE where PARAM = '$VARIABLE'";
$sqlchkgreenmark = mysqli_query($GLOBALS['mysqli'],$chkgreenmark);
$numsqlchkgreenmark = mysqli_num_rows($sqlchkgreenmark);
if($numsqlchkgreenmark > 0)
{
echo '<script type="text/javascript">
$(document).ready(function(e) {
$(".calendercolumn .dragbox #dragID").append("<div class=\'detailssaved\'><a href=\'#\' ><img src=\'./images/check_mark.JPG\' height=\'15\' width=\'15\'></a></div>");
});
</script>';
}
?>
on php files or pages that u can use php tags , u can write php into jquery scripts. So that u can use it like below;
<script type="text/javascript">
$(".calendercolumn .dragbox <?php echo $id;?>").append("<div class='detailssaved'><a href='#' ><img src='./images/check_mark.JPG' height='15' width='15'></a></div>");
</script>
I am having a bit of problems trying to show an information in a div tag using jQuery inside the PHP while loop.
My code looks like this:
$i=1;
while($pack = mysql_fetch_array($packs))
{
$pricepack = $price * $pack['refcount'];
$pricepack = number_format($pricepack,2);
if($users > $pack['refcount'] ) {
$contents .= "
<a class='refbutton' style='text-decoration:none;' onclick=\"document.rent.refs.value='{$pack['refcount']}';document.rent.submit(); return false;\" >{$pack['refcount']}</a>
<div id='refinfo' style='display:none;'>
<span style='font-size:18pt;font-weight:bold;' id='refprice'></span><br />
<span style='color:#D01F1E;'>You don't have enough funds for this package.</span>
</div>
<script type='text/javascript'>
$(document).ready(function() {
$('.refbutton').hover(
function() {
$('#refinfo').show();
$('#refprice').text(\"$\"+\"$pricepack\");
},
function() {
$('#refinfo').hide()
}
);
});
</script>
";
$i++;
}
}
The problem is that the code is generating a div next to each anchor element. This will cause this when the mouse hovers:
What I am trying to obtain is this on every button hover:
As you can see in the second picture, there isn't any design errors or mix-ups. How can I obtain this?
Thank you.
You need to start by cleaning up your code. You only need one refinfo div, and only one javascript block. The only thing in your loop should be the refbutton, and that tag should contain all the values needed for the javscript hover and click events to do their business. Look into HTML5 custom data attributes http://html5doctor.com/html5-custom-data-attributes/
Something more like this should work and provide a sounder basis on which to debug layout issues if any remain.
<?php
$i=1;
while($pack = mysql_fetch_array($packs)) {
$pricepack = $price * $pack['refcount'];
$pricepack = number_format($pricepack,2);
if($users > $pack['refcount'] ) {
$contents .= "
<a class=\"refbutton\" data-pricepack=\"{$pricepack}\" style=\"text-decoration:none;\" >{$pack['refcount']}</a>";
$i++;
}
}
?>
<div id="refinfo" style="display:none;">
<span style="font-size:18pt;font-weight:bold;" id="refprice"></span><br />
<span style="color:#D01F1E;">You don't have enough funds for this package.</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.refbutton')
.bind('mouseover',function(event) {
$('#refinfo').show();
$('#refprice').text($(this).data("pricepack"));
})
.bind('click',function(event) {
document.rent.refs.value=$(this).text();
})
.bind('mouseout', function(event){
$('#refinfo').hide();
})
;
});
</script>