Jquery .post() passing multiple variables not working

Question

In my code below I'm trying to pass 2 parameters to an Ajax call, however when loading the page, I'm getting a javascript error shown below. Note this error happens even before i attempt to trigger the ajax with a button click (the code shown below is in a working button click event handler code).

When I comment out the .post() block of code, the page loads fine without any javascript errors. Below is the code. This is the first time i'm passing 2 parameters to ajax .post() after refering to this post on how to do it. Sending Multiple variables with Jquery ajax

Can anyone tell me whats wrong with my code? Both my alert statements work fine and display correct data. Note i'm using Cakephp so there's some cakephp syntax there.

       //Get the merchant config
        alert("you got here!");

        bookingdate = $(this).parent().parent().find("#bookingdate").serialize();
        merchant_id = $(this).parent().parent().find("#merchant_id").serialize();

        alert (bookingdate + " " + merchant_id);

        $.post( "<?php echo Router::url(array('controller'=>'MCP','action'=>'getMtRestaurant')); ?>", {bookingdate, merchant_id}, function() { 
        })
        .done(function(data) {
            alert(data.response);
            //parseddata = JSON.parse(data);
            $('.ajax_booking_edit').append(data);

        })
        .fail(function() {
            alert( "There was a problem retrieving the booking!" );
        })
        .always(function() {
            //alert( "finished (always)" );
        });

I'm showing below the alert popup that displays the bookingdate and merchant_id after being serialized.

Answer 1

Try

serialize() both of them together.

var bookingdate = $(this).parent().parent().find("#bookingdate"),
    merchant_id = $(this).parent().parent().find("#merchant_id"),
    filterdata = bookingdate.add(merchant_id).serialize();
$.post("<?php echo Router::url(array('controller'=>'MCP','action'=>'getMtRestaurant')); ?>",
filterdata, function () {})

Answer 2

A trick can be used, if passing one value works.

Example :

var msg = $arg1 + "--" + $arg2 + "--" + $arg3;

    $.post("../Php/test.php", { msg: msg },
                            function (result) {
                                alert(result);
                            });

In the php file do,

<?php
   $msg = $_POST['msg'];
   $ar = explode("--", $msg);
   //Now we have $ar[0] --> arg1, $ar[1] --> $arg2, $ar[2] --> $arg3
?>

Hope this helps.

Answer 3

If you're sending a POST through jQuery, you need to choose variable names for the variables you're using. The fix is simple, just change the row to:

$.post( "<?php echo Router::url(array('controller'=>'MCP','action'=>'getMtRestaurant')); ?>", {bookingDate: bookingdate, merchantId: merchant_id}, function() {