Add text beside checkbox - javascript

when click the checkbox another modal will pop up for the quantity of the selected value and I check Geda Jumuad and add "2" as quantity value but then the value '2' was put in the beginning of the checboxes . .
I want to put the quantity value beside the selected checkbox.. please help me.
heres my code
<b>Menu: </b>
<br>
<div class="menucontainers" style="background: #fff; border-style: solid; border-width: 2px; border-color:#ccccff; width: 400px; height:150px; overflow:auto;">
<!-- <img src ="../1.jpg" class="img-rounded"> -->
<ul>
<?php
include ('myConnection.php');
$query = "Select * from menu_category order by menu_cat_name";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result)) {
$menucatname = $row['menu_cat_name'];
$menucatid = $row['menu_cat_id_inc'];
?>
<li class="dropdownz" style="border-style: solid;border-color: white; border-bottom: 2px; border-left: 2px; border-right: 2px">
<i id = "arrow" class="icon-arrow"></i><?php echo "$menucatname"; ?>
<ul id="ddownz-menu" class="dropdownz-menu">
<li>
<?php
$query2 = "Select * from menu where menu_cat_id_inc = '$menucatid' order by menu_name";
$result2 = mysql_query($query2);
$countme = 0;
while ($row2 = mysql_fetch_array($result2)) {
$menuname = $row2['menu_name'];
$price = $row2['price'];
if ($countme % 2 == 0)
{
?>
<div class="col col-md-6">
<input type="checkbox" id="newmenu" name="cbox[]" style="font-size:15px" value="<?php echo $row2['menu_id_inc'];?>">
<?php
echo '<span id = "quantity" style = "color:black;"></span>'. " " . "$menuname";
?>
</div>
<?php
}
else
{
?>
<div class="col col-md-4">
<input type="checkbox" id="newmenu" name="cbox[]" value="<?php echo $row2['menu_id_inc'];?>">
<?php
echo '<span id = "quantity" style = "color:black;"></span>'. " " . "$menuname";
?>
</div>
<?php
}
}
?>
</li>
</ul>
</li>
<?php
}
?>
</ul>
</div>
and for javascript. .
$("#qtyok").click(function () {
var id = $("#menuid").val();
var qty = $("#qtybox").val();
if (qty != '') {
$("#loaderz").show();
$.post("fm_valuemenuload.php", {
id: id,
qty: qty
},
function (data, status) {
$("#loaderz").hide();
$("#modalQty").modal('hide');
$("#message").html('Added');
document.getElementById('quantity').innerHTML = qty;
price += data * qty;
$("#newprice").val(price.toFixed(2));
$("#modalSUCCESS").modal('show');
setTimeout(func1, 3000);
});
}
});
`

I might be misunderstanding your problem but... I think you just got it in the wrong order. Place the span after the $menuname.
Instead of
echo '<span id = "quantity" style = "color:black;"></span>'. " " . "$menuname";
Do
echo "$menuname".' <span id = "quantity" style = "color:black;"></span>';
You also must assign unique ids to your spans. Although your checkboxes are dynamic, you can for example retrieve the value of those checkboxes and append it to 'quantity'. You will have ids 'quantity1', 'quantity2', 'quantity3' produced. Change the previous line of code to
echo "$menuname".' <span id = "quantity'.$row2['menu_id_inc'].'" style = "color:black;"></span>';
You will also have to do something similar in your javascript. Retrieve the checkbox value number in a javascript variable, and append it to 'quantity' here
document.getElementById('quantity' + value).innerHTML = qty;

Related

How to populate li value into another dropdown after you select from first dropdown?

My problem is that I can get the value of the <li> tag from my database but I cannot figure out how I can use it to populate another dropdown using ajax and php? (I am not trying to create a selection dropdown)
I have 2 dropdown list, the first dropdown list is to select MOVIE and the second dropdown list is to select DATE. So when I select MOVIE, the second dropdown list will populate the date of the MOVIE which I select.
I've found a solution that uses the <select> tag and <option> tag. However, this doesn't really solve my problem. What I really want to do is add an image into my dropdown list.
So how can I do this using the <ul> tag and <li> tag in the dropdown list?
Below is my code:
HTML:
////////////////select movie//////////////////
<div class="select_movie" style="float:left;">
<div class="nice-select dropdown-toggle" id="selectmovie" data-toggle="dropdown" tabindex="0" style="margin-left: 200px; margin-top: 29px;"><span class="current">Select Movie</span>
<ul class="dropdown-menu scrollable-menu ul_movie" id="m_movie" >
<?php
$sql = "SELECT id,name,date,time,image FROM movie";
$res = mysqli_query($conn, $sql);
if(mysqli_num_rows($res) > 0) {
while($row = mysqli_fetch_object($res)) {
echo '<li data-value="' . $row->id . '"class="option" style="margin-top:10px; margin-bottom:10px;"><img src="' . $row->image . '" style="width:50px; height:80px; margin-right:10px;">' . $row->name . '</li>';
}
}
?>
</ul>
</div>
</div>
////////////////select date//////////////////
<div class="select_date" style="float:left">
<div class="nice-select dropdown-toggle" data-toggle="dropdown" tabindex="0" style="margin-left: 150px; margin-top: 29px;"><span class="current">Select Date</span>
<ul class="dropdown-menu scrollable-menu ul_date" id="selectdate" >
</ul>
</div>
</div>
Javascript:
<script>
$(document).on('click', '.ul_movie li', function () {
// alert('movie');
var movie_id = $(this).attr('data-value');
console.log(movie_id)
if(movie_id !== "") {
$.ajax({
url:"get_datetime.php",
data:{m_id:movie_id},
type:'POST',
success:function(response) {
// var resp = $.trim(response);
$('.ul_date li').html(response);
}
});
}
else {
$('.ul_date li').html("<li value=''>------- Select --------</li>");
alert("tghhh") ;
}
});
</script>
PHP:
<?php include("database/conn.php"); ?>
<?php
if(isset($_POST['m_id'])) {
$sql = "select `id`,`date` from movie where
`id`='".mysqli_real_escape_string($conn, $_POST['m_id'])."'";
$res = mysqli_query($conn, $sql);
//to test what value given
echo "<option value=''>".$_POST['m_id']."</option>";
if(mysqli_num_rows($res) > 0) {
echo "<option value=''>------- Select --------</option>";
while($row = mysqli_fetch_object($res)) {
// echo "<li data-value='" . $row->id . '"class="option" >' . $row->date . '</li>';
echo "<li data-value='".$row->id."' class='option'>".$row->date."</li>";
}
}
else{
echo "<option value=''>No showing time</option>";
}
} else {
header('location: ./');
}
?>
Use $('#selectdate').html(response); instead of $('.ul_date li').html(response);

Populate multiple form fields from foreach statement

I'm trying to populate multiple form fields from a generated button in a foreach statement. I don't have a vast knowledge of JS so I don't know if I'm just not thinking of a certain function or not.
I have the following code and I'm able to get title to populate in the form but I have no clue where to start for populating content as well based of the same button. ex: one button will load a specific title and content value while another edit button will load another specific title and content value.
//Announcement table select
$sql = "SELECT * FROM `announcements` ORDER BY `startDate` DESC"; //I want to see all existing announcements from database
$announcement = $dbConnect->query($sql);//execute query
$a = 0;
?>
<script type="text/javascript">
function changeText(title, content){
document.getElementById('title').value = title.id;
document.getElementById('content').value = document.getElementById(content).getAttribute('data-content');
}
</script>
<?php
foreach ($announcement as $row){ //Displays title, startDate, endDate from announcement table from database
$x[$a] = $row["title"];
$y[$a] = $row["content"];
echo "<h2 style=width:auto;padding:8px;margin-top:-30px;font-size:18px;><a style=text-decoration:none;color:#c4572f; >".$row["title"]."</a></h2><br>";
echo "<p style=padding-top:10px;>".$row["content"]."</p><br>";
echo "<p style=font-size:10px;>Posted: ".$row["startDate"]."</p><br>";
echo '<input id="'.$x[$a].'" type=button class=test onclick="changeText(this, '.$y[$a].');" value="Edit">';
echo '<p id="'.$y[$a].'" data-content="'.$row["content"].'">test</p>';
echo "<h5 style=line-height:2px;margin-top:-15px;><p>_____________________________________</p></h5><br>";
}
?>
</div>
</div>
</div> <!--m4 ends here-->
<div class="col m8 s8"> <!--m8 starts here-->
<div class="titleboxmargin grey" style="width:100%;">
<div class="bar yellow"></div>
<img class="boxicon" src="../images/announcementsicon.svg">
<h3 class="title">Announcements</h3>
</div>
<div class="col yellow-light"> <!--Announcement Form Starts-->
<form action="includes/postAnnouncement.php" method="post">
<ul class="yellow-form">
<li class="textfield-container">
<label for="text" class="textlabelblack">Title:</label>
<input id="title" name= "title" type="text" placeholder="Title of My Announcement">
</li>
<li class="textfield-container">
<label for="textarea" class="textlabelblack">Start Date:</label>
<input type="date" id="startDate" name="startDate">
</li>
<li class="textfield-container">
<label for="textarea" class="textlabelblack">End Date:</label>
<input type="date" id="endDate" name="endDate">
</li>
<li class="textfield-container">
<label for="textarea" class="textlabelblack">Announcement:</label>
<textarea id="content" name="content" rows="7"></textarea>
</li>
<li class="textfield-container">
<div class="leftsidebutton">
<input type="submit" class="button" style="width:auto; padding:5px; border:0;" name="register" value="Submit the form"/><!--Action: Attempts to Redirect to postAnnouncement.php-->
</div>
</li>
</ul>
</form>
The following code works
Edit:
<script type="text/javascript">
function changeText(title, content){
document.getElementById('content').value = document.getElementById(content).getAttribute('data-content');
document.getElementById('title').value = document.getElementById(title).getAttribute('data-content');
}
</script>
<?php
foreach ($announcement as $row){ //Displays title, startDate, endDate from announcement table from database
$tile = $row["announcementID"] * 2;
$cont = $row["announcementID"];
echo "<h2 style=width:auto;padding:8px;margin-top:-30px;font-size:18px;><a style=text-decoration:none;color:#c4572f; >".$row["title"]."</a></h2><br>";
echo "<p style=padding-top:10px;>".$row["content"]."</p><br>";
echo "<p style=font-size:10px;>Posted: ".$row["startDate"]."</p><br>";
echo '<input id="'.$tile.'" data-content="'.$row["title"].'" type=button class=test onclick="changeText(id, '.$cont.');" value="Edit">';
echo '<p id="'.$cont.'" data-content="'.$row["content"].'">test</p>';
echo "<h5 style=line-height:2px;margin-top:-15px;><p>_____________________________________</p></h5><br>";
}
?>
You could add a second parameter to your onclick handler:
$a = 0;
?>
<script type="text/javascript">
function changeText(elem, content){
document.getElementById('title').value = elem.id;
/*
* Here we get the value of the hidden content by the passed
* in id and assign it to the value of the #content form element
*/
document.getElementById('content').value = document.getElementById(content).value;
}
</script>
<?php
foreach ($announcement as $row){ //Displays title, startDate, endDate from announcement table from database
$x[$a] = $row["title"];
$y[$a] = $row["content"];
echo "<h2 style=width:auto;padding:8px;margin-top:-30px;font-size:18px;><a style=text-decoration:none;color:#c4572f; >".$row["title"]."</a></h2><br>";
echo "<p style=padding-top:10px;>".$row["content"]."</p><br>";
echo "<p style=font-size:10px;>Posted: ".$row["startDate"]."</p><br>";
echo '<input id="'.$x[$a].'" type=button class=test onclick="changeText(this, '.$y[$a].'); startDate('.$y[$a].'); " value="Edit">';
echo '<p style="display:hidden;" id="'.$y[$a].'" ></p>';
echo "<h5 style=line-height:2px;margin-top:-15px;><p>_____________________________________</p></h5><br>";
}
EDIT:
$a = 0;
?>
<script type="text/javascript">
function changeText(elem, contentID){
var contentElem = document.getElementById(contentID);
document.getElementById('title').value = elem.getAttribute('data-title');
/*
* Get the value of the hidden content's data attribute by the passed
* in id and assign it to the value of the #content form element
*/
document.getElementById('content').value = contentElem.getAttribute('data-content');
}
</script>
<?php
// Let's get $index as well
foreach ($announcement as $index => $row){ //Displays title, startDate, endDate from announcement table from database
$x[$a] = $row["title"];
$y[$a] = $row["content"];
echo "<h2 style=width:auto;padding:8px;margin-top:-30px;font-size:18px;><a style=text-decoration:none;color:#c4572f; >".$row["title"]."</a></h2><br>";
echo "<p style=padding-top:10px;>".$row["content"]."</p><br>";
echo "<p style=font-size:10px;>Posted: ".$row["startDate"]."</p><br>";
// Not sure if I'm escaping quotes correctly on this line:
echo '<input id="title'.$index.'" data-title="'.$x[$a].'" type=button class=test onclick="changeText(this, \"content'.$index.'\"); startDate('.$y[$a].'); " value="Edit">';
// Generate a unique id that we can reference
// and add `data-content` attribute
echo '<p style="display:hidden;" id="content'.$index.'" data-content="'.$y[$a].'"></p>';
echo "<h5 style=line-height:2px;margin-top:-15px;><p>_____________________________________</p></h5><br>";
}
I am not sure what your title and content values are, but I suspect they are not valid HTML element IDs. I think it would be better to avoid using the DOM as a data store and instead create a JSON representation of your announcement table in your script. My PHP is a little rusty, but it should be something similar to:
<script>
var rows = <?php echo json_encode($announcement); ?>;
</script>
Hopefully this will produce something like the following:
var rows = [
{
"title": "Title One",
"content": "Content One"
},
{
"title": "Title Two",
"content": "Content Two"
}
];
This way, our changeText function need only accept a row index as parameter:
function changeText (index) {
document.getElementById('title').value = rows[index].title;
document.getElementById('content').value = rows[index].content;
}
All that is left is to pass the row index where we call changeText:
<?php foreach ($announcement as $index => $row) { ?>
<!-- echo your HTML markup here. -->
<button onclick="changeText(<?php echo $index; ?>);">Edit</button>
<?php } ?>

Get value from iterated text field using javascript

I have a one text field that has been loop for many times and it has value that came from database and i want to get the value of each text field that has been loop for many times the first text field works but when i click but the other text field it doesn't seems to work here is the
$("#order").click(function()
{
var IDno_textfield = $("#IDno_textfield").val();
var name_textfield = $("#name_textfield").val();
alert("ID no: " + IDno_textfield + " " + " Name: " + name_textfield);
});
this is for the javascript code this my code for getting the values in iterated one text field
<?php
$c = 0;
if($result->num_rows > 0)
{
while($row = $result->fetch_assoc())
{
?> <tr>
<td>
<img src = "data:image/jpeg; base64 , <?php echo base64_encode($row['product_image']); ?>"height = "250" width = "330">
<br>
<div id = "order">
Order now
</div>
</td>
<td>
No.
<input type = "text" value = "<?php echo $row['product_IDno']; ?>"
id = "IDno_textfield">
<br>
Name:
<input type = "text" value = "<?php echo $row['product_name']; ?>"
id = "name_textfield">
<br>
Price:
<input type = "text" value = "<?php echo $row['product_price']; ?>"id = "production_textfield">
<p>
Description: <?php echo $row['product_description']; ?>
</p>
</td>
</tr>
<?php
}
}
else
{
echo "No Menu Found";
}
?>
And this is for the php code that fetch the data to textfield and iterate the text field for many times
this is the result it only works once at the first textfield but not to other text field . i will be glad if you help me thanks
for different id's of elements you can do this:
<?php
$c = 0;
if($result->num_rows > 0)
{
while($row = $result->fetch_assoc())
{
?>
<tr>
<td>
<img src="data:image/jpeg; base64 , <?php echo base64_encode($row['product_image']); ?>"height="250" width="330">
<br>
<div id="order-<?php echo $row['product_IDno']; ?>" class="order">
Order now
</div>
</td>
<td>
No.
<input type="text" value="<?php echo $row['product_IDno']; ?>" id="IDno_textfield-<?php echo $row['product_IDno']; ?>">
<br>
Name:
<input type="text" value = "<?php echo $row['product_name']; ?>" id="name_textfield-<?php echo $row['product_IDno']; ?>">
<br>
Price:
<input type="text" value="<?php echo $row['product_price']; ?>" id="production_textfield-<?php echo $row['product_IDno']; ?>">
<p>
Description: <?php echo $row['product_description']; ?>
</p>
</td>
</tr>
<?php
}
}
else
{
echo "No Menu Found";
}
?>
and javascript
$(".order").on('click', function()
{
var productID = $(this).prop('id').replace('order-', '');
var IDno_textfield = $("#IDno_textfield-" + productID).val();
var name_textfield = $("#name_textfield-" + productID).val();
alert("ID no: " + IDno_textfield + " " + " Name: " + name_textfield);
});
Each element on the page should have unique identifier "id". To the id's of elements in the loop including the button "Order" just add the identifier "id" of product itself and so every "id" will be different. Each button "Order" does it belong to the same class equal for all the buttons "Order" but always different for id. Subsequently, on onclick to button of that class takes the value of the property "id" and removing the generic part for all, in your case "order-" so it remains the unique part (id) with which you can find the elements concatenating the generic part with id thus obtained.
Try this:
$("#order").click(function() {
var IDno_textfield = $(this).parent('tr').find("#IDno_textfield").val();
var name_textfield = $(this).parent('tr').find("#name_textfield").val();
alert("ID no: " + IDno_textfield + " " + " Name: " + name_textfield);
});
Try this
<?php
$c = 0; $count = 0;
if($result->num_rows > 0)
{
while($row = $result->fetch_assoc())
{ $count++;
?> <tr>
<td>
<img src = "data:image/jpeg; base64 , <?php echo base64_encode($row['product_image']); ?>"height = "250" width = "330">
<br>
<div id = "order" data-attr = "<?php echo $count; ?>">
Order now
</div>
</td>
<td>
No.
<input type = "text" value = "<?php echo $row['product_IDno']; ?>"
id = "IDno_textfield_<?php echo $count; ?>">
<br>
Name:
<input type = "text" value = "<?php echo $row['product_name']; ?>"
id = "name_textfield_<?php echo $count; ?>">
<br>
Price:
<input type = "text" value = "<?php echo $row['product_price']; ?>"id = "production_textfield_<?php echo $count; ?>">
<p>
Description: <?php echo $row['product_description']; ?>
</p>
</td>
</tr>
<?php
}
}
else
{
echo "No Menu Found";
}
?>
and the click event will change to.......
$("#order").click(function()
{
var id = $(this).attr('data-attr')
var IDno_textfield = $("#IDno_textfield_"+id).val();
var name_textfield = $("#name_textfield_"+id).val();
alert("ID no: " + IDno_textfield + " " + " Name: " + name_textfield);
});

How to add / delete products in a shopping cart using PHP / MySQL and Ajax

I have created a shopping cart script in order to add or delete products using PHP and MySQL.
The script works as expected, but it is not very comfortable. I am trying to use it with ajax calls.
1. I add the selected product in the shopping cart
$('#add-product').on('click',function() {
$.ajax({
var product_id = $(this).data('id'); //Product id
url: 'cart.php',
data:{add:product_id },
type:'GET',
success: function(data) {
if(!data.error){
$('#show-cart').html(data);
}
}
});
});
2. cart.php
<?php
require_once('resource/init.php');
//ADD A PRODUCT IN THE SHOPPING CART
if(isset($_GET['add'])) {
$query = query("SELECT * FROM products WHERE id = ".escape_string($_GET['add']));
confirm($query);
while ($row = fetch_array($query)) {
if($row['quantity'] != $_SESSION['product_'.$_GET['add']]){
$_SESSION['product_'.$_GET['add']] +=1;
}
}
}
//DELETE PRODUCT FROM SHOPPING CART
if(isset($_GET['delete'])) {
$_SESSION['product_'.$_GET['delete']] = '0';
unset($_SESSION['total']);
unset($_SESSION['quantity']);
}
$total = 0;
$item_quantity = 0;
$item_name = 1;
$item_number = 1;
$amount = 1;
$quantity = 1;
foreach ($_SESSION as $name => $value) {
if(substr($name, 0,8) == 'product_' && $value > 0){
$lenght =strlen($name);
$id = substr($name, 8, $lenght);
$query = query("SELECT * FROM products WHERE id = ".escape_string($id)." ");
confirm($query);
while($row = fetch_array($query)) {
$sub_price = pr_get_sub_price($row['price'],$row['discount'],$row['id'],$value,$lang);
$item_quantity += $value;
$product_image = 'images/products/'.$row['image'];
$price = show_product_price($row['price'],$row['discount'],$lang);
$discounted_price = get_product_price_by_discount($row['price'],$row['discount'],$row['id'],$lang);
?>
<!--THIS IS THE SHOPPING CART-->
<table>
<tr style="text-align:left">
<td><img src="<?php echo $product_image;?>" alt="cart-hover" style="float:left;width: 58px; margin-right:14px;"/></td>
<td><a title="<?php echo $row['title'];?>" href="#" style="margin-right:10px;"><span class="cart-title"><?php echo $row['title'];?> (<?php echo $value;?>)</span></a></td>
<td><span style="font-size: 90%; margin-right: 8px; position:relative;top:2px;"><?php echo $price;?> <?php echo $discounted_price;?></span></td>
<!--DELETE BUTTON-->
<td>
<button data-id = "<?php echo $row['id'];?>" class="delete-product"> <i class="fa fa-close"></i> Delete</button></td>
</tr>
</table>
<input type="hidden" name="item_name_<?php echo $item_name;?>" value="<?php echo $row['title'];?>">
<input type="hidden" name="item_number_<?php echo $item_number;?>" value="<?php echo $row['id'];?>">
<input type="hidden" name="amount_<?php echo $amount;?>" value="<?php echo $row['price'];?>">
<input type="hidden" name="quantity_<?php echo $quantity;?>" value="<?php echo $value;?>">
<?php
$item_name++;
$item_number++;
$amount++;
$quantity++;
$_SESSION['total'] = $total += $sub_price;
$_SESSION['quantity'] = $item_quantity;
}
}
}
?>
<!--DELETE PRODUCT-->
<script>
$('.delete-product').click(function() {
var product_id = $(this).data('id');//PRODUCT ID
$.ajax({
url: 'cart.php?delete=' + product_id,
type: 'get',
success:function(data){
$('#show-cart').html(data);
}
});
});
</script>
The scripts above work as expected, but not for the DELETE action.
If I have, for istance, a product in the shopping cart:
Product one (3) $250.00
and I click on the DELETE icon, the selected product continues to be shown in the shopping cart as it was in the beginning before clicking on the DELETE icon: Product one (3) $250.00
If I try to add the same product in the cart, then it will be displayed starting with the value 1: Product one (1) $250.00
This is the first time that I work using PHP/MySQL with Ajax and I do not know how to solve this issue.

php information not passing through with sessions and pagination

So I've been looking at this page for hours and hours and I can't seem to figure out what the problem is here. I had this issues with all links previously, where I would lick a link to filter/sort database results, click a page link to go to the next page and it would display the second page without any filtered results. I resolved this for "Most Wins", "Best Save %" and "Best Goals Against" by the use of sessions, but for some reason it is still doing this when I try and filter results via my range sliders form. It works when I adjust the sliders, and submit, but if I click another page, once again, it show all results in the database. Can anyone see as to why it might be doing this? I've tried both post and get methods from the form but it didn't seem to work, but if anyone could provide some advice I would greatly appreciate it!!
Here is the code:
<body>
<header>
<div class="header-container">
<nav>
<img src="images/header_img.png" alt="Golaie Gear Online"/>
<ul>
<li>Browse Goalies</li>
<li>Browse Gear</li>
<li>Admin</li>
</ul>
<form method="get" action="<?php echo "generalsearch.php?q=$searchvalue"; ?>" class="search-field">
<input name="search" type="text" placeholder="Search">
<button type="submit" title="Search" id="submit"><img src="images/header_srch.png" alt="search"/></button>
</form>
</nav>
</div>
<div style="clear:both;"></div>
</header>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style type="text/css">
#win-range, #gaa-range, #sv-range{
width: 160px;
font-size: 10px;
margin: 0 auto;
}
#win-range a, #gaa-range a, #sv-range a{
margin-top: 0px !important;
padding: 0 !important;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function(){
$("#win-range").slider({
range: true,
min: 1,
max: 1000,
values: [1, 1000],
slide: function(event, ui) {
// in order to pass the user selected values to your app, we will use jQuery to prepopulate certain hidden form elements, then grab those values from the $_POST
$("#minwins").val(ui.values[0]);
$("#maxwins").val(ui.values[1]);
$("#winamount").val(ui.values[0] + " - " + ui.values[1]);
}
});
$("#winamount").val($("#win-range").slider("values", 0) + " - " + $("#win-range").slider("values", 1));
});
$(function(){
$("#gaa-range").slider({
range: true,
min: 0,
max: 10,
values: [0, 10],
slide: function(event, ui) {
// in order to pass the user selected values to your app, we will use jQuery to prepopulate certain hidden form elements, then grab those values from the $_POST
$("#mingaa").val(ui.values[0]);
$("#maxgaa").val(ui.values[1]);
$("#gaaamount").val(ui.values[0] + " - " + ui.values[1]);
}
});
$("#gaaamount").val($("#gaa-range").slider("values", 0) + " - " + $("#gaa-range").slider("values", 1));
});
$(function(){
$("#sv-range").slider({
range: true,
min: 750,
max: 1000,
values: [750, 1000],
slide: function(event, ui) {
// in order to pass the user selected values to your app, we will use jQuery to prepopulate certain hidden form elements, then grab those values from the $_POST
$("#minsv").val(ui.values[0]);
$("#maxsv").val(ui.values[1]);
$("#svamount").val(ui.values[0] + " - " + ui.values[1]);
}
});
$("#svamount").val($("#sv-range").slider("values", 0) + " - " + $("#sv-range").slider("values", 1));
});
</script>
<?php
include("includes/header.php");
include("includes/mysqli_connect.php");
$sortDesc = $_REQUEST['sortstats'];
$sortAsc = $_REQUEST['sortstatslow'];
$minwins = $_GET['minwins'];
$maxwins = $_GET['maxwins'];
$mingaa = $_GET['mingaa'];
$maxgaa = $_GET['maxgaa'];
$minsv = $_GET['minsv'];
$maxsv = $_GET['maxsv'];
// FILTERING YOUR DB
$sortstats = $_GET['sortstats'];
$sortstatslow = $_GET['sortstatslow'];
$getminwins = $_REQUEST['getminwins'];
$getmaxwins = $_REQUEST['getmaxwins'];
$getmingaa = $_REQUEST['getmingaa'];
$getmaxgaa = $_REQUEST['getmaxgaa'];
$getminsv = $_REQUEST['getminsv'];
$getmaxsv = $_REQUEST['getmaxsv'];
// paging
$getcount = mysqli_query ($con,"SELECT COUNT(*) FROM Player");
$postnum = mysqli_result($getcount,0);// this needs a fix for MySQLi upgrade; see custom function below
$limit = 6; //how many blog posts per page you will see.
if($postnum > $limit){
$tagend = round($postnum % $limit,0);
$splits = round(($postnum - $tagend)/$limit,0);
if($tagend == 0){
$num_pages = $splits;
}else{
$num_pages = $splits + 1;
}
if(isset($_GET['pg'])){
$pg = $_GET['pg'];
}else{
$pg = 1;
}
$startpos = ($pg*$limit)-$limit;
$limstring = "LIMIT $startpos,$limit";
}else{
$limstring = "LIMIT 0,$limit";
}
// MySQLi upgrade: we need this for mysql_result() equivalent
function mysqli_result($res, $row, $field=0) {
$res->data_seek($row);
$datarow = $res->fetch_array();
return $datarow[$field];
}
?>
<div class="listingcontainer">
<div class="sidebar">
<h3>Sort By:</h3>
Most Wins
Best Goals Against
Best Save %
<hr/>
<h3>Custom Filter</h3>
<br/>
<div class="custom-filter">
<form name="filters" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get" id="filters">
<label for="winamount">Win Range:</label>
<input type="text" id="winamount" />
<div style="clear:both;"></div>
<input type="hidden" id="minwins" name="minwins" value="0" />
<input type="hidden" id="maxwins" name="maxwins" value="1000" />
<div id="win-range"></div>
<br/>
<label for="gaaamount">GAA:</label>
<input type="text" id="gaaamount" /><br />
<div style="clear:both;"></div>
<input type="hidden" id="mingaa" name="mingaa" value="0" />
<input type="hidden" id="maxgaa" name="maxgaa" value="10" />
<div id="gaa-range"></div>
<br/>
<label for="svamount">SV %:</label>
<input type="text" id="svamount" /><br />
<div style="clear:both;"></div>
<input type="hidden" id="minsv" name="minsv" value="750" />
<input type="hidden" id="maxsv" name="maxsv" value="1000" />
<div id="sv-range"></div>
<input type="submit" name="submit" id="submit"/>
</form>
</div>
</div>
<div class="main-listings">
<h1>Current NHL Goaltenders</h1>
<?php
session_start();
if($_SESSION['allresults'])
{
$result = mysqli_query($con, "SELECT * FROM Player ORDER BY PlayerID ASC $limstring");
if(isset($sortstats)){//THIS WORKS
session_start();
$_SESSION['sortStatsDesc'] = session_id();
$result = mysqli_query($con,"SELECT * FROM Player ORDER BY $sortstats DESC $limstring ");
$filter = "sortstats={$sortDesc}";
}
if(isset($sortstatslow)) {//THIS WORKS
session_start();
$_SESSION['sortStatsAsc'] = session_id();
$result = mysqli_query($con,"SELECT * FROM Player ORDER BY $sortstatslow ASC $limstring ");
$filter = "sortstatslow={$sortAsc}";
}
if(isset($minwins) || isset($maxwins) || isset($mingaa) || isset($maxgaa) || isset($minsv) || isset($maxsv))//THIS SEEMS TO WORK
{
session_start();
$_SESSION['customFilter'] = session_id();
$result = mysqli_query($con, "SELECT * FROM Player WHERE Wins BETWEEN '$minwins' AND '$maxwins' AND
GAA BETWEEN '$mingaa' AND '$maxgaa' AND SavePerc BETWEEN '$minsv' AND '$maxsv'
ORDER BY PlayerID ASC $limstring") or die (mysql_error());
$filter = "getminwins={$minwins}&getmaxwins={$maxwins}&getmingaa={$mingaa}&getminsv={$minsv}&getmaxsv={$maxsv}";
}
}
else if($_SESSION['sortStatsDesc'])//THIS WORKS
{
$result = mysqli_query($con,"SELECT * FROM Player ORDER BY $sortstats DESC $limstring ");
}
else if($_SESSION['sortStatsAsc'])//THIS WORKS
{
$result = mysqli_query($con,"SELECT * FROM Player ORDER BY $sortstatslow ASC $limstring ");
}
else if($_SESSION['customFilter'])//DON'T KNOW IF THIS IS DOING ANYTHING
{
$result = mysqli_query($con, "SELECT * FROM Player WHERE Wins BETWEEN '$getminwins' AND '$getmaxwins' AND
GAA BETWEEN '$getmingaa' AND '$getmaxgaa' AND SavePerc BETWEEN '$getminsv' AND '$getmaxsv'
ORDER BY PlayerID ASC $limstring");
}
else{
}
while($row = mysqli_fetch_array($result)){
$name = $row['LastName'] . ", " . $row['FirstName'];
$wins = $row['Wins'];
$pid = $row['PlayerID'];
$image = $row['Picture'];
$gaa = $row['GAA'];
$sv = $row['SavePerc'];
echo "<div class=\"player-listing\">";
echo "<div class=\"image-holder\">";
echo "<span class=\"helper\"></span>";
echo "<img src=\"admin/thumbs/$image\" alt=\"$name\">";
echo "</div>";
echo "<div style=\"clear:both;\"></div>";
echo "$name";
echo "<table align=\"center\">";
echo "<tr>";
echo "<td style=\"border-bottom: 1px solid #212121;\">Wins</td>";
echo "<td style=\"border-bottom: 1px solid #212121;\">GAA</td>";
echo "<td style=\"border-bottom: 1px solid #212121;\">SV%</td>";
echo "</tr>";
echo "<tr>";
echo "<td>$wins</td>";
echo "<td>$gaa</td>";
echo "<td>.$sv</td>";
echo "</tr>";
echo "</table>";
echo "</div>";
}
// paging links:
echo "<div class=\"paging\">";
if($postnum > $limit){
echo "<span class=\"page-numbers\"><strong>Pages:</strong> </span>";
$n = $pg + 1;
$p = $pg - 1;
$thisroot = $_SERVER['PHP_SELF'];
if($pg > 1){
echo "<< prev ";
}
for($i=1; $i<=$num_pages; $i++){
if($i!= $pg){
echo "$i ";
}else{
echo "$i ";
}
}
if($pg < $num_pages){
// INSERT QUERY STRING VARIBLE TO CARRY OVER DB QUERY
echo "next >>";
}
echo " ";
}
// end paging
echo "</div>";
?>
<br/>
</div>
<div style="clear:both;"></div>
</div>
EDIT: I fixed the paging issue by adding this into my code:
$getcount = mysqli_query ($con,"SELECT COUNT(*) FROM Player");
if($_SESSION['customFilter']){
$getcount = mysqli_query ($con,"SELECT COUNT(*) FROM Player WHERE Wins BETWEEN '$minwins' AND '$maxwins' AND
GAA BETWEEN '$mingaa' AND '$maxgaa' AND SavePerc BETWEEN '$minsv' AND '$maxsv'");
}
But it's still giving me grief when I click next page. I don't think the filter values are carryying over for some reason.
Remove all the existing session_start() and add one on the first rule of the page, like:
<?php
session_start();
?>
//Your html/js/php
...
...
For session to works the very first instruction you have to call is "session_start()". You should call it only once and at the very beginning of your script.
<?php session_start() ?>
// rest of code PHP/HTML/JS/CSS/anything

Categories