使用ajax来防止页面上的闪存

Question

    <?php
        session_start();
        include_once("../php/cart_config.php");
        include_once("../php/cart_update.php");
        include_once("../php/library.php");

        ?>
<!-- start of cart list   -->
        <div class="shopping-cart">
        <h2>Your Shopping Cart</h2>
        <?php
        if(isset($_SESSION["products"]))

        {
            $total = 0;
            echo '<ol>';
            foreach ($_SESSION["products"] as $cart_itm)
            {
                echo '<li class="cart-itm">';
                echo '<span id="del_item" class="remove-itm"><a href="'.$update_cart_url.'?removep='.$cart_itm["code"].'&return_url='.$current_url.'">&times;</a></span>';
                echo '<h3>'.$cart_itm["name"].'</h3>';
                echo '<div class="p-code">P code : '.$cart_itm["code"].'</div>';
                echo '<div class="p-qty">Qty : '.$cart_itm["qty"].'</div>';
                echo '<div class="p-price">Price :'.$currency.$cart_itm["price"].'</div>';
                echo '</li>';
                $subtotal = ($cart_itm["price"]*$cart_itm["qty"]);
                $total = ($total + $subtotal);
            }
            echo '</ol>';
            echo '<span class="check-out-txt"><strong>Total : '.$currency.$total.'</strong> <a href='.$checkout_url.'>Check-out!</a></span>';
        }else{
            echo 'Your Cart is empty dude!';
        }
        ?>

        </div>
            <script type ="text/javascript">
        $.ajax({
          url: "http://4rtificial.co.za/ecommerce/php/cart_update.php",
          cache: false
        })
          .done(function( php ) {
            $( "#del_item" ).append( php );
          });
            </script>
        </div>

im trying to somehow stop the page from giving a flash when an item is removed from the cart i have inserted the ajax script im using at the bottom. the live version is at this address LINK REMOVED by the way i see it works in chrome but firefox it loads differently why is this?

this is the script for the updated products:

    <?php
include_once("../php/cart_config.php");

session_start();


//add item in shopping cart
if(isset($_POST["type"]) && $_POST["type"]=='add')
{
    $product_code   = filter_var($_POST["product_code"], FILTER_SANITIZE_STRING); //product code
    $return_url     = base64_decode($_POST["return_url"]); //return url

    //MySqli query - get details of item from db using product code
    $results = $mysqli->query("SELECT product_name,price FROM products WHERE product_code='$product_code' LIMIT 1");
    $obj = $results->fetch_object();

    if ($results) { //we have the product info 

        //prepare array for the session variable
        $new_product = array(array('name'=>$obj->product_name, 'code'=>$product_code, 'qty'=>1, 'price'=>$obj->price));

        if(isset($_SESSION["products"])) //if we have the session
        {
            $found = false; //set found item to false

            foreach ($_SESSION["products"] as $cart_itm) //loop through session array
            {
                if($cart_itm["code"] == $product_code){ //the item exist in array
                    $qty = $cart_itm["qty"]+1; //increase the quantity
                    $product[] = array('name'=>$cart_itm["name"], 'code'=>$cart_itm["code"], 'qty'=>$qty, 'price'=>$cart_itm["price"]);
                    $found = true;
                }else{
                    //item doesn't exist in the list, just retrive old info and prepare array for session var
                    $product[] = array('name'=>$cart_itm["name"], 'code'=>$cart_itm["code"], 'qty'=>$cart_itm["qty"], 'price'=>$cart_itm["price"]);
                }
            }

            if($found == false) //we didn't find item in array
            {
                //add new user item in array
                $_SESSION["products"] = array_merge($product, $new_product);
            }else{
                //found user item in array list, and increased the quantity
                $_SESSION["products"] = $product;
            }

        }else{
            //create a new session var if does not exist
            $_SESSION["products"] = $new_product;
        }

    }
    //redirect back to original page
    header('Location:'.$return_url);
}

//remove item from shopping cart

if(isset($_GET["removep"]) && isset($_GET["return_url"]) && isset($_SESSION["products"]))
{

    $product_code   = $_GET["removep"]; //get the product code to remove
    $return_url = base64_decode($_GET["return_url"]); //get return url

    foreach ($_SESSION["products"] as $cart_itm) //loop through session array var
    {
        if($cart_itm["code"]==$product_code){ //item exist in the list

            //continue only if quantity is more than 1
            //removing item that has 0 qty
            if($cart_itm["qty"]>1) 
            {
            $qty = $cart_itm["qty"]-1; //just decrese the quantity
            //prepare array for the products session
            $product[] = array('name'=>$cart_itm["name"], 'code'=>$cart_itm["code"], 'qty'=>$qty, 'price'=>$cart_itm["price"]);
            }

        }else{
            $product[] = array('name'=>$cart_itm["name"], 'code'=>$cart_itm["code"], 'qty'=>$cart_itm["qty"], 'price'=>$cart_itm["price"]);
        }

        //set session with new array values
        $_SESSION["products"] = $product;
    }
    //redirect back to original page

    // header('Location:'.$return_url);
?>
    <!-- this script works to update the removed item from cart on live server -->
<script type="text/javascript">
window.location = "<?php echo $return_url; ?>";
</script>
<?php
}
?>

Answer 1

Because you have set

href="../php/cart_update.php?removep=001&return_url=aHR0cDovLzRydGlmaWNpYWwuY28uemEvZWNvbW1lcmNlL3Nob3Av"

onclose buton. So instead of it, Use Ajax on close button event.

E.g :

<a href="#" onclick="remove_cart_product("001","aHR0cDovLzRydGlmaWNpYWwuY28uemEvZWNvbW1lcmNlL3Nob3Av")">×</a>

In javascript

function remove_cart_product(product_id,return_url)
{
    // send post request. If you are using jQuery try this
    var param = {"product_id" : product_id,"return_url" : return_url};
    $.get("YOUR PHP URL",param,function(data){   // you can also use post method -> $.post(...
        // manipulate UI element
    })
}