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.
Related
First time posting here (so please be gentle, as I am a relative PHP newbie).
I am building an intranet for our company and one of the things I need to do is to create a form that lists all outstanding sales orders (pulled from our accounting database) and provides a "submit" button beside each one to create the relevant work order.
Here is the code:
<div class="report_column">
<div class="report_header">
<div class="report_column_title" style="width:150px;margin-left:5px">ship date</div>
<div class="report_column_title" style="width:200px">customer</div>
<div class="report_column_title" style="width:140px;text-align:right">item</div>
<div class="report_column_title" style="width:120px;text-align:right">quantity</div>
</div>
<?php
// Open connection
include 'includes/dbconnect.php';
// Perform query
$result = mysqli_query($con,"SELECT * FROM tSalOrdr ORDER BY dtShipDate ASC");
// Retrieve results
while($row = mysqli_fetch_array($result)) {
$order = $row['lId'];
if ($row['bCleared'] == 0) {
$shipdate = substr($row['dtShipDate'], 0,10);
$customer = $row['sName'];
$po = $row['sComment'];
echo '<div class="report_item" style="width:750px";>';
echo '<form class="form" action="index.php?page=form&item=create_work_order" method="POST">';
echo '<div class="report_item_date" style="width:120px">'.$shipdate.'</div>';
echo '<div class="report_item_name" style="width:530px">'.$customer;
echo '<input type="hidden" name="po" value="'.$po.'" />';
echo '<input type="submit" class="submit" style="height: 25px;width:100px;margin:0px;padding:0px;margin:0px" value="work order"/>';
echo '</div>';
$result2 = mysqli_query($con,"SELECT * FROM tSOLine WHERE lSOId=$order ORDER BY sDesc ASC");
while($row = mysqli_fetch_array($result2)) {
if ($row['dRemaining'] <> 0) {
echo '<div class="report_item_details">';
echo '<div class="report_item_item">'.$row['sDesc'].'</div>';
echo '<div class="report_item_quantity">'.$row['dRemaining'].'</div>';
echo '</div>';
}
}
echo '</form>';
echo '</div>';
}
}
// Close connection
mysqli_close($con);
?>
</div>
What happens when I do this is that the first "submit" button will, for some reason, send me back to "index.php". The other buttons will load the correct page, however, they do not POST the required value.
Is there something I am doing wrong or is this something that needs different methodology than what I am currently using? My research on this seems to indicate that perhaps I should use javascript or an array to deal with this, but, having never dealt with either, I am not sure how to proceed. Any pointers would be appreciated.
Thanks.
#maniteja: The index.php is as follows:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en" />
<title></title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/forms.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/ico" href="favicon.ico" />
<script type="text/javascript" src="scripts/jquery-2.1.0.min.js" ></script>
<script type="text/javascript" src="scripts/tabcontent.js" ></script>
</head>
<body>
<!-- BEGIN MAIN CONTENT -->
<div id="wrapper">
<!-- BEGIN HEADER -->
<div id="header">
<img src="images/logo.jpg">
</div>
<!-- END HEADER -->
<!-- BEGIN MAIN MENU -->
<div id="leftcolumn">
<?php include 'includes/menu.php'; ?>
</div>
<!-- END MAIN MENU -->
<!-- BEGIN CONTENT FRAME -->
<div id="rightcolumn">
<div id="content_area">
<?php
if (isset($_GET['page']))
{$page = $_GET['page'];
include('pages/' . $page . '.php');}
else {include('pages/home.php');}
?>
</div>
</div>
<!-- END MAIN CONTENT -->
</body>
</html>
I've made seventeen other forms with it, so I don't think that it is the problem. I'm hoping that this is just a typo or a logic error on my part.
u can use
<button type='submit' class='' name='' onclick=''>Submit</button>
Try to do onclick. See my example below.
input type="button" name="submit" onclick='location.href="index.php?id=$id"'
AS far as I understand, you are making your forms go to index.php:
echo '<form class="form" action="index.php?page=form&item=create_work_order" method="POST">';
Can you explain what is your expected behavior when a button is pushed?
So I'm trying to run a query in PHP and while the query has no errors itself (or so it seems), the editor sees an error in an "echo" statement. The code is this:
<?php
include("include/session.php");
?>
<?php
$db = new PDO('mysql:host=localhost;dbname=cvtool;charset=utf8', 'user', 'pass'); // change these to your own database details
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // later, change ERRMODE_WARNING to ERRMODE_EXCEPTION so users wont see any errors
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$department = isset($_GET['department'])? $_GET['department']: null;
$sql = 'SELECT *
FROM education
WHERE school LIKE ?;
$q = $conn->prepare($sql);
$q->execute(array('%$department%');
$q->setFetchMode(PDO::FETCH_ASSOC);
while ($r = $q->fetch()) {
echo sprintf('%$department', $r['school']);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!--The viewport tag is used in order to scale the page properly inside any screen size -->
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>CV Tool</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/main.css"/>
<!--Import JQuery from stored file -->
<script src="js/jquery-1.11.1.min.js"></script>
<!--Import JQuery from Google's Content Delivery Network -->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">-->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript" src="js/backToTop.js"></script>
</head>
<body>
<!--Big wrapper contains the whole site (header,navigation menu,....,footer-->
<div id="big_wrapper">
<header id="top_header">
<img src="images/cvlogo.png">
</header>
<br>
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<?php
/**
* User has already logged in, so display relavent links, including
* a link to the admin center if the user is an administrator.
*/
if($session->logged_in){
echo "<li>Search</li>"
."<li>My CV(s)</li>"
."<li>My Account</li>"
;
echo "<li>Logout</li>";
}
else
?>
</ul>
Menu
</nav>
<section id="main_section">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Department</th>
</tr>
</thead>
<tbody>
<?php while ($r = $q->fetch()): ?>
<tr>
<td><?php echo htmlspecialchars($r['school'])?></td>
</tr>
<?php endwhile; ?>
</section>
<footer id="the_footer">
City CV Tool 2014
</footer>
</div>
</body>
</html>
The problem is that no matter how I change it, it still gives me an error. The error is at these specific lines:
while ($r = $q->fetch()) {
echo sprintf('%$department', $r['school']);
}
The error might be just something missing or something extra that I put without realizing it. I know the code is about a very specific case, but still any help is appreciated.
You never close the following string variable :
$sql = 'SELECT *
FROM education
WHERE school LIKE ?;
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();
}
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>
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.