Sequential jquery 'pages', third frame gives a reference error - javascript

I am quite new to javascript/jquery and having been playing around with the w3schools tutorials and the jquery documentation and made a page which will accept some user input and then via javascript print some output. I assumed i could modify this to work sequentially but when the second page should call the third page I get
ReferenceError: $gp is not defined
[Break On This Error]
$('#txtField2').load('getglycosites.php?q='+$gp+'r='+$('.glycotype').val());
I would appreciate if anyone has a trick to be able to use the $_get variable in the jquery script.
Code for pages:
first page (test.php):
<html>
<head>
<title>LeidenGlycoPeptide DataBase</title>
<script src="jquery-1.9.1.min.js"></script>
</head>
<script>
$(document).ready(function() {
$('.glycoprotein').change(function() {
$('#txtField').load('getglycopeptides.php?gp='+$('.glycoprotein').val());
});
});
</script>
<body>
<h1>Welcome to the LeidenGlycoPeptide DataBase</h1>
<?php
$link = mysql_connect("localhost","reader","") or die (mysql_error());
mysql_select_db('leidenGlycoPeptide') or die ();
$query = 'select protein from glycoPeptide';
$result = mysql_query($query);
mysql_close($link);
?>
<form>
<p>Select glycopeptide to search for (interactive dialog)</p>
<?php
echo"<select class=\"glycoprotein\">";
echo"<option value=\"\">select glycoprotein</option>";
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
foreach ($line as $col_value) {
echo"<option value=\"$col_value\">$col_value</option>";
}
}
echo"</select>";
?>
</form>
<br>
<div id="txtField"></div>
</body>
</html>
Second Page (getglycopeptides.php):
<html>
<head>
<title>glyco</title>
<script src="jquery-1.9.1.min.js"></script>
</head>
<script>
$(document).ready(function() {
$('.glycotype').change(function() {
//NOTE $q/q are undefined
$('#txtField2').load('getglycosites.php?q='+$gp+'r='+$('.glycotype').val());
});
});
</script>
<body>
<?php
// The next variable is the one I would like to use inside the jquery
$gp=$_GET["gp"];
$link = mysql_connect("localhost","reader","") or die (mysql_error());
mysql_select_db("leidenGlycoPeptide",$link) or die();
$query = "select glycoType from run,glycoPeptide where run.id = glycoPeptide.id and glycoPeptide.protein like '".$gp."'";
$result = mysql_query($query);
?>
<form>
<?php
echo "<select class=\"glycotype\">";
echo "<option value=\"\">select glycosylation</option>";
while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
foreach ($row as $col_value)
{
echo"<option value=\"$col_value\">$col_value</option>";
}
}
echo "</select>";
mysql_close($link);
?>
</form>
<br>
<div id="txtField2"></div>
</body>
</html>
The third page (getglycosites.php):
<html>
<head>
<title>sites</title>
</head>
<body>
<?php
$gp=$_GET["gp"];
$r=$_GET["r"];
$link = mysql_connect("localhost","reader","") or die (mysql_error());
mysql_select_db("leidenGlycoPeptide",$link) or die();
$query = "select glycoSite from run,glycoPeptide where run.id = glycoPeptide.id and run.glycoType like '".$r."' and glycoPeptide.protein like '".$q."'";
//echo $query;
$result = mysql_query($query);
echo "<select name=\"site\" onchange=\"foo\">";
echo "<option value=\"\">select glycosite</option>";
while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
foreach ($row as $col_value)
{
echo"<option value=\"$col_value\">$col_value</option>";
}
}
echo "</select>";
mysql_close($link);
?>
</body>
</html>
PS: The third page is currently only supposed to show a new select field but once I get this working it will be a part in a large sequential sequence.
Thanks in advance

I was able to 'fix' this by adding the following line (to the jquery script):
var gp = '<?php echo htmlspecialchars($_GET['gp']); ?>';
Making the total script part of the third page:
<script>
var gp = '<?php echo htmlspecialchars($_GET['gp']); ?>';
$(document).ready(function() {
$('.glycotype').change(function() {
$('#txtField2').load('getglycosites.php?q='+gp+'&r='+$('.glycotype').val());
});
});
</script>

Related

How to keep appending data from database as you retrieve, on a webpage?

