How to paginate query results for Infinite Scroll? - php

I have a sample page that uses 2 PHP files and a MySql database, and I'm trying to use jQuery infinite scroll on it. How can I load the next group of data from database? For example, I have 100 records in my pictures database, and I want to show 20, and then the next 20 after some scrolling.
This is my current core:
index.php
<?php
ob_start();
require_once('images.html');
ob_end_flush();
?>
images.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> trata tata</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" href="./css/style.css" />
<!-- scripts at bottom of page -->
</head>
<body class="demos ">
<nav id="site-nav">
<h1>ole tu jest HOME</h1>
<h2>Menu 1</h2>
<ul class="docs-list">
<li>11111111
</ul>
<h2>Menu 2</h2>
<ul class="demos-list">
<li>222222222
<li class="current">3333333333</li>
</ul>
</nav> <!-- #site-nav -->
<section id="content">
<h1>cos tam ....</h1>
<div id="container" class="clearfix">
<?php
// Make a MySQL Connection
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("test") or die(mysql_error());
// Retrieve all the data from the "test " table
$result = mysql_query("SELECT * FROM foto")
or die(mysql_error());
// store the records of the "TABLENAME" table into $row array and loop through
while ( $row = mysql_fetch_array( $result, MYSQL_ASSOC ) ) {
// Print out the contents of the entry
//echo "details: ".$row['id'];
echo '<div class="box photo col3">';
echo "<img src=\"".$row['src']."\" alt=\"wwwwww\" />";
echo '</div>';
}
?>
</div> <!-- #container -->
<script src="./js/jquery-1.7.1.min.js"></script>
<script src="./jquery.masonry.min.js"></script>
<script>
$(function(){
var $container = $('#container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.box'
});
});
});
</script>
<footer id="site-footer">
szaki sdfsdfdsfsdf
</footer>
</section> <!-- #content -->
</body>
</html>

You need to add LIMIT to your queries. Example from the MySQL manual:
SELECT * FROM tbl LIMIT 5,10; # Retrieve rows 6-15
Here, 5 is the starting offset, and 10 is the amount of rows you want to fetch.
For the client-side you'll need the infinite scroll jQuery plugin.

Related

Fetch company details on a click on button using jquery

I created a table as company_list. This table consists of following fields
1)Company Name 2) Country 3) Vertical
So, lets assume there are 5 companies as following
Company Name: Water, Earth, Sun, Moon, Star
Countries: Water= UK, Earth=UK, Sun=Australia, Moon, =India, Star=Germany
Vertical:Water, Earth, Sun = WWF and Moon, Star=Social Welfare
First HTML is a select option to filter by
1st Country 2nd Vertical
So, if I chose UK country, vertical should auto select WWF (exclude AUS country company name)
Now, post this I have button to FETCH single COMPANY DETAILS first that matches the above condition.
Code, I have designed is not adding a filter and does fetch every company.
Kindly help with this.
1) index page
<?php
$conn = mysqli_connect("localhost","root","","accounts");
$sql = "SELECT * FROM company_list";
$res= mysqli_query($conn,$sql);
$res1=mysqli_query($conn,$sql);
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<style media="screen">
.navbar-inverse {
background-color: #4a8cbb;
border-color: #4a8cbb;
}
#row1{
margin-left: 100px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<select class="form-control">
<?php while ($row=mysqli_fetch_array($res)):; ?>
<option value="">SELECT COUNTRY</option>
<option value=""><?php echo $row['country']; ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="navbar-header" id="row1">
<select class="form-control">
<?php while ($row1=mysqli_fetch_array($res1)):; ?>
<option value="">SELECT VERTICAL</option>
<option value=""><?php echo $row1['vertical']; ?></option>
<?php endwhile; ?>
</select>
</div>
<div class="navbar-header" id="row1">
<button id="fetch_company" class="btn btn-success btn-lg btn-block btn-huge">FETCH COMPANY DETAILS</button>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-3">
Company Name:<span id="com_get_data"></span>
</div>
</div>
</body>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var count = 0;
$("#fetch_company").click(function(){
//alert("Working");
count = count + 1;
$("#com_get_data").load("get_data.php",{countNew:count});
});
});
</script>
</html>
2)Get_data.php
<?php
$conn = mysqli_connect("localhost","root","","accounts");
$countNew = $_POST['countNew'];
$sql = "SELECT * FROM company_list LIMIT $countNew";
$res = mysqli_query($conn,$sql);
if (mysqli_num_rows($res) > 0) {
while ($row = mysqli_fetch_array($res)) {
echo $row['company_name'];
}
}
?>
Please check using $.ajax
Jquery Code
<script type="text/javascript">
$(document).ready(function(){
var count = 0;
$("#fetch_company").click(function(){
//alert("Working");
count = count + 1;
$.ajax({
type:"POST",
url: "get_data.php",
data:{countNew:count},
cache: false,
success: function(result){
$("#com_get_data").html(result);
}
});
});
});
</script>
Php Code
<?php
$conn = mysqli_connect("localhost","root","","accounts");
$countNew = $_POST['countNew'];
$sql = "SELECT * FROM company_list LIMIT $countNew";
$res = mysqli_query($conn,$sql);
if (mysqli_num_rows($res) > 0) {
while ($row = mysqli_fetch_array($res)) {
echo $row['company_name'];
}
}
else
{
echo 'No result found';
}
?>
Note: here you loop trough fetch data you need to add data in string array after that return data in JSON
Please check here for more details Click Here

