Where should I put this +- Quantity code?

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Where should I put this +- Quantity code?

Post by Celauran »

So the bit that isn't working is also not included in that code you just posted?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

You asked me to post the code of what is in the Source, after the button appears.
Because it is in ajax, it is eched in "hintbox".
To answer your question, no, for this reason it doesn't show.
But if I save as HTML, it does render.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Where should I put this +- Quantity code?

Post by Celauran »

You're right, I did. The idea was that I could see the entirety of what's going on client side with this script to get to the bottom of what's not working. The JS that controls the increment/decrement functions itself is clearly fine, so it's either a question of it not being loaded, or a question of something interfering with it. Can you point me to where it's being called?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

These extract the dimensions available for the product.
On each Change, it runs the Ajax script and puts results into hintbox.

Code: Select all

<div class='product_dimension_inner'><select name='length'  onChange=\"prechecklength(this.value)\" class='selectpremier'>
  <option value='0'>Choose</option>";
    $resultlength = mysql_query ("SELECT DISTINCT length FROM products WHERE sku = '$sku' AND length <> '0' ORDER by length");
    $num_rows = mysql_num_rows($resultlength);
  if ($num_rows != 0)
  {
  while ($rowlength = mysql_fetch_object($resultlength))
  {
  echo "<option value='$rowlength->length'>$rowlength->length\"</option>";
  }
  echo "</select></div></div>";
  }
  
  echo "<div class='product_dimension'><div class='product_dimension_inner'>Thickness</div>
  <div class='product_dimension_inner'><select name='thickness'  onChange=\"precheckthickness(this.value)\" class='selectpremier'>
  <option value='0'>Choose</option>";
    $resultthickness = mysql_query ("SELECT DISTINCT thickness FROM products WHERE sku = '$sku' AND thickness <> '0' ORDER by thickness");
    $num_rows = mysql_num_rows($resultthickness);
  if ($num_rows != 0)
  {
  while ($rowthickness = mysql_fetch_object($resultthickness))
  {
  echo "<option value='$rowthickness->thickness'>$rowthickness->thickness\"</option>";
  }
  echo "</select></div></div>";
  }
  echo "
  <div id='srcHint' class='hintbox'>
  </div>

It uses one ajax script per dropdown

Code: Select all

function precheckdepth(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("srcHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax_premier.php?depth="+str,true);
xmlhttp.send();
}

function prechecklength(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("srcHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax_premier.php?length="+str,true);
xmlhttp.send();
}


function precheckthickness(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("srcHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax_premier.php?thickness="+str,true);
xmlhttp.send();
}
</script>

That sends the data here

Code: Select all

<Script>$(window).load(function(){
jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 0) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
});

});//]]>  
</script>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>

<?php
session_start();
include "dbconn.php";
?>


<?php
$sku = isset($_SESSION['sku']) ? $_SESSION['sku'] : null;
echo "
<form id='myform' action='/cart.asp' method='post'>
<input type='hidden' name='itemcode' value='$sku'>";

  $query = mysql_query("SELECT depth FROM products WHERE depth <> '0' AND sku = '$sku'");
  $num_rows = mysql_num_rows($query);
  if ($num_rows == 0) { $depth = "0"; }
  if ($num_rows != 0) 
    { 
    $depth = "0";
if(isset($_GET['depth']))
{
    $depth = $_GET['depth'];
    $_SESSION['depth']=$depth;
    echo "<input type='hidden' name='itemname3' value='$depth'>";
}
else if (isset($_SESSION['depth']))
{
    $depth=$_SESSION['depth'];
    echo "<input type='hidden' name='itemname3' value='$depth'>";
}
    }
    
   
  $query = mysql_query("SELECT length FROM products WHERE length <> '0' AND sku = '$sku'");
  $num_rows = mysql_num_rows($query);
  if ($num_rows == 0) { $length = "0"; }
  if ($num_rows != 0) 
    { 
$length = "0";
if(isset($_GET['length']))
{
    $length = $_GET['length'];
    $_SESSION['length']=$length;
        echo "<input type='hidden' name='itemname2' value='$length'>";
}
else if (isset($_SESSION['length']))
{
    $length=$_SESSION['length'];
    echo "<input type='hidden' name='itemname2' value='$length'>";
}
    }


  $query = mysql_query("SELECT thickness FROM products WHERE thickness <> '0' AND sku = '$sku'");
  $num_rows = mysql_num_rows($query);
  if ($num_rows == 0) { $thickness = "0"; }
  if ($num_rows != 0) 
    { 
$thickness = "0";
if(isset($_GET['thickness']))
{
    $thickness = $_GET['thickness'];
    $_SESSION['thickness']=$thickness;
    echo "<input type='hidden' name='itemname4' value='$thickness'>";
}
else if (isset($_SESSION['thickness']))
{
    $thickness=$_SESSION['thickness'];
    echo "<input type='hidden' name='itemname4' value='$thickness'>";
}
    }

  
  $query = mysql_query("SELECT price, productid, sku FROM products WHERE depth = '$depth' AND length = '$length' AND thickness = '$thickness' AND sku ='$sku'");
 $num_rows = mysql_num_rows($query);
  if ($num_rows == 0 ) 
    { 
    }
  else
    {
    echo "<div class='ajax_buynowbox' >";
    while ($row = mysql_fetch_object($query))
  { 
      echo "<div class='product_price'>&pound;$row->price</div>
      <input type='submit' value='Add to Cart' class='submit_buynow'>";
      
      // <input type='button' value='-' class='qtyminus' field='quantity' />
     // <input type='text' name='quantity' value='5' class='qty' />
     // <input type='button' value='+' class='qtyplus' field='quantity' />
echo "<select name='quantity' class='qty'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>


      ";
      }
    echo "</div>";
    }

mysql_close($sqlconn);
echo "</form>";
?>
Which shows it on the hintbox DIV.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

While we are on the subject, how do I go about making the <select> dropdowns dynamic?

The problem is, I suspect this client will want to have just Length and thickness at times, or just Depth and thickness.

So I need a way to only show a fixed set of lengths, then after selecting the length, then thicknesses that are assigned to that length and so on.

In the database, it's set so that each SKU code has a row, with the length, thickness and depth and price.
So you could say "select fields where length = "$length".

I can only see it to be possible using Ajax, but with Javascript too?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

I think I have found a way to do this issue now, with Ajax, But I also need to be able "reset all" when the first $depth" is changed.
Normally this could be done "onchange" as it's all part of the same form, but these aren't. These are each in different *.php files with Sessions for Depth and Length.

I want to be able to reset Length and Thickness when Depth is changed, but they are in ajax_length.php and ajax_thickness.php. Can't see how an onchange could tell thru Ajax, thickness to reset back to null, or even make the Select disappear.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Where should I put this +- Quantity code?

Post by Celauran »

Why can't you use onchange?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

Because I dont know how to make an onchange, affect a <select> form element in another PHP file.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

I did think I could add a third onchange queries into the first dropdown, and post a 0 to the ajax_thickness.php file, so it finds nothing, basically resetting it. But it wouldn't let me add more than two javascript to a <select>

Code: Select all

<select name='depth'  onChange=\"precheckdepth(this.value); checklength(this.value); \" class='selectpremier'>
Tried to add a third in there, but it killed it completely.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Where should I put this +- Quantity code?

Post by Celauran »

You're already using jQuery in some places, just attach a listener.

Code: Select all

$('select[name="depth"]').change(function() {
	// do stuff
});
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

You forget, I know nothing about Listeners.
I'd LOVE it if I could change the $depth select dropdown, and that clears'resets the dropdown in ajax_thickness.php.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Where should I put this +- Quantity code?

Post by Celauran »

I've already written out the listener for you. Add in the ajax call, dump it in your JS file, and you're done.

You really need to take the time and learn some basic jQuery, though.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

I wish you knew how I felt here.
I am learning bit by bit. Last night I didn't know how I would achieve something. I went for a walk and in my head, I worked it out.
But I don't know about "listeners". I don't know how they work.

You're saying here is the code, just pop yours in there and it will do it. Really? I doubt it.
Show me what you mean please. So that I can make the final dropdown option reset or disappear, by changing the first one, bearing in mind they are in separate ajax files.

I actually thought I'd worked out it before but seems I couldn't run a third query in that one onchange, but you are saying I don't need to. And now I am stuck.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

Maybe something in that first dropdown onchange, could reset only the DIV itself which is called

Code: Select all

<div id='dimension_thickness' class='product_dimension'></div>
So it resets id='dimension_thickness'.

That would be better wouldn't it?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Where should I put this +- Quantity code?

Post by simonmlewis »

Another issue I have here is even more odd.
When I use the ajax to post a number through to ajax_length.php, the script there just groups them, so you get one of each size in the <select> menu.
But I think because it's finding 2 options for a given length, it's then echoing TWO <select> forms through. But not always!!

Is there a way I can tell the Ajax script to just run ONCE?

I hope that makes sense.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply