Changing Jquery to AJAX url GET

Question

First of all I want to apologize for the title couldn't find a better title.

I am new to ajax and I want to change my jquery to ajax. I wanted to do it in the same jquery but the jquery I am using already have a url and I dont think you can use two url at the same time.

My current jquery this works and if you understand this, you should be able to understand what I want to

$(document).ready(function(){
    $('#selected').hide();
    $('#button').click(function(){
        var pid = $('#pid').val();
        var length = $('#length').val();
        var Category = $('#Category').val();
        var Qty = $('#Qty').val();
        var qty = $('#Qty').val();
        var price = '\u00A3' + parseInt($('#pricetag').text().replace(/^\D/, ''), 10) * qty;
        var category = $('#Category').text();
        var length = $('#length').val();
        if (!/^[1-9]\d?$/.test(Qty)){
            alert('Quantity should not be below 1 or null');
            return false; // don't continue
        }
        else {
        $('#sprice').text(price);
        $('#scategory').text(category);
        $('#slength').text(length);
        $('#selected').slideDown();
        }
        $.ajax({
            url: 'cart.php',
            type: 'POST',
            data: { pid:pid, 
            length:length, 
            Qty:Qty, 
            Category:Category },
            success: function(data)
            {

            }
        });
    });
});

If you notice I needed to hide my div called selected. This isn't the right way to do it.

My selected div

         <div class="slidingDiv" id='selected'>
    <table class="tableclass">
        <tr>
            <td>Price:</td>
            <td id='sprice'></td>
        </tr>
        <tr>
            <td>Category:</td>
            <td id='scategory'></td>
        </tr>
        <tr>
            <td>Length:</td>
            <td id='slength'></td>
        </tr>
    </table>
</div>

I try this ajax code i found on w3school

function showitem(str)
{
var xmlhttp;
if (str.length==0)
  { 
  document.getElementById("showtxt").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("showtxt").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","showitem.php?pid="+str,true);
xmlhttp.send();
}

but it doesn't work because I am inexperience with it.

Want I want to do

I don't want to hide the selected because if you disable javascript it shows.

What I intend to do it. if that when you click the add button onclick using the ajax, it will send the length, pid, category and Qty to showitem.php and in this showitem.php it will calculate multiply price * Qty and then echo out into

<table class="tableclass">
        <tr>
            <td>Price:</td>
            <td id='sprice'></td>
        </tr>
        <tr>
            <td>Category:</td>
            <td id='scategory'></td>
        </tr>
        <tr>
            <td>Length:</td>
            <td id='slength'></td>
        </tr>
    </table>

showitem.php

<?php
include('global.php');
    dbconnect();
$id=$_POST["pid"];
$Category=$_POST["Category"];
$length=$_POST["length"];
$qty=$_POST["Qty"];
$stmt2 = $conn->prepare("
SELECT Product.Name as ProductName, Category.Name, Category.CatID, Length, Price
FROM Itemised_Product, Product, Category
WHERE Itemised_Product.ppid =:item_id
AND Hair_Length = :length  AND Category.Name = :Category Limit  1");
$stmt2->bindParam('id',$id);
$stmt2->bindParam('length',$length);  
$stmt2->bindParam('Category',$length);  
$stmt2->bindParam('length',$length);  
$stmt2->execute();
$price = $row["Price"];
foreach ($_SESSION["item_price"]as $each_item) {
$pricetotal = $price * $each_item['Qty'];
$i = 0;
$rows2 = $stmt2->fetchAll(PDO::FETCH_ASSOC); 
        foreach ($rows2 as $row2) {
            if ($i == 0) {  
        echo '<table class="tableclass">
        <tr>
            <td>Price:</td>
            <td id='sprice'>' . $totalprice . '</td>
        </tr>
        <tr>
            <td>Category:</td>
            <td id='scategory'>' . $Category . '</td>
        </tr>
        <tr>
            <td>Length:</td>
            <td id='slength'>'.$length.'</td>
        </tr>
    </table>';
            }
        }
        }
?>

Please help me. if you dont understand the question please leave a comment and i will try and explain it in more details

Answer 1

You should use Jquery to handle all the completed Ajax stuff for you , this is sample Jquery Ajax code

var price = $('#sprice').html();
var length = $('#scategory').html();
var category = $('#slength').html();
$.ajax({
            //this is the php file that processes the data
            url: "showitem.php",

            //GET method is used
            type: "GET",

            //pass the data
            data: '&price='+price+'&category'+category+'&length='+length,
            //Do not cache the page
            cache: false,

             beforeSend: function(){
            //do something before data is sent  

            },
             complete: function(html){
             //do soemthing after data has been sent
             },


            //success
            success: function (html) {
            //do something with the result
            },

            error : function ()
            {
            //something went wrong
            }


        });