CODEWITHSUNDEEP
javascriptphpjqueryajax
liquidsystem
liquidsystem

Reputation: 634

Need a way to send URL variable to PHP with jQuery

So I'm trying to make a basic mockup shoe store for one of my classes, but I've been looking for a way to take a variable in the url and send it to my PHP...

This is my php:

<?php
// This block allows our program to access the MySQL database.
// Stores your login information in PHP variables
require_once 'studentdb.php';
// Accesses the login information to connect to the MySQL server using your credentials and database
$db_server = mysql_connect($host, $username, $password);
// This provides the error message that will appear if your credentials or database are invalid
if (!$db_server) die("Unable to connect to MySQL: " . mysql_error());
mysql_select_db($dbname)
    or die("Unable to select database: " . mysql_error());

if(isset($_GET['model_id']) && is_generic($_GET['model_id'])) {
    $model_id = $_GET['model_id'];
    $result = mysql_query('CALL shoes(`'.$model_id.'`);');
    $row=mysql_fetch_array($result);
    echo $row['size'];
}


?>

and I was trying to get it to work with JavaScript/jQuery/ajax, but I couldn't find a method to get model_id (which is in the form of a setup) and pass it back to the PHP.

<script>
 $("a").click(function(e) {
    e.preventDefault;
    var shoePrice = $(this).attr('href');
    history.pushState({}, '', $(this).attr("href"));
    $("a").attr('data-title', shoePrice);
    return false;
  });
</script>

Example of my tag:

<a href="?model_id=1" data-largesrc="images/shoe1.jpg" data-title="Test" data-description="Shoe description here" data-price="Price here"><img src="images/thumbs/shoe1.jpg" alt="img01"/>

PS: This is all in the same file..

EDIT:

Old PHP loop -

$model_id = isset($_GET['model_id']) ? $_GET['model_id'] : 0;
if($_GET["model_id"] === "") echo "model_id is an empty string \n";
if($_GET["model_id"] === false) echo "model_id is false \n";
if($_GET["model_id"] === null) echo "model_id is null \n";
if(isset($_GET["model_id"])) echo "model_id is set \n";
if(!empty($_GET["model_id"])) echo "model_id is not empty \n";

if(isset($model_id)) {
    $query = 'SELECT size, price, style FROM shoes WHERE model_id='.$model_id;
    $search1 = 'SELECT * FROM shoes WHERE model_id='.$model_id;
    $abc = mysql_query($search1);
    $result = mysql_query($query);
    // The mysql_num_rows function returns an integer representation of number of rows for the table passed as an argument
    $number_of_requests = mysql_num_rows($result);
    if(! $result) {
        die('Could not get data: ' . mysql_error());
    }
    while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
        echo    "Shoe ID: {$row['model_id']} <br>".
                "Shoes Size: {$row['size']}<br>".
                "Shoe Price: {$row['price']}<br>".
                "Shoes Style: {$row['style']}<br>";


    }
    while($row = mysql_fetch_assoc($abc)) {
        $size = $row['size'];
    }
}

Upvotes: 2

Views: 702

Answers (2)

liquidsystem
liquidsystem

Reputation: 634

Here is what I've actually come up with, this is the final version that works... Thank you for your help, but I had to dig deeper to figure it out.

<script>

        function parseData(html) {
            var json = {};
            $.each(document.getElementsByTagName("div"), function(index, value) {
                json[value.id] = value.innerHTML;
            });
            return json;
        };

         $("a").click(function(e) {
            e.preventDefault();
            var href = $(this).attr("href");
            history.pushState({}, '', $(this).attr("href"));
            $.get("/~huntcki3/test.php"+$(this).attr("href"), function(data) {
                var info = JSON.parse(data);
                console.log(info);
                console.log(href);
                $("div.og-details h3")[0].innerHTML = info.name;
                $("div.og-details p")[0].innerHTML = info.style+'<br>' + 'Size: ' + info.size+'<br>' + '$' + info.price+' USD';
            });
        });
        </script>

Upvotes: 0

charlietfl
charlietfl

Reputation: 171700

Assuming you are sending request to same page as the href shows all you need is a $.get in the click handler

$("a").click(function(e) {
    e.preventDefault;
    var shoePrice = $(this).attr('href');
    history.pushState({}, '', $(this).attr("href"));
    $("a").attr('data-title', shoePrice);
    $.get(shoePrice , function(serverResponse){
       // do something here with response
    })
});

$,get is a shorthand method for $.ajax.

If you are receiving json can replace $.get with $.getJSON

Upvotes: 2

Related Questions