jQuery UI dialog form - Missing variable values

Question

On my website I am making a dialog form with the jQuery ui framework.

The dialog requests a topic, review content, name and city which should be inserted into mySQL. However when I want to pass the variables to PHP there is no value in the variables.

Here is the entire js function that handles the dialog:

$( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 600,
    width: 550,
    modal: true,
    buttons: {
        "Skriv Review": function() {
            var bValid = true;
            allFields.removeClass( "ui-state-error" );

            bValid = bValid && checkLength( topic, "topic", 3, 16 );
            bValid = bValid && checkLength( review, "review", 1, 10000 );
            bValid = bValid && checkLength( name, "name", 1, 25 );
            bValid = bValid && checkLength( city, "city", 1, 16 );

            bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Bruger skal være a-z, 0-9, underscores, begynde med et bogstav." );

            if ( bValid ) {
                $( "#users tbody" ).append( "<tr>" +
                    "<td>" + topic.val() + "</td>" + 
                    "<td>" + review.val() + "</td>" + 
                    "<td>" + name.val() + "</td>" +
                    "<td>" + city.val() + "</td>" +
                "</tr>" ); 

                var data = {
                    topic: topic.val(),
                    review: review.val(),
                    name: name.val(),
                    city: city.val()
                }

                $.ajax({
                    type : 'POST',
                    url : 'bruger-reviews.php',
                    dataType : 'json',
                    data: data,
                    success : function(data){
                        //success
                    }
                });
                $( this ).dialog( "close" );
            }
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    },
    close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
    }
});

And here is how I receive the data in PHP:

$ins_topic = $_POST['topic'];
$ins_review = $_POST['review'];
$ins_name = $_POST['name'];
$ins_city = $_POST['city'];

I have no issue displaying the values like it is done in the demo from jQuery UI.

There is no data when I $_GET or $_POST the variables. Why is it not possible for me to pass the values to PHP? Is there another method I can try?

Thanks.

Answer 1

You should take the values to an object or variables before close the dialog.

this code removes the removes the dialog from the DOM; $( this ).dialog( "close" );

use this;

if ( bValid ) {
$( "#users tbody" ).append( "<tr>" +
"<td>" + topic.val() + "</td>" + 
"<td>" + review.val() + "</td>" + 
"<td>" + name.val() + "</td>" +
"<td>" + city.val() + "</td>" +
"</tr>" ); 
var data = {
    topic: topic.val(),
    review: review.val(),
    name: name.val(),
    city: city.val()
}
$( this ).dialog( "close" );

than use this data object on ajax request

$.ajax({
                        type : 'POST',
                        url : 'bruger-reviews.php',
                        dataType : 'json',
                        data: data,
                        success : function(data){
                            //success
                        }
                    });