HTML Page trying to get information from php / mysql

This fairly simple issue is vexing me. I have an html page laid out with CSS. I have a simple php page that returns the latest record from a mysql site. I need to display this information in the html page in the "leftContent" div.
working 'latest.php' page is:
<?php
/*
Return the latest date and record for the left pane.
*/
include 'ESP8266_dbLogin.php';
$result = mysqli_query($link, "SELECT * FROM `thLog` ORDER BY logID DESC LIMIT 1") or die ("Connection error");
while($row = mysqli_fetch_array($result)) {
echo "Date: " . $row['logDate'] . "<br>";
echo "lightVal: " . $row['lightVal'];
}
mysqli_close($link);
?>
'index.html' code is as follows, with the target DIV of contentLeft for the php variables:
<!DOCTYPE html>
<!-- Basic Layout -->
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Sparks - Monitor</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href='//fonts.googleapis.com/css?family=Baloo' rel='stylesheet'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="data24.js" ></script>
</head>
<body>
<div id="wrapper">
<div id="main">
<div id="banner">
<div id="bannerLeft">
<img class="bannerImg" alt="ESP8266 Logo" src="images\imgESP8266.png">
</div>
<div id="bannerRight">
<img class="bannerImg" alt="Settings Icon" src="images\imgGear.png">
</div>
<div id="bannerMain">
<h1>SPARKS Energy Monitor - Home</h1>
</div>
</div>
<div class="content" id="contentLeft">
<h2>Current Usage:</h2>
<p> The current lightVal and date should be here<p>
</div>
<div class="content" id="contentRight">
Generating chart, please wait...
</div>
</div>
</div>
</body>
<html>
Any help is gratefully received on the most efficient way to get the php variables (lightVal) into the html page. I know, stupid question!!
1) Rename your index.html to index.php
2) Replace your target div with your PHP code:
<div class="content" id="contentLeft">
<h2>Current Usage:</h2>
<?php
/*
Return the latest date and record for the left pane.
*/
include 'ESP8266_dbLogin.php';
$result = mysqli_query($link, "SELECT * FROM `thLog` ORDER BY logID DESC LIMIT 1") or die ("Connection error");
while($row = mysqli_fetch_array($result)) {
?>
<p class="dateClass"><?=$row['logDate']?></p>
<p class="lightValClass"><?=$row['lightVal']?></p>
<?
}
mysqli_close($link);
?>
</div>
It should be enough, just call index.php from browser.

Unexpected HTML result using List view JQuery

