Page 1 of 3

Where should I put this +- Quantity code?

Posted: Sat Feb 07, 2015 3:38 am
by simonmlewis
I have a product.inc page, with ajax_premier.php coming up based on measurements the customer chooses.
This has sessions in it, to store the 2-3 measurements chose, and shows the buynow button, and a Plus and Minus quantity buttons to change the amount to purchase.

It's this code here:
http://jsfiddle.net/laelitenetwork/puJ6G/

Problem is, if I run it in the ajax file, it shows up but doesn't work.
If I have the Plus and Minus fields in the file, and the Javascript code in the product.inc page, it doesn't work either.

If I run the code as supplied, in a test.html file it works.

The "js" files is stored locally and referred to correctly.

Oddly, we have this working on another site that doesn't use Ajax. It's just there on the product page.
So I wondered if it won't work because you perhaps cannot have the script on one page, and the form buttons on another. And the Script won't work on the ajax page because it isn't being called again?

Bit of advice please.

Here is the Ajax called page.

Code: Select all

<script type="text/javascript" src="/js/jquery-1.js"></script>

<script type="text/javascript">//<![CDATA[ 
$(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>

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


<?php
$sku = isset($_SESSION['sku']) ? $_SESSION['sku'] : null;
echo "
<form id='myform' action='/cart' method='post'>
<input type='hidden' name='storeid' value='123'>
<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 "</div>";
    }

mysql_close($sqlconn);
echo "</form>";
?>

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

Posted: Sat Feb 07, 2015 8:29 am
by Celauran
The JS relies on the name of the field and you have a bunch of fields with the same name. Fix that and the script will work.

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

Posted: Sat Feb 07, 2015 9:18 am
by simonmlewis
There are only certain fields with the same names, but they are only called based on certain factors. And they are not the fields in the query.

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

Posted: Sat Feb 07, 2015 9:20 am
by Celauran

Code: Select all

    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' />

      ";
      }
So this bit here only ever produces one result? OK. What about your browser's error console? See anything there? Can you post the HTML of a rendered page?

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

Posted: Sat Feb 07, 2015 9:59 am
by simonmlewis
When I save the file as HTML, so it renders it all (inc the ajax source), it works. But it does not work when it's rendered via PHP using Ajax. :(

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

Posted: Sat Feb 07, 2015 10:05 am
by Celauran
Are there any errors either in the PHP error log or in your browser's JS console? Pretty hard to debug when all I have to go on is "it's not working".

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

Posted: Sat Feb 07, 2015 10:14 am
by simonmlewis
How do I get the JS Console for Firefox?
The Tools Javascript Console in Web Developer isn't showing or doing anything at all.

Also, are you saying that Javascript should work in the Ajax page, when the + - buttons are clicked?

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

Posted: Sat Feb 07, 2015 10:18 am
by Celauran
simonmlewis wrote:How do I get the JS Console for Firefox?
The Tools Javascript Console in Web Developer isn't showing or doing anything at all.
That's the one. Make sure the logging and JS tabs are selected.
simonmlewis wrote:Also, are you saying that Javascript should work in the Ajax page, when the + - buttons are clicked?
From the code you've posted, and given that you do not have multiple form inputs with the same name, I see no reason it wouldn't work.

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

Posted: Sat Feb 07, 2015 10:24 am
by simonmlewis
Is this correct (see screenshot)?

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

Posted: Sat Feb 07, 2015 10:33 am
by Celauran
Looks right.

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

Posted: Sat Feb 07, 2015 10:37 am
by simonmlewis
And nothing showing up when i click + or -.

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

Posted: Sat Feb 07, 2015 10:40 am
by Celauran
So no errors, it's not working, and I can't see the page. Not much I can do to help, then, I'm afraid.

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

Posted: Sat Feb 07, 2015 12:30 pm
by simonmlewis
It looks like no matter what type of JAvascript, even a simple "popup" one onclick of a 'button', if it is within an Ajax popup, it will not work.

I just put in:

Code: Select all

<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
    alert("Hello\nHow are you?");
}
</script>
Into a PHP file that is run via Ajax, and the button does nothing. Whether I put the script at the top, with the " outside PHP, or inside with \".

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

Posted: Sat Feb 07, 2015 3:16 pm
by Celauran
Open the page in your browser, view source, copy/paste into here. Need to see what's going on as the culprit clearly lies outside of the code you've posted.

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

Posted: Sun Feb 08, 2015 3:07 pm
by simonmlewis
This is what's shown - though notice you don't see the quantity area because it's not seen in the rendered code in the browser. Only seen when you 'save' it.

Code: Select all

<!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">
<head>

<script type="text/javascript">
  addthis.layers({
    'theme' : 'transparent',
    'share' : {
      'position' : 'left',
      'numPreferredServices' : 5
    }, 
    'follow' : {
      'services' : [
        {'service': 'facebook', 'id': '*'},
        {'service': 'twitter', 'id': '*'},
        {'service': 'google_follow', 'id': '*/post'},
      ]
    }   
  });
</script>
<!-- AddThis Smart Layers END -->

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
   $("#"+divId).toggle();
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <link rel="stylesheet" media="all" href="/source/style.css">
 
 <title>product-one</title> </head>


<Script>
if($.mobile.media("screen and (min-width: 768px)")) {
    // Check for iPhone4 Retina Display
    if($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
        $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
    }
}
</script>

    
    
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="og:title" content="">
        <script type="text/javascript" src="/js/javascriptcs.js"></script> 
        </head>
       
       <script>
window.onload = function initialLoad(){  
    updateOrientation();  
}
    function updateOrientation(){  
        var contentType = "show_";  
        switch(window.orientation){  
            case 0:  
            contentType += "normal";  
            break;  
      
            case -90:  
            contentType += "right";  
            break;  
      
            case 90:  
            contentType += "left";  
            break;  
      
            case 180:  
            contentType += "flipped";  
            break;  
        }  
    document.getElementById("page_wrapper").setAttribute("class", contentType);  
    }  
</script>


        <body onorientationchange="updateOrientation();">

<link href="/js/dropdownmenu/ddmenu.css" rel="stylesheet" type="text/css" />
    <script src="/js/dropdownmenu/ddmenu.js" type="text/javascript"></script>

<div class='boundbox'>
<div class='innerbox'> 
<div class='mobile_topbox'>
  <div class='mobile_logobox'>
<form action='/cart.asp' method='post' name='basketmobile'>
</form>
    <div class='mobile_logo'><a href='/'>
    <img src='/images/logo.png' border='0' /></a>
    </div>
    
    <div class='mobile_basketbox'>&nbsp;&nbsp;&nbsp;<a href="javascript:basketmobile();">View basket</a>
    
    </div>


    
    <div style='clear: both' /></div>
    
  </div>

  <div class='mobile_searchbox'>
    <form method='GET' action='/index.php'>
<input type='hidden' name='page' value='search'>
<input type='text' name='search' id='field_search'  placeholder='Enter Keywords...' class='field_search' autocomplete='off' >

    <input type='submit' value='Search' style='padding: 5px'>
    </form>
  </div>
</div>

<div class='logobox'>

<div class='search-basketbox'>
<div id='search-outer'>
<div class='searchbox'>
<form method='GET' action='/index.php'>
<input type='hidden' name='page' value='search'>
<input type='text' name='search' id='field_search'  placeholder='Search...' class='field_search' autocomplete='off'>
<input type='submit' value='Go' class='submit_search' id='submit_search'>
</div>
</form>
</div>
<div class='basketbox'>
<div class='top_phone'></div>
    <form action='/cart.asp' method='post' name='viewbasket'>
<input type=hidden name=storeid value=''>
<a href="javascript:basket();">
View Basket
</a>
</form>
</div>
<div style='clear: both' /></div>
</div>

<div class='logo'>
<a href='/'>
<img src='/images/logo.png' border='0'/>
</a>
</div>
<div style='clear: both' /></div>
</div>
<div id='searchHint' class='searchhintbox'><div>
 

</div></div>

<div class='outercontainer' style='background-color: #5F5F5F'>
		<nav id="ddmenu">
    
    <ul>
        <li class="no-sub"><a class="top-heading" href="/">Home</a></li>
        
        
        <li><a class='top-heading'>Contemporary Pine</a>
            <i class='caret'></i>           
            <div class='dropdown'>
                <div class='dd-inner'>
                    <div class='column'><a href='/product/98/Contemporary-Pine//Light-oak'>Light oak</a></div>
                </div>
            </div>
        </li><li><a class='top-heading'>Rustic Pine</a>
            <i class='caret'></i>           
            <div class='dropdown'>
                <div class='dd-inner'>
                    <div class='column'><a href='/product/1/Rustic-Pine/SKUTEST123/product-one'>product one</a></div>
                </div>
            </div>
        </li>
     
     <li class='no-sub'><a class='top-heading' href='/'>Clearance</a></li>
     <li class='no-sub'><a class='top-heading' href='/'>Blog</a></li>
     <li class='no-sub'><a class='top-heading' href='/'>Contact us</a></li>
               
      
    </ul>
</nav>
</div>	
	
   		<div class='mainbodybox'>
		

<script type="text/javascript">
animatedcollapse.addDiv('1', 'fade=1,height=auto')
animatedcollapse.addDiv('2', 'fade=1,height=auto')
animatedcollapse.addDiv('3', 'fade=1,height=auto')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
	//$: Access to jQuery
	//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
	//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>


<script>
function submit(){
document.romancart.submit();
}

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>
</div>
      <div class='cat_head'>
        <div class='cat_headlink'><a href='/categ/1/Rustic-Pine' style='text-decoration: none'>Rustic Pine</a></div>
        
      <div class='cat_headlinknomobile'>></div> <div class='cat_headlink'>product one</div></div>
     
     <div class='product_gallerymobile'>
    <img src='/images/productphotos/13941wood.jpg'>
		</div><div class='mainbodybox'>
    <div class='product_leftbox'>
        <div class='product_gallery'>
        <img src='/images/productphotos/13941wood.jpg'>
</div>
        
        <div class='product_showlink'>
      <a href="javascript:animatedcollapse.toggle('1')">Photo description&nbsp; &#x25BC;</a>
      </div>
      <div class='product_dropdownbox' id='1'>
      <div class='product_dropdownbox_title'>Photo description</div>
      this is a product and we will test with this.</div>      
      <div class='product_showlink'>
      <a href="javascript:animatedcollapse.toggle('3')">customer reviews&nbsp; &#x25BC;</a>
      </div>
      
      <div class='product_dropdownbox' id='3'>
      <div class='product_dropdownbox_title'>customer reviews</div>Be the first to comment on this photo.</div><br />
<b>Notice</b>:  Undefined variable: url in <b>C:\xampp\phpMyAdmin\premiershelves\includes\product.inc</b> on line <b>239</b><br />
<div class='product_showlink'>
            <a href="javascript:animatedcollapse.toggle('4')">write a review&nbsp; &#x25BC;</a>
            </div>
            
            <div class='product_dropdownbox' id='4'>
              <div class='product_dropdownbox_title'>write a review</div>
              
              <form method='post' action='/product/1/Rustic-Pine/SKUTEST123/product-one' name='userreview'  onSubmit="return commentCheck(this)">
              <input type='hidden' name='prodname' value='product one'>
              <input type='hidden' name='url' value=''>
              <input type='hidden' name='prodid' value='1'>
             
              
              
              
               <div class='product_review_left'>Nickname</div>
              <div class='product_review_right'><input type='text' name='nickname' class='review_mobile'></div>
              
              <div class='product_review_left'>Email Address</div>
              <div class='product_review_right'><input type='text' name='usercommentsemail' class='review_mobile'>(optional)<div style='font-size:10px'>Enter your email to be told when your comment goes live.<br/>Your email address will not be shown.<br/>
                Any comment with bad language will not go live.</div></div>
              
              <div class='product_review_left'>Comment</div>
              <div class='product_review_right'>  <textarea name='usercomments' style='width: 95%; height: 100px'></textarea></div>
              
              <div class='product_review_left'>Validate code</div>
              <div class='product_review_right'>              
              <img id='captcha' src='/securimage/securimage_show.php' /><br/>
              <a href='#' onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">Reload Image</a>
                <div style='font-size:12px'>Enter this code in the box below.  It is case-sensitive.</div>
                <br/><input type='text' name='captcha_code' size='10' maxlength='6'  class='submit_buynow'/>
                </div>
              <br/>
              
                            <div class='product_review_left'></div>
              <div class='product_review_right'><input type='submit' value='Post Review' class='submit_buynow'></div>
              
              <div style='clear: both' /></div>
            
                </form>
      </div>
            <div class='product_disclaimer'>All images on this page are the property of Visual Shop Ltd, and only those on sale are those shown on product pages.</div>
    </div>
    
    
    
    <div class='product_rightbox'>
    <div class='product_pricebox'><div class='product_dimension'><div class='product_dimension_inner'>Depth</div>
  <div class='product_dimension_inner'><select name='depth'  onChange="precheckdepth(this.value)" class='selectpremier'>
 <option value='0'>Choose</option><option value='5'>5"</option><option value='6'>6"</option><option value='7'>7"</option></select></div></div><div class='product_dimension'><div class='product_dimension_inner'>Length</div>
  <div class='product_dimension_inner'><select name='length'  onChange="prechecklength(this.value)" class='selectpremier'>
  <option value='0'>Choose</option><option value='10'>10"</option><option value='7'>7"</option><option value='8'>8"</option><option value='9'>9"</option></select></div></div><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><option value='2.5'>2.5"</option><option value='3'>3"</option><option value='3.5'>3.5"</option></select></div></div>
  <div id='srcHint' class='hintbox'>
  </div>
 
</div>
 
      </div>
      <div style='clear: both' /></div>			</div>
		
</div>

<div class='footer'>
  <div class='footer_column'>
    
  </div>
  
  <div class='footer_column'>

  </div>
  
  
   <div class='footer_column'><a href='/aboutus'>About us</a><br/>
    <a href='/terms'>terms and conditions</a><br/>
  <a href='/privacy'>privacy policy</a><br/>
  <a href='/ordertrack'>order tracking</a>
  </div>  
  
    <div class='footer_paymentlogoscontainer'>
    <div class='footer_paymentlogos'><img src='/images/logo_paymentlogos.png' /></div>
  </div>
  
  
  
  <div style='clear: both' /></div>
  <div class='footer_copyright'>
 
  </div>
  
  <div class='ourlogos'>
  </div>
  <div style='clear: both' /></div>
  
  
  <div align='center'><a href='/sitemap.xml'>Xml Sitemap</a>
 <br/> </div>
  </div>
</div>
	</div>
</div>
</div>
</body></html>