Jeffrey Bouva
Jeffrey Bouva

Reputation: 419

Jquery .load() doesn't give HTML back (with a " " space in the URL!)

I am working on a webshop for school.I'm trying to make an jquery/ajax cart system.

Now this is my jquery.load(); code

//LOAD PHP FUNCTION TO ADD TO CART
        $("#cart_page").load("cart.php?command=addToCart&productID="+productID+"&size="+size+"&amount="+amount+"&product_name="+product_name+"");

This is the cart.php file:

<?php

//ADD PRODUCTS TO CART
if($_GET['command'] == 'addToCart'){
    /********* START SESSION *********/
    session_start();

    if($_GET['productID'] == "" || $_GET['amount'] < 1 || $_GET['size'] == "" || $_GET['product_name'] == "") return;

    $max=count($_SESSION['cart']);

    if(is_array($_SESSION['cart'])){
        $max=count($_SESSION['cart']);

        for($i=0;$i<$max;$i++){
            if($_GET['productID'] == $_SESSION['cart'][$i]['productid']){
                if($_GET['size'] == $_SESSION['cart'][$i]['size'] ){
                    $product_exists = 1;
                }   
            }
        }

        if($product_exists != 1){
            $_SESSION['cart'][$max]['productid'] = $_GET['productID'];
            $_SESSION['cart'][$max]['product_name'] = $_GET['product_name'];
            $_SESSION['cart'][$max]['amount'] = $_GET['amount'];
            $_SESSION['cart'][$max]['size'] = $_GET['size'];
        }

    }else{

        $_SESSION['cart']=array();
        $_SESSION['cart'][0]['productid'] = $_GET['productID'];
        $_SESSION['cart'][0]['product_name'] = $_GET['product_name'];
        $_SESSION['cart'][0]['amount'] = $_GET['amount'];
        $_SESSION['cart'][0]['size'] = $_GET['size'];

    }

if(is_array($_SESSION['cart'])){
$max=count($_SESSION['cart']);
$cart = <<<EOD
<div class="cart_page">
    <div class="cart_product_line">
    $max
        <ul>

EOD;
        for($i=0;$i<$max;$i++){
            $arrayID = $i;
            $cart_productID = $_SESSION['cart'][$i]['productid'];
            $cart_productName = $_SESSION['cart'][$i]['product_name'];
            $cart_amount = $_SESSION['cart'][$i]['amount'];
            $cart_size = $_SESSION['cart'][$i]['size'];

$cart.= <<<EOD
            <li>$arrayID</li>
            <li>$cart_productID</li>
            <li id="$cart_productID">$cart_productName</li>
            <li class="amount">$cart_amount</li>
            <li class="size">$cart_size</li>
EOD;
        }

$cart.= <<<EOD
        </ul>
    </div>
</div>
EOD;
    }
}
echo $cart;

?>

Now it does everything i want it to. But the result it gives in 'echo $cart.php' doesn 't get displayed in my index.php

can you guys help me out please?

PS:

if i go to:

cart.php?command=addToCart&productID=28&amount=10&size=12&product_name=Test

It gives this back

1
0
28
Test
10
12

in HTML so the script works and gives html back! I'm doing the same with loading products and there it works like a charm.

Upvotes: 1

Views: 607

Answers (2)

Jeffrey Bouva
Jeffrey Bouva

Reputation: 419

So So Stupid..

The $product_name that I generated was from a database.

This name had a " " space in it.

What this did was it gave the success of loading the script but because it had a " " space in the URL jQuery sees it as a incorrect URL and doesn't embed the script into the page.

What I find strange is that it didn't give me any error back!?

Thank you guys so much for helping me out!

Upvotes: 0

Dean
Dean

Reputation: 6354

Assuming that everything you have said is true then there are several things that might go wrong here (in order of likelyhood):

  1. Is the AJAX call being made to another domain? If so this won't work unless you output some special headers.
  2. jQuery.load will fail if the element you are targetting does not exist. So double check that you have the #cart_page element on your page.
  3. The AJAX page is not returning the correct HTTP response code. This will be visible in your console. But you can get more information by expanding your code to:

    $("#cart_page").load("cart.php?command=addToCart&productID="+productID+"&size="+size+"&amount="+amount+"&product_name="+product_name+"", function(response, status, xhr) { if (status == "error") { console.log("Error code :" + xhr.status); // error code console.log ("Error text :" + xhr.statusText); // error text } });

  4. Some other JS errors. As we cannot see all of your code this is hard to see. Check the console for any errors and add them to your first post.

(Sorry for the formatting of the code in point 3. I've no idea how to embed code in a list using this syntax. An indent doesn't work)

Upvotes: 1

Related Questions