Whenever I enter an id number in text box and click scan button, i get data from database and it is displayed below the text box in a predefined format. Now when i enter another id and hit scan, the new data thus retreived replaces the older one. I want it to be displayed below the already existing data on the page.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title> ShopNGo </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header id="header">
<div class="container">
<form name="products" method="POST">
<br><br>
<button type="submit" name="scan" id="scan"> <h1> SCAN! </h1> </button>
<br><br><br>
<input type="text" name="id">
</form>
</div>
</header>
<div class="main">
<table border="0">
<?php
if (isset($_POST["scan"])) {
$servername = "localhost";
$username = "#";
$password = "#";
$dbname = "#";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection Failed:" . mysqli_connect_error());
$query = "SELECT name, price, img FROM product WHERE id = $_POST[id]";
$result = mysqli_query($conn, $query);
if(mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
echo "<tr> <table border='0'> <tr>";
echo "<img src='$row[img]'>";
echo "<br>";
echo $row["name"];
echo "<br>";
echo $row["price"];
echo "</tr> </table> </tr>";
}
}
mysqli_close($conn); }
?>
</table>
</div>
</body>
</html>
please help me !!
also it would be a great help if u can suggest some improvements in the existing code other than what i asked for... Thank you so much !!
use ajax to post your id to another php script that checks id for data, put the html into a string variable and then echo it at the end. You can use the ajax success callback to append the data
$.ajax({
type: "POST",
url: url,
data: id,
success: function(data){
$('#targetDiv').append(data);
}
});
php script:
$query = "SELECT name, price, img FROM product WHERE id = $_POST[id]";
$result = mysqli_query($conn, $query);
if(mysqli_num_rows($result) > 0)
{
while($row =
mysqli_fetch_assoc($result))
{
$element = "<tr> <table border='0'> <tr>";
$element .= "<img src='$row[img]'>";
$element .= "<br>";
$element .=$row["name"];
$element .= "<br>";
$element .= $row["price"];
$element .= "</tr> </table> </tr>";
}
}
echo $element;

how to put dropdown result in textbox field in php

hi guys can anyone help me i have reach to my problem but i can't pass the value from div to input field which need please
page1.php
<!doctype html>
<?php
$conn = mysql_connect('localhost','root','') or die (mysql_error);
$db = mysql_select_db('employee', $conn) or die (mysql_error);
$select = "SELECT * FROM employee ";
$result = mysql_query($select);
$option = '';
while($row = mysql_fetch_assoc($result)){
$option .= '<option value="'.$row['id'].'">'.$row['employee_name'].'</option>';
}
?>
<html>
<head>
<title>Retrieve data from database using Ajax</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function getData(q, a){
$.ajax({
url: 'loademployeedata.php?empid='+q, //call storeemdata.php to store form data
success: function(html) {
var ajaxDisplay = document.getElementById(a);
ajaxDisplay.innerHTML = html;
}
});
}
$(document).ready(function(){
$("#tyt").live("change", function() {
$("#ab ").val($(this).find("option:selected").attr("value"));
});
});
</script>
</head>
<body>
<form method="post">
<select id="tyt" onchange="getData(this.value, 'dis')" >
<?php
echo $option;
?>
</select>
<div id="dis" >
</div><input name="" type="text" id="ab" >
</form>
</body>
second connecting page is
<?php
$empid = $_GET['empid'];
$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server..
$db = mysql_select_db("employee", $connection); // Selecting Database
if (isset($empid)) {
$query = " SELECT * FROM employee WHERE id = '$empid'";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result)){
$a=$row['employee_salary'];?>
<?php echo $a; ?>
<?php }
}
mysql_close($connection); // Connection Closed
?>
i just need to put the value instead of div means into input field
Try something like this (untested):
<!doctype html>
<?php
$conn = mysql_connect('localhost','root','') or die (mysql_error);
$db = mysql_select_db('employee', $conn) or die (mysql_error);
$select = "SELECT * FROM employee ";
$result = mysql_query($select);
$option = '';
while($row = mysql_fetch_assoc($result)){
$option .= '<option value="'.$row['id'].'">'.$row['employee_name'].'</option>';
}
?>
<html>
<head>
<title>Retrieve data from database using Ajax</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on("change", "#tyt", function() {
var tmp = $(this).val();
$("#ab").val(tmp);
$.ajax({
url: 'loademployeedata.php',
type: 'post',
data: 'empid='+q, //call storeemdata.php to store form data
success: function(recd) {
$('#a').val(recd);
}
});
});
});
</script>
</head>
<body>
<form method="post">
<select id="tyt" onchange="getData(this.value, 'dis')" >
<?php echo $option; ?>
</select>
<div id="dis"></div>
<input id="ab" type="text">
</form>
</body>

how to get value from php loop to div

i want to change div value when clicking php while loop.,
My php code
<?php $query = mysql_query("select * from tbl_sub_product where product_id='$id'");
while($row=mysql_fetch_array($query))
{ ?>
<div><a href="#" class="showElement" id="showElement" >
<?php echo $row['name']; ?><?php echo $row['id']; ?></a></div>
<?php } ?>
my query was
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var $target = $('#target');
$(".showElement").click( function(e) {
e.preventDefault();
$target.append( $(this).text() );
});
});
</script>
i want the result in this div
<div id="target">user Id:<php echo $id ?>User Nmae:<?php echo $name ?>user designation :<?php echo $designation ?></div>
what changes i want to do my code for getting data in my second div
You're asking to take the mysql data from php and magically know what it is without querying again with AJAX or some other request.
There are many ways you can do this, but the simplest is to store the exact view of what you want in a child div below the a tag.
You need to change to prepared statements too.... If you don't want to fine just change the stmt stuff back to what you have and row will do what you want.
<style>
.hidden{
display: none;
}
</style>
<?php
$stmt = mysqli_prepare("select * from tbl_sub_product where product_id='$id'");
$stmt->execute();
$result = $stmt->get_result();
while($row = $result->fetch_assoc()){
?>
<div>
<a href="#" class="showElement" >
<?php echo $row['name']; ?> <?php echo $row['id']; ?>
</a>
<div class="hidden getTarget">
user id: <php echo $row['id']; ?>
User name: <?php echo $row['name']; ?>
user designation: <?php echo $row['designation']; ?>
</div>
</div>
<?php
}
?>
<script>
$(document).ready(function(){
var $target = $('#target');
$(".showElement").click( function(e) {
e.preventDefault();
$target.append( $(this).parent().find('.getTarget').text() );
});
});
</script>
Don't use ids in a loop. Unless you have a specific identifier to separate each one.
Don't copy and paste as well.. please read the code and understand it.

php while but the result have to shows in javascript

I have the following code and what I'm trying to do is to show the mysql result in the message box with javascript, but when I click on the message box it shows me only one result for every button.
I want every button have his own message which is in database.
Does anybody have an idea on how I can do it?
<?
$query = "SELECT * FROM `Points`";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result)){
?>
<div style="position:absolute; overflow:hidden; <?php echo $row[Pos]; ?> height:23px; z-index:0">
<button onClick="showMsgBox();" id="showBtn">Show MsgBox</button>
</div>
<script>
$("#showBtn").focus();
msgBoxImagePath = "images/";
function showMsgBox() {
$.msgBox({
title: "Ads",
content: "<? echo $row[Ctn]; ?>",
type: "alert"
});
}
</script>
<?}?>
In the database Pos is the position of the button and Ctn is the message.
Please help.
Try this ;)
<?php
$query = "SELECT * FROM `Points`";
$result = mysql_query($query);
/* all messages */
$messages = array();
$index = 0;
while($row = mysql_fetch_assoc($result)){
$messages[] = $row['Ctn'];
?>
<div style="position:absolute; overflow:hidden; <?php echo $row['Pos']; ?> height:23px; z-index:0">
<button onClick="showMsgBox(<? echo $index++; ?>);" id="showBtn">Show MsgBox</button>
</div>
<?php
}
?>
<script>
var messages = <?php echo json_encode($messages); ?>;
$("#showBtn").focus();
msgBoxImagePath = "images/";
function showMsgBox(index){
$.msgBox({
title: "Ads",
content: messages[index],
type: "alert"
});
}
</script>
Used <?php ... ?> tags you can change as per your need;
Firstly, you id should be unique, if your input is the loop make sure your id is also unique.
Please see code below this might work for you.
<?
$query = "SELECT * FROM 'Points'";
$result = mysql_query($query);
$queryCounter = 0;
$message = array();
while($row = mysql_fetch_assoc($result)){
$message[$queryCounter] = $row[Ctn];
?>
<div style="position:absolute; overflow:hidden; <?php echo $row[Pos]; ?> height:23px; z-index:0">
<button onClick="showMsgBox(<?php echo $queryCounter; ?>);" id="showBtn<?php echo $queryCounter; ?>">Show MsgBox</button>
</div>
<script>
$("#showBtn").focus();
msgBoxImagePath = "images/";
function showMsgBox(id) {
$.msgBox({
title: "Ads",
content: "<? echo $message[id]; ?>",
type: "alert"
});
}
</script>
<? $queryCounter ++; }?>
check out this code, i hope it will work for you, here i have used data-value html5 attribute to get the message when button is clicked.
<?php
$query = "SELECT * FROM `Points`";
$result = mysql_query($query);
while($row = mysql_fetch_assoc($result)){
?>
<div style="position:absolute; overflow:hidden; <?php echo $row['Pos']; ?> height:23px; z-index:0" data-value="<?php echo $row['Ctn']; ?>" id="showMsgBoxContent_<?php echo $row['id'];?>" >
<button onClick="showMsgBox(<?php echo $row['id']; ?>);" id="showBtn_<?php echo $row['id']; ?>">Show MsgBox</button>
</div>
<?php
}
?>
<script>
msgBoxImagePath = "images/";
function showMsgBox(id)
{
$("#showBtn_"+id).focus();
var showContent = $('#showMsgBoxContent_'+id).getAttribute('data-value');
$.msgBox({
title: "Ads",
content: showContent,
type: "alert"
});
}
</script>

Place a list inside an session and display each session

Im trying to create a shopping cart style website. I'm able to display the products through setting the products as a class and passing that through to my shopping cart page. However, I need to save the list of products into a session so I can add and or clear each item added to the cart.
Products.php
<?php
require_once 'class_product.php';
$product = new product();
$product_id =(int)$_GET['product_id']; //get id from home page
$username = "";
$password = "";
$hostname = "";//blanked this out for public use
//connection to the database
$dbhandle = mysql_connect($hostname, $username, $password)
or die("Unable to connect to MySQL");
//select a database to work with
$selected = mysql_select_db("poti",$dbhandle)
or die("Could not select examples");
//execute the SQL query and return records
$result = mysql_query("SELECT * FROM products where product_id=$product_id");
echo '<form name="form1" method="post" action="cart.php" target="bottom_right">';
echo '<table class="Grocery-table">';
while($row = mysql_fetch_array($result))
{
$product->setProductId($row['product_id']);
$product->setProductName($row['product_name']);
$product->setStock($row['in_stock']);
$product->setUnitPrice($row['unit_price']);
$product->setUnitQuantity($row['unit_quantity']);
}
$_SESSION['product'] = serialize($product);
echo "<tr><td><b>Product ID</b></td>";
echo "<td>";
echo $product->getProductId();
echo "</td></tr>";
echo "<tr><td><b>Product Name</b></td>";
echo "<td>";
echo $product->getProductName();
echo "</td></tr>";
echo "<tr><td><b>Unit Price</b></td>";
echo "<td>";
echo $product->getUnitPrice();
echo "</td></tr>";
echo "<tr><td><b>Unit Quantity</b></td>";
echo "<td>";
echo $product->getUnitQuantity();
echo "</td></tr>";
echo "<tr><td><b>In Stock</b></td>";
echo "<td>";
echo $product->getStock();
echo "</td></tr>";
echo '<tr><td><b>Add</b></td><td><Input type="number" min="0" id="add_value" name="cart"></input>
<Input type="hidden" id="stock_value" name="stock_value" value ='.trim($product->getStock()).'></input></td></tr>';
echo '<tr><td></td><td><input type="submit" value="Submit" onclick="return numCheck()"></td></tr>';
echo "</table>";
echo "</form>";
?>
cart.php
<?php
session_start();
?>
<html>
<style type="text/css">
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Grocery Store</title>
</head>
<body>
<h2>Cart</h2>
<?php
require_once 'class_product.php';
$product = unserialize($_SESSION['product']);
//this allows me to see the information when i click submit
echo $product->getProductName();
echo $product->getProductId();
echo $product->getStock();
echo $product->getUnitPrice();
echo $_POST['cart'];
?>
</body>
</html>
How do i place the following $product->getProductName() etc into a Session that enables me to display all the products i've added to my cart.
Try this,
session_start();
$_SESSION['ProductName'] = $product->getProductName();
$_SESSION['ProductId'] = $product->getProductId();
$_SESSION['Stock'] = $product->getStock();
$_SESSION['UnitPrice'] = $product->getUnitPrice();
For multiple products, you may have to use an array of session.
<?php
session_start();
if(!isSet($_SESSION['cart_items']))
{
$_SESSION['cart_items'] = array();
}
$items =$product->getProductName()."|".$product->getProductId()."|".$product-
>getStock()."|".$product->getUnitPrice();
array_push($_SESSION['cart_items'],$items);
echo $_SESSION['cart_items'][0]; //First Product
echo "<br>";
echo $_SESSION['cart_items'][1]; //Second Product
?>

Categories