My implementation is at : http://i.cs.hku.hk/~hsbashir/Project_Work/Listview/list_view.html
The first entry is when the list is hardcoded. Second and third ones are when they are extracted from the server using xmlhttp object. I am unable to understand why in the 2nd & 3rd list the formatting is different.
Original HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
lastRecord=0;
function loadNews(){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
var x = document.getElementById("sample");
x.innerHTML = "hello";
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var news = document.getElementById("news_mesgs");
news.innerHTML += xmlhttp.responseText;
$("news_mesgs").enhanceWithin();
}
}
xmlhttp.open("GET", "queryNews.php?lastRecord="+lastRecord,true);
xmlhttp.send();
}
</script>
</head>
<body onload="loadNews()">
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<ul data-role="listview" data-inset="true" id="news_mesgs">
<li>
<a href="#">
<img src="http://i.cs.hku.hk/~hsbashir/Project_Work/Listview/suicide-panel.jpg">
<h2> HKU identifies a new strategy to protect flowers from freezing stress </h2>
<p> sample description </p>
</a>
</li>
</ul>
</div>
</div>
<div id="sample"></div>
</body>
</html>
Updated HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
lastRecord=0;
function loadNews(){
$('#sample').html( 'hello' );
$.get(
"queryNews.php?lastRecord="+lastRecord,
function( data ) {
$('#news_mesgs').append( data )
.enhanceWithin();
}
);
}
</script>
</head>
<body onload="loadNews()">
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<ul data-role="listview" data-inset="true" id="news_mesgs">
<li>
<a href="#">
<img src="http://i.cs.hku.hk/~hsbashir/Project_Work/Listview/suicide-panel.jpg">
<h2> HKU identifies a new strategy to protect flowers from freezing stress </h2>
<p> sample description </p>
</a>
</li>
</ul>
</div>
</div>
<div id="sample"></div>
</body>
</html>
PHP
<?
...
mysql_connect($host,$username,$password);
mysql_select_db($database) or die( "Unable to select database");
$query = "SELECT * FROM News_Info";
$result = mysql_query($query) or die( "Unable to execute query");
while ($row = mysql_fetch_array($result)){
print "<li>";
print "<h2>".$row['Title']."</h2>";
print "<p>sample description is here</p>";
print "</a>";
print "</li>";
}
?>
The second and third are added after the widget has been initialized. You therefore have to re-enhance (refresh) the widget each time you make an update to it. And you can do that using the $(parent_of_new_content).listview('refresh'). In your case you would have to call the following:
$('#news_mesgs').listview( 'refresh' );
Just out of curiosity, is there any particular reason why you're using plain vanilla JS for your ajax call? If you were to use jQuery (recommended) your function would be:
lastRecord=0;
function loadNews(){
$('#sample').html( 'hello' );
$.get(
"queryNews.php?lastRecord="+lastRecord,
function( data ) {
$('#news_mesgs').append( data )
.listview( 'refresh' );
}
);
}
EDIT
Please note that in the above code .enhanceWithin() has been replaced with .listview('refresh')
JS FIDDLE DEMO

PHP echo to another page

