jQuery .post参数未发送

Question

I'm having an issue that I have been trying to research and fix for hours now and I am at my wits-end in not understanding why it's not working correctly.

I have a jQuery dialog (via jQuery UI) pop-up when someone wants to delete an item (by clicking on a delete icon image and calling a JS function with a supplied "id" integer). The pop-up dialog is working properly and comes up with all the available information and button options. Here's the code for that:

function removeItem(id) {
    var rid = id;
    $("#dialog").dialog({
        title: "Removal Confirmation",
        resizable: false,
        height: 200,
        modal: true,
        show: {
            effect: "blind",
            duration: 800
        },
        buttons: {
            "Confirm": function() {
                $.post("includes/inc_details.php", {
                    "type":"remove",
                    "id":rid
                });
                window.location.reload();
                $(this).dialog("close");
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });
}

When the "Confirm" button within the dialog is clicked, it's suppose to .post to a php file for further processing (code for that portion is below), and when complete will reload the browser window and then close the dialog.

However, what is routinely happening is the page just looks like it's reloading and then the dialog closes but the item doesn't get deleted. I've watch the processing via chromeDev tools and it appears that when the .post php file is called the two parameters are not sent with it. (I've used similar .posts other places - albeit without a jQuery UI dialog box - with no issues).

HELP!

PHP code being called via the .post method:

 $sql = "select * from shopping_cart WHERE id=$_POST[id] LIMIT 1";
            $result = mysql_query($sql);
            $row = mysql_fetch_assoc($result);

            if ($row["Type"] == "CouponUsed") {
                $sql_delete_free_item = "delete from shopping_cart where ProductID=".$_SESSION["freeProductId"]." and SessionID='".session_id()."'";
                $query = mysql_query($sql_delete_free_item);
                unset($_SESSION["freeProductId"]);
            }
$sql_id = "SELECT ProductID FROM shopping_cart WHERE id=$_POST[id] LIMIT 1";
    $result_id = mysql_query($sql_id);
    $row_id = mysql_fetch_assoc($result_id);
    $sql_remove = "DELETE FROM shopping_cart WHERE id=$_POST[id] LIMIT 1";
if (mysql_query($sql_remove)) {
        $sql_remove2 = "DELETE FROM shopping_cart_single WHERE singleid=$_POST[id]";
        mysql_query($sql_remove2);
    }
mysql_close($conn);
    exit();

Thank you, in advance!

Answer 1

Just including the relevant part.

"Confirm": function() {
            $.post("includes/inc_details.php", {
                "type":"remove",
                "id":rid
            }).then(function() {
                window.location.reload();
                $(this).dialog("close");
            });
        },

Remember what the A in AJAX stands for - asynchronous!

EDIT: To explain what was going on, here's how the browser reacts.

1. POST request queued up for submission. Asynchronous, so not immediate . Requests take much longer than other user actions, so it won't run it and block the UI thread.
2. Window told to reload. The browser cancels all pending requests - iframes, images, ajax requests , and begins loading a new page.
3. (If it hadn't reloaded, then once the javascript stack ended, it would actually send the request)

Answer 2

select * from shopping_cart WHERE id='".$_POST[id]."' LIMIT 1

Your problem is that you didn't add double quote and dot around the $_POST[id],

and also your $sql_remove, please double-check all your $_POST[id] is '".$_POST[id]."'

Answer 3

When the "Confirm" button within the dialog is clicked, it's suppose to .post to a php file for further processing (code for that portion is below), and when complete will reload the browser window and then close the dialog.

Your call to reload() is after the $.post() call. So you tell the browser to make the POST request, then immediately reload the page. Since you are reloading the page before the POST request is sent, you cancel the POST request.

You need to move the call to reload() into a callback function that you pass to $.post() .

Better still: Don't use Ajax. Just submit a regular form and have the server side handler redirect to the URL you want to reload.