Question

I’m submitting a form using the AJAX JQuery validation plugin. The code looks something like this:

$(document).ready(function(){
$("#myform").validate({
    debug: false,
    rules: {
        fname: {required: true}, 
        sname: {required: true}, 
        gender: {required: true}, 
    },
    messages: {
        fname: {required: " *"},
        sname: {required: " *"},
        gender: {required: " *"},
    },
    submitHandler: function(form) {
        $('input[type=submit]').attr('disabled', 'disabled');
        $('#results').html('Loading...');
        $.post('process_participant.php', $("#myform").serialize(), function(data) {
            $('#results').html(data);
        });
    }
});
}); 

Now so the problem is after I send this information to my PHP page to be prcoessed (process_participant.php) I want to respond with a confirmation box asking if the user wants to add another participant. The PHP code looks something like this:

if (everything processes okay){

echo '<script type="text/javascript">';
echo 'input_box=confirm("Saved successfully. Would you like to add another participant?");
            if (input_box==true) {
                window.location = "new_participant.php"
            }   
            else {
                window.location = "home.php"
            }';
echo '</script>';  
}

This all works fine but the default confirmation box isn’t acceptable. I need to be able to style it and change it from OK and CANCEL to YES and NO. I decided to use this plugin: http://kailashnadh.name/code/jqdialog/ and use the following code on the PHP side:

echo '<script type="text/javascript">';

echo "  function confirmBox() {
                $.jqDialog.confirm(\"Are you sure want to click either of these buttons?\",
                function() { window.location = \"new_participant.php\"; },
                function() { window.location = \"home.php\"; }  
                );
            });";

echo "confirmBox();";

However I can’t seem to get it to work. Maybe I should avoid using a plugin? The whole AJAX thing is making things confusing. Anyone know the best way to implement a custom confirm box in this situation?

Answer 1

create the box from the start with display:none
and when the function from the post request returns
do the checks (based on the variable data)
and if everything is ok change the visibility using jquery’s show()