What i wrong with this code below. I am trying to get it to echo to another page but it does not seem to pick up the data that is on the database.
<?php
{
// connect to server
mysql_connect("localhost", "u", "") or die(mysql_error());
//select database
mysql_select_db("") or die(mysql_error());
//Create a query that selects all data from the PATIENT table where the username and password match
$query = "SELECT`Appointment_id`, `Doctor_id`, `Patient_id`, `Appointment_time`, `Appointment_date` FROM `Appointment`";
//executes query on the database
$result = mysql_query ($query) or die ("didn't query");
//this selects the results as rows
$num = mysql_num_rows ($result);
//if there is only 1 result returned than the data is ok
if ($num == 1)
{
$row=mysql_fetch_array($result);
$_SESSION['Appointment_id'] = $row['Appointment_id'];
$_SESSION['Doctor_id'] = $row['Doctor_id'];
}
}
?>
Appointment.php
<!DOCTYPE html>
<?php
session_start();
?>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="my.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<script src="my.js">
</script>
<!-- User-generated css -->
<style>
</style>
<!-- User-generated js -->
<script>
try {
$(function() {
});
} catch (error) {
console.error("Your javascript has an error: " + error);
}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<a data-role="button" data-theme="d" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
Back
</a>
<a data-role="button" href="index.html" data-icon="home" data-iconpos="right" data-theme="d"class="ui-btn-right">
Home
</a>
</div>
<div data-role="content">
<?php
{
// connect to server
mysql_connect("localhost", "", "") or die(mysql_error());
//select database
mysql_select_db("") or die(mysql_error());
$query = "SELECT `Appointment_id`, `Doctor_id`, `Patient_id`, `Appointment_time`, `Appointment_date` FROM `Appointment`";
//executes query on the database
$result = mysql_query ($query) or die ("didn't query");
//this selects the results as rows
$num = mysql_num_rows ($result);
//if there is only 1 result returned than the data is ok
if ($num == 1)
{
$row=mysql_fetch_array($result);
$_SESSION['Appointment_id'] = $row['Appointment_id'];
$_SESSION['Doctor_id'] = $row['Doctor_id'];
}
}
?>
</div>
</div>
</body>
</html>
Echo onto this page
<!DOCTYPE html>
<?php
session_start();
?>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="my.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<script src="my.js">
</script>
<!-- User-generated css -->
<style>
</style>
<!-- User-generated js -->
<script>
try {
$(function() {
});
} catch (error) {
console.error("Your javascript has an error: " + error);
}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<a data-role="button" data-theme="d" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
Back
</a>
<a data-role="button" data-icon="home" data-iconpos="right" data-theme="d"class="ui-btn-right">
Home
</a>
<h3>
Details
</h3>
</div>
<div data-role="content">
<form name="form1" method="post" action="login.php">
<strong>Your Details</strong>
<br />
<br />
Appointment: <?php echo $_SESSION['Appointment_id'];?>
<br />
<br />
Doctor: <?php echo $_SESSION['Doctor_id'];?>
<br />
<br />
</div>
</div>
</body>
</html>
The second section is where the database is picking up the information (Appointment) and the third shows where i need it to display
<!DOCTYPE html>
<?php
session_start();
?>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="refresh" content="2;url=details1.php">
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="my.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<script src="my.js">
</script>
<!-- User-generated css -->
<style>
</style>
<!-- User-generated js -->
<script>
try {
$(function() {
});
} catch (error) {
console.error("Your javascript has an error: " + error);
}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<a data-role="button" data-theme="d" href="login.html" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
Back
</a>
<a data-role="button" href="index.html" data-icon="home" data-iconpos="right" data-theme="d"class="ui-btn-right">
Home
</a>
<h3>
Login Process
</h3>
</div>
<div data-role="content">
login.php
<!DOCTYPE html>
<?php
session_start();
?>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="refresh" content="2;url=details1.php">
<title>
</title>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="my.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
<script src="my.js">
</script>
<!-- User-generated css -->
<style>
</style>
<!-- User-generated js -->
<script>
try {
$(function() {
});
} catch (error) {
console.error("Your javascript has an error: " + error);
}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<a data-role="button" data-theme="d" href="login.html" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
Back
</a>
<a data-role="button" href="index.html" data-icon="home" data-iconpos="right" data-theme="d"class="ui-btn-right">
Home
</a>
<h3>
Login Process
</h3>
</div>
<div data-role="content">
<?php
// takes the variables from action script and assigns them php variables names
$user = $_POST ['username'];
$pass = $_POST ['password'];
// if there is a user name and password
if ($user && $pass)
{
// connect to server
mysql_connect("localhost", "", "") or die(mysql_error());
//select database
mysql_select_db("") or die(mysql_error());
//Create a query that selects all data from the PATIENT table where the username and password match
$query = "SELECT * FROM Patient WHERE Username = '$user' AND Password = '$pass'";
//executes query on the database
$result = mysql_query ($query) or die ("didn't query");
//this selects the results as rows
$num = mysql_num_rows ($result);
//if there is only 1 result returned than the data is ok
if ($num == 1)
{
//sends back a data of "Success"
echo "Successful Login";
$row=mysql_fetch_array($result);
$_SESSION['Title'] = $row['Title'];
$_SESSION['First_name'] = $row['First_name'];
$_SESSION['Last_name'] = $row['Last_name'];
$_SESSION['Address'] = $row['Address'];
$_SESSION['Line_2'] = $row['Line_2'];
$_SESSION['Line_3'] = $row['Line_3'];
$_SESSION['Postcode'] = $row['Postcode'];
$_SESSION['Home'] = $row['Home'];
$_SESSION['Mobile'] = $row['Mobile'];
}
else
{
//sends back a message of "failed"
echo "Unsuccessful Login";
}
}
?>
</div>
</div>
</body>
</html>
please add at the top
session_start();
since you are using $_SESSION .. you need to use session_start() immediately after php opening tag
<?php
session_start();
and not only on this page .. session_start() should be there on every page where you want you use session_start() .. otherwise $_SESSION is not accessible..
Please use session_start() on both of the pages, if you dont start that you will not be able to use that
EDIT
Create a test page to see your sessions are working?
if yes then test that on other page
also try adding a simple echo in your if condition where you are setting the session values. If that echo triggers it means your code is correct and something is wrong with SESSION. And if echo dont trigger, it means your code is not correct and sessions are not being set
if your just trying to get the first row
$query = "SELECT `Appointment_id`, `Doctor_id`, `Patient_id`, `Appointment_time`, `Appointment_date` FROM `Appointment` WHERE rownum = 1 ; ";
Edit:
Ok so here I believe the logical error lies
$query = "SELECT `Appointment_id`, `Doctor_id`, `Patient_id`, `Appointment_time`, `Appointment_date` FROM `Appointment`";
$result = mysql_query ($query) or die ("didn't query");
$num = mysql_num_rows ($result);
if ($num == 1)
{
}
Since your query has no WHERE clause, it is returning all records that there are, and You are setting the SESSION values only when there is 1 record. You should also have an else condition to see what happens in real.
Create a query that selects all data from the PATIENT table where the username and password match
But your query does not do that, it gets data for all the PATIENTs
For example if your username and password came from a POSTed form then you could do
$username=mysql_real_escape_string($_POST["username"]);
$password=mysql_real_escape_string($_POST["password"]);
Then you could use both those values inside a WHERE clause. Since I do not know the structure of your tables apart from just reading your query, I can not write it exactly. But just to give you an idea, a where could be like
$query="SELECT id from YourTable where $username='$username' and password='$password'"
Very important to note since you are a beginner : mysql_* functions should no longer be used. If you are starting, don't start with something that's gone. Read about mysqli_* or PDO
Edit 2:
Ok great, so do this
On successful login where you store Patient's details in SESSION, also store Patient_id like $_SESSION['Patient_id'] = $row['Patient_id']; //or maybe its just id. Check your table
On Appointment.php change your query to
$pid=intval($_SESSION["Patient_id"]);
$query = "SELECT Appointment_id, Doctor_id, Patient_id, Appointment_time, Appointment_date FROM Appointment where Patient_id=$pid";
Add an else condition below your if($num==1) { } block like
PHP
else{
echo "Somehow we didn't get 1 record";
die();
}

jQuery Load isn't loading content into the div, redirects to the other page.

Ok , so I am trying to load content from a another page using JQUERY LOAD method SO THE content can appear without the page refreshing. I did that but when I click on the link below generated from PHP , it still redirects me to the other page instead of the content loading into the <div class="panel">
Below is my code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title> MadScore, A Social Scoring Platform </title>
<link rel="stylesheet" type="text/css" href="css/madscore.css">
<link rel="stylesheet" type="text/css" href="css/skins/tango/skin.css" />
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="javascript/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
scroll: 1, buttonNextHTML:"<div></div>", buttonPrevHTML:"<div></div>"
});
});
</script>
//Here is where I made the Jquery call for the div below with class "panel" but it won't load ..
<scrip type="text/javascript">
$(document).ready(function(){
$("profile").click(function(){
$(".panel").load("this.href");
});
});
</script>
</head>
<body>
<div class="sliding-panel">
<div class="container">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li>
<li>
<div class="panel"> //panel supposed to be triggered by Jquery
<h1> People </h1>
<?php
database_connect();
$query = "select * from People";
$result = $connection->query($query);
$row_count =$result->num_rows;
for($i = 1; $i <= $row_count; $i++)
{
$row = $result->fetch_assoc();
echo "<a href='/profile.php?id=".$row['ID']."' id='profile'><img src ='../".$row['Picture']."' width='100' height='100' /> </a>";
}
?>
</div>
</li>
<li>
<div class="panel">
<h1>Ballers</h1>
</div>
</li>
<li>
<div class="panel">
<h1>Movies</h1>
</div>
</li>
<li>
<div class="panel">
<h1> Talking heads</h1>
</div>
</li>
</ul>
There are few errors,
1 Wrong spelling of script. scrip should be script
2 wrong syntax of id selector. $("profile") should be $("#profile")
3 loading constant string instread of current element href. load("this.href") should be
load(this.href)
Change
<scrip type="text/javascript">
$(document).ready(function(){
$("profile").click(function(){
$(".panel").load("this.href");
});
});
</script>
To
<script type="text/javascript">
$(document).ready(function(){
$("#profile").click(function(){
$(".panel").load(this.href);
});
});
</script>

Categories