Greetings,
I am a newbie who just started with jQuery. I am building a basic PHP app for our team that displays a list of open helpdesk tickets.
To avoid cluttering the screen, I only want to display the title of the ticket and if clicked, its description.
Here's my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Animate my Div</title>
<style type="text/css" media="screen">
a { text-decoration: none; }
#expand { background-color: #fff; }
#mydiv { display: none; }
</style>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function(){
$("a").click(function(){ $("div").slideToggle(1000); });
}); </script>
</head>
<body>
<?php
$con = mysql_connect("korg", "joe", "bob");
if (!$con) { die('Could not connect: ' . mysql_error()); }
mysql_select_db("wfr11", $con);
$result = mysql_query(" select title, description from webcases");
while ($row = mysql_fetch_array($result)) {
?>
<p><?php echo $row['title']; ?></p>
<div id="mydiv"><?php echo $row['description']; ?></div>
<?php
} mysql_close($con); ?>
</body>
</html>
Right now, my code works but unfolds all the divs for all open tickets, regardless of what ticket name I clicked.
Ideally, I'd like to show the description of for the ticket name I clicked. Not all of them. Is it possible?
Thanks for your help.
Entirely possible, yes.
First issue you have is that you are repeating an ID in the loop, HTML IDs must be unique. I would suggest using a class there. Wrap the two components together in a DIV to make them in to a combined item that can be dealt with individually as well
<?php
while ($row = mysql_fetch_array($result)) {
?>
<div class="entry">
<p><?php echo $row['title']; ?></p>
<div class="description"><?php echo $row['description']; ?></div>
</div>
<?php
}
?>
Then, you need to make your jQuery select just the adjacent description DIV.
$(document).ready(function(){
$(".entry a").click(function() {
$(this).parents('.entry').find('.description').slideToggle(1000);
});
});
Remember to use htmlentities() on your echo's from the database if they are not already in proper HTML form.
Yep, you're after a toggle. Maybe use an id to select the divs you want rather than just the plain div.
$(".link_class").click(function(){ $("#my_div").slideToggle(1000); });
Target particular divs by assigning a class to the link.
Related
I'm fetching some data from a MySQL database onto a WebPage. I came up with a simple PHP page that queries the database and shows the query in the form of a table and it works just fine.
However, when I try to add bootstrap to the page and style it, the entire page stops working.
Here's my index.php
<!DOCTYPE html>
<html>
<head>
<title>MakersBox</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<center>
<h1>Sensor Testing Dashboard</h1>
<div class="container">
<?php
echo "<table class='table table-hover' align=center>";
echo "<thead><tr><th>Sensor Id</th><th>Temperature</th><th>Light</th><th>Last Updated</th></tr></thead>";
class TableRows extends RecursiveIteratorIterator {
function __construct($it) {
parent::__construct($it, self::LEAVES_ONLY);
}
function current() {
return "<td>" . parent::current(). "</td>";
}
function beginChildren() {
echo "<tr>";
}
function endChildren() {
echo "</tr>" . "\n";
}
}
$servername = "localhost";
$username = "root";
$password = "paanikiboond";
$dbname = "testbox1";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $conn->prepare("SELECT * FROM sensor ORDER BY LastUpdate DESC LIMIT 1");
$stmt->execute();
// set the resulting array to associative
$result = $stmt->setFetchMode(PDO::FETCH_ASSOC);
foreach(new TableRows(new RecursiveArrayIterator($stmt->fetchAll())) as $k=>$v) {
echo $v;
}
}
catch(PDOException $e) {
echo "Error: " . $e->getMessage();
}
$conn = null;
echo "</table>";
</div>
$url1=$_SERVER['REQUEST_URI'];
header("Refresh: 3600 ; URL=$url1");
?>
</body>
</html>
Any idea what I may be doing wrong here?
First, I think you must separte properly your HTML, and your PHP.
In your code, mixte HTML tag + HTML tag from PHP code in your HTML body is... not too regulatory. And very difficult to maintain.
You can, create an architecture like that :
<?php
// Create connexion, and get your results.
$connexion = new PDO();
$results = [];
?>
<!DOCTYPE html>
<html>
<head>
<!-- Your link and scripts-->
</head>
<body>
<h1></h1>
<div>
<?php if (!empty($results){ ?>
<table class='table table-hover'>
<!-- Show your results. -->
<? foreach($results as $result)
{
}
?>
</table>
<?php }else{
echo 'no results found';
}
?>
</div>
</body>
</html>
Also, Boostrap is a Javascript library, It doesn't work directly on PHP, but it read the HTML structure, with your elements and their classes. If your javascript is loaded, and your structure is well done, that work! You have samples and documentation of Boostrtap here;
In your code you forgotten to close your <head></head> element and you've a problem in this lines :
echo "</table>"; // that is PHP, but PHP is not close with `?>`
</div> <!-- That is HTML but in PHP code witouth `echo ''` -->
If PHP and HTML has well separted, you will have fewer problems of forgetting :D You have many links in Internet for understand this good practise
PS : don't forgot to code with proper line indentions: it's much more readable:
<html>
<head> <!-- Very difficult to see we havn't a </head> close tag -->
<body>
<div>
My content
</div>
</body>
</html>
<html>
<head> <!-- Very easy to see we havn't a </head> close tag -->
<body>
<div>
My content
</div>
</body>
</html>
Hope I help you.
for one thing you arent closing your <head>, so your code should be
<!DOCTYPE html>
<html>
<head>
<title>MakersBox</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
...
EDIT: close to the bottom your code should look like
...
echo "</table>";
echo "</div>";
$url1=$_SERVER['REQUEST_URI'];
header("Refresh: 3600 ; URL=$url1");
?>
</body>
</html>
</center><!--that where you forgot to add this as it needs to be closed off-->
</body>
</html>
Also, you might be better off put Javascript on the bottom of the pages, Not sure if it will work.
Second things you need use Web developer tools to diagnosed this issues. it will help a lot. also, you might need to test out different browser if it's same issues or not.
I tried your code. I only find these three mistakes:
You must use echo for build HTML code from PHP and then close your
div container
$conn = null;
echo "</table>";
//wrong way expecting statement
</div>
//correct way for use HTML inside PHP tags
echo "</div>";
The line where you add a header "refresh" generate a warning because
"Cannot modify header information - headers already sent"
$url1=$_SERVER['REQUEST_URI'];
header("Refresh: 3600 ; URL=$url1");
You use <center> tag that it's deprecated so you should use CSS instead and you not close this tag
I working on a simple project, and basically what I am doing is that I am creating a simple page from admin panel and then displays it in another page using iframe...
So in the process of displaying the page names, I managed to display all the page names that I have in the database. However, when I try to give them a link so when the user click on them, it redirects them to the specific page. So if there is a page named: new york and he clicks on it, it goes to: /pages/newYork.php ...
The problem: When I give them a link, only 1 page link is given for all the pages. Example: If I had cities named: New York, Bangkok and Amsterdam, the link for all of those pages is only for New york.
Here is my code:
<?php
require_once '../connect.php';
session_start();
if(isset($_SESSION['loggedinAdmin'])){
}else{
header("Location: index.php");
}
// To display content:
$realDisplay = '';
$sql = mysql_query("SELECT * FROM cities");
while($row = mysql_fetch_assoc($sql)){
$displayName = $row['name'];
$realDisplay .= $displayName.'<br/>';
}
echo "<u align='center'>Page names:";
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Pages</title>
<style>
a{
text-decoration:none;
font-size:30px;
color:skyblue;
}
</style>
</head>
<body>
<div style="color:red;">
<a href="<?php echo 'pages/'.$displayName.'.php'?>">
<?php echo $realDisplay;?>
</a>
</div>
</body>
</html>
Any thoughts of how to solve this? Also, if there is a better way to do it then it would be great.
Thanks in advance for everybody :)
First, move your loop to the page where you are actually going to display the data.
Second, keep your code clean and readable by putting things where they actually belong. ie. <u align='center'>Page names: doesn't belong where you put it. It goes in the body.
Third, don't forget to properly close your tags. <u align='center'>Page names: has no closing tag.
Finally, don't over-complicate it. You don't need two different vars for the same data row.
<?php
require_once '../connect.php';
session_start();
if(isset($_SESSION['loggedinAdmin'])){
}else{
header("Location: index.php");
}
// To display content:
//$realDisplay = '';
$sql = mysql_query("SELECT * FROM cities");
//while($row = mysql_fetch_assoc($sql)){
//$displayName = $row['name'];
//$realDisplay .= $displayName.'<br/>';
//}
//echo "<u align='center'>Page names:";
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Pages</title>
<style>
a{
text-decoration:none;
font-size:30px;
color:skyblue;
}
</style>
</head>
<body>
<div align="center"><u>Page names:</u></div>
<div style="color:red;">
<?php while($row = mysql_fetch_assoc($sql)){
$displayName =$row['name']
?>
<?php echo $displayName;?><br>
<?php } ?>
</div>
</body>
</html>
in my laravel project i need to take print out of a doctor's prescription. and for that i have already created the header part and saved in database. when the user clicks on the printer icon next to a div then the content inside that div needs to be printed with the saved header.
the method is used is: in the view part which contain the printer icon
<div class="AnswerBlock"><div class="NmaeDate">
<span class="name"><?php echo 'Prescription :'; ?></span><span style="float:right;"><img src="<?php echo asset('images/footericons/printout.png'); ?>" title="prescription1" alt="take print" width="20" height="20"></span>
<div class="answer">
<?php echo stripslashes($data1->prescription1);?>
</div>
</div>
</div>
in the user controller:
public function anyPrintPrescription($eid='',$no=''){
$drpres='';
$prs = DB::table('appoint')->where('id','=',$eid)->first();
if($no=='1'){
$drpres = $prs->prescription1;
}
elseif($no=='2'){
$drpres= $prs->prescription2;
}
elseif($no=='3'){
$drpres = $prs->prescription3;
}
$presheader = Admin::where('id','=',$prs->d_id)->pluck('prescription_header');
return View::make('con.printout_prescription')->with(array('presc'=>$drpres,'phead'=>$presheader));
}
and the view is :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print:last-child {
page-break-after: auto;
}
</style>
</head>
<body onload="window.print()">
<div class="print"><?php echo $phead;?></div>
<div class="print"><?php echo $presc;?></div>
</body>
</html>
The output i'm getting is : when the print icon is clicked the printer option prompt window is opening. but at the same time the browser goes to the view url and displays it.
Is anyone knows how to make the window not displaying the view ?
This isn't really a Laravel or even a PHP question, it's a matter of what you can and can't do with a browser.
A browser can't print something without viewing it. The only thing that I can suggest is to open the view in a new window or tab (change the code that calls back to the view) and have it close after the print is done.
I have 4 divs and on mouseover of each, I want the src of an img to change.
I have to get the images from PHP.
How can I use the array that I get in PHP over in my jQquery script?
And I know with just 4, I could just set up the array in javascript and put each image name, but that's not the functionality I'm looking for.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div{
height:100px;
width:100px;
display:inline-block;
background-color:blue;
}
#my_image{
height:100px;
width:100px;
display:inline-block;
}
</style>
<?php
$images = scandir("images", 1);
?>
<script>
$(document).ready(function(){
$(div).mouseover(function(){
$("#my_image").attr("src", /*my php array*/);
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<img id="my_image" />
</body>
</html>
var images = <?php echo json_encode($images); ?>;
Then you have an array called images that you can use in your JavaScript code. Using it at the position of your comment makes no sense though. You can't assign an array to the src of an image.
I don't know if this is correct - I just followed the example on the jeditable website, but I can't seem to be able to get this simple code working. I just want to save the data into the database and still show the changes on the page.
Below is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" debug="true">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jeditable WYSIWYG Custom Input Demo</title>
<meta name="generator" content="Mephisto" />
<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
<script src="/mint/?js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js""
type="text/javascript" charset="utf-8"></script>
<script src="http://www.appelsiini.net/projects/jeditable/wysiwyg/wysiwyg/jquery.wysiwyg.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://www.appelsiini.net/projects/jeditable/wysiwyg/wysiwyg/jquery.wysiwyg.css" type="text/css" media="screen" charset="utf-8">
<script src="http://www.appelsiini.net/projects/jeditable/jquery.jeditable.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.appelsiini.net/projects/jeditable/wysiwyg/jquery.jeditable.wysiwyg.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
/* Fix FireBug */
/*
if ($.browser.mozilla) {
window.loadFirebugConsole();
};
*/
/* Handle links inside editable area. */
$('.editable > a').bind('click', function() {
$(this).parent().trigger('click');
return false;
});
$('#wysiwyg_2').editable('test-jedit.php',
{
id : 1,
content : 'wysiwyg_2',
indicator : '<img src="../img/indicator.gif">',
type : 'POST',
type : 'wysiwyg',
width : 640,
height : 'auto',
onblur : 'ignore',
submit : 'OK',
cancel : 'Cancel',
wysiwyg : { controls : { separator04 : { visible : true },
insertOrderedList : { visible : true },
insertUnorderedList : { visible : true }
}
}
});
});
</script>
<style type="text/css">
#sidebar {
width: 0px;
}
#content {
width: 770px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<p>
<h1>Jeditable</h1><br />
<small>Edit in place plugin for jQuery.</small>
<ul id="nav">
<li id="first">weblog</li>
<li>projects</li>
</ul>
</p>
</div>
<div id="content">
<div class="entry">
<p>You might also want to check other custom inputs demo.
<h2>Extra settings</h2>
<div style="width: 640px" class="editable" id="wysiwyg_2"><img
src="%5C%22http://%5C%22"><span style="\"font-weight:" bold;\"="">gdgfd<span style="font-style: italic;">
gfd</span><big><br>sdfsdf<br>sdfsdf<br><br></big></span></div>
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</body>
</html>
Here's the PHP code:
<?php
$con = mysql_connect("localhost","username","password");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("my_db", $con);
$id = $_POST['id'];
$content = $_POST['content'];
mysql_query("INSERT INTO editable (id, content)
VALUES ('$id', '$content')");
echo $content;
mysql_close($con);
?>
The first thing to say is please read the php.net page about SQL Injection
To your problem ...
I think I might have spotted a problem ... your JavaScript is being executed before the DOM is ready ... enclose your javascript code (all of it) within the following block :
$(document).ready(function() {
// your code here
});
This means that the code within the function will only be executed once the whole page has been loaded ... calling functions on DOM elements that are not loaded will cause you issues ... further reading on ready() ...
Looking at the code I can see no obvious issue - however there are few basic things you can do to debug this issue ... first off check (using something like firebug) that the AJAX request is actually being sent ...
Secondly you can check the the PHP MySQL code is working correctly ...
$result = mysql_query($query); // execute your query
// Check result
// This shows the actual query sent to MySQL, and the error. Useful for debugging.
if (!$result) {
$message = 'Invalid query: ' . mysql_error() . "\n";
$message .= 'Whole query: ' . $query;
die($message);
}
// if you get to here the query worked fine ...
Update
I took your code and created a jsfiddle
There are a few minor changes needed to get it working :
<div style="width: 640px" class="editable" id="wysiwyg_2">
<img src="%5C%22http://%5C%22"><span style="\"font-weight:" bold;\"="">gdgfd
<span style="font-style: italic;"> gfd</span>
<big><br>sdfsdf<br>sdfsdf<br><br></big></span></div>
should be :
<div style="width: 640px" class="editable" id="wysiwyg_2"><span style="font-weight: bold;">gdgfd<span style="font-style: italic;">
gfd</span><br>sdfsdf<br>sdfsdf<br><br></span></div>
I have removed the strange characters !
Update 2
When the OK button is pressed the PHP is called - it POSTs the following data :
1:wysiwyg_2
value:<span style="font-weight: bold;">gdgfd<span style="font-style: italic;">
gfd</span><big><br>sdfsdf<br>sdfsdf<br><br></big></span>
So in your PHP you need to change $_POST['content'] to $_POST['value']