up vote 0 down vote favorite

Admittedly I am completely clueless when it comes to Ajax, but it appears the best way to accomplish my task. After going through several tutorials, I have a basic understanding, but remain lost in regards to my problem. Essentially I am attempting to capture the value of an HTML dropdown menu and call a shopping cart function with the user selected row value. Each row value corresponds to a product in a php arrray.

Function appearing in my header file (Note: The commented out portion is a failed attempt using the onreadystatechange):

<script type="text/javascript">

function productchange(data){

var xmlhttp;

if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  //xmlhttp.onreadystatechange=function()
  //{
  //if (xmlhttp.readyState==4 && xmlhttp.status==200)
  // {
  //document.getElementById("test").innerHTML=xmlhttp.responseText;
  //document.getElementById("test").innerHTML= data;
  //  }
  //}

  var URL = "http://www.example.com/wp-content/themes/themeX/order.php" + "?rownum=" + data;

  xmlhttp.open("GET",URL,false);
  xmlhttp.send(); 

}
//-->
</script>

HTML Table: (Once again the div tags are a failed attempt using innerHTML. I was able to get the value on the screen, but still not able to capture it with $_GET to use in my function call)

<TR>
   <TD>
      <select id="productcategory1" name="productcategory1" onchange="productchange(this.value)">
    <option value="$">--Please Select--</option>
    <option value="1">Product # 1 - $1.99</option>
    <option value="2">Product # 2 - $1.99</option>
    <option value="3">Product # 3 - $9.99</option>
    <option value="4">Product # 4 - $9.99</option>
  </select>
  </TD>
  <TD>    
  <div id="test">
  </div>
  <?php echo print_wp_cart_button_for_product($products[$rownum]["Product"], $products[$rownum]["Price"]); ?>
  </TD>
  </TR>

Order.php:

<?php
global var $rownum;
$rownum = $_GET['rownum'];
?>
share|improve this question
feedback

2 Answers

up vote -2 down vote

Look into jQuery it much more reliable and more easy to use.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
function productchange(data) {
     $.ajax({
            type: "GET",
            url: "http://www.example.com/wp-content/themes/themeX/order.php",
            data: "rownum=" + data,
            success: function(data){
               $('#test').html(data);
     }
    });
    return false;
}
</script>
</head>
<body>
<table>
<TR>
   <TD>
      <select id="productcategory1" name="productcategory1" onchange="productchange(this.value)">
    <option value="$">--Please Select--</option>
    <option value="1">Product # 1 - $1.99</option>
    <option value="2">Product # 2 - $1.99</option>
    <option value="3">Product # 3 - $9.99</option>
    <option value="4">Product # 4 - $9.99</option>
  </select>
  </TD>
  <TD>    
  <div id="test">
  </div>
  <?php echo print_wp_cart_button_for_product($products[$rownum]["Product"], $products[$rownum]["Price"]); ?>
  </TD>
  </TR>
</table>

If you look into this code. It's using jQuery for the ajax request. But it is much easer to understand, I think. I hope you find this more usefull.

share|improve this answer
why just put down a comment as an answer?? – pjp Dec 28 '12 at 3:46
I can't comment on a question, i don't know why? – Corbifex Dec 28 '12 at 3:49
because you need to reach certain reputation for that. in the beginning you have to try harder to answer something and give proper answer and just not reference something. – pjp Dec 28 '12 at 3:51
Thanks for the advice Corbifex, but I've spent the day attempting to figure out Ajax. Haha. Does anyone know why my current approach is not working? – panoramic Dec 28 '12 at 4:03
I changed the answer to something more useful I hope. – Corbifex Dec 28 '12 at 4:29
show 1 more comment
feedback
up vote 0 down vote

order.php doesn't do anything, really, and echoes no response back to the client. What is the AJAX call actually supposed to do? (Remember, a PHP script executes once at the time the initial page is rendered, so the AJAX call is just a completely separate web request that then needs to give back some data that the client will handle in the onreadystatechange function. Try adding an echo to order.php and you should see that show up in the div when you uncomment the JS handler.

share|improve this answer
My intention in creating the AJAX call was to capture the current row selected by the user of the drop down menu, and use that row to identify an item in my product array. Subsequently, I call the print_wp_cart_button_for_product function, which when pressed adds the product to the cart. More or less, I was hoping that order.php could be used to change the value of my php variable $rownum. – panoramic Dec 28 '12 at 5:41
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.