How to display PHP message after jQuery loading?

Question

I am newbie at PHP. I wanted to build a small project of room booking, and improve it by using AJAX.

http://img851.imageshack.us/img851/6172/88303815.png

I'm trying to display an alert message every time someone is reaching the limit of two hours room time. The registration div is where all the PHP is taking care of the "Get Room" action. My problem is that the room_per_user function does not show the correct amount of rooms per user unless I refresh the page.

How can i correct my code to present the error message?

     $("#formReg").ajaxForm({
       url: "room.php",
       type: "POST",
       beforeSubmit: disableButtons,
       success: function(data) {

          $("#registration").load("room.php #registration", function() { 
                $(function() {

          <?php 
          if(rooms_per_user($_SESSION['user_id'])>=2)
          {
            $string = "\$(\"#dialog-message\").find('.error').show();";
            echo $string;
          } 
          ?>

                    $( "input:submit, a, button", ".registration" ).button();
                    $( "a", ".registration" ).click(function() { return false; });
                });                 
          });


         $("#cancellation").load("room.php #cancellation", function() {     
            $(function() {
                 $( "input:submit, a, button", ".cancellation" ).button();
                $( "a", ".cancellation" ).click(function() { return false; });
              });                     
          });

        }); 

          function disableButtons(){
           $('form').find('input[type="submit"]').attr('disabled', 'disabled');
          }

Thank you very much, and forgive if I did some fatal mistakes ;-)

Sorry, I copied the code wrong in the PHP part (i tried to shorten it up and forgot the PHP tag)

EDIT 2: I tried to use the json encode but i don't know why it doesn't work for me... It get stuck at the submit button disabling phase. When I delete the datatype line it works fine... Help anyone? Thank you very much for your answers!

    $("#formReg").ajaxForm({
        url: "room.php",
        dataType: 'json',
        type: "POST",
        beforeSubmit: function() {
            $('form').find('input[type="submit"]').attr('disabled', 'disabled');
        },
        success: function(data) {

            alert(data.status);

            $("#registration").load("room.php #registration", function() { 
                $( "input:submit, a, button", ".registration" ).button();
                $( "a", ".registration" ).click(function() { return false; });
            });


            $("#cancellation").load("room.php #cancellation", function() {     
                $( "input:submit, a, button", ".cancellation" ).button();
                $( "a", ".cancellation" ).click(function() { return false; });
            }); 

           }

      });

You can't mixup PHP and JS that way. Is rooms_per_user PHP function? — Jovan Perovic
– Jovan Perovic, Commented Mar 26, 2012 at 19:37
Looks like $_SESSION['user_id'] is being called as javascript. But that is PHP is an array that PHP uses. What does room.php return? — Gohn67
– Gohn67, Commented Mar 26, 2012 at 19:39

Brian · Accepted Answer · 2012-03-26 20:51:15Z

David is sort of correct in his response, but I wanted to elaborate on it a little more.

What you have here is a javascript function with variable output based on the current number of rooms a user has.

The script you posted above is loaded when the user visits your page initially. Which means when they initially load the page and have no rooms reserved, the

<?php 
if(rooms_per_user($_SESSION['user_id'])>=2)
{
$string = "\$(\"#dialog-message\").find('.error').show();";
echo $string;
} 
?>

block of your code is going to not be output to the page. This is why your users are not seeing the alert message when they try to add additional rooms. The code that you're outputting to the page does NOT reload itself with each ajax request, but rather is static content. So as the users register additional rooms beyond 2, the JS code here:

$("#dialog-message").find('.error').show();

is never being output or used.

Typically when you do validation like this, the "correct" way is to do it server side. So when a user tries to register a room but already has 2 of them booked, the AJAX request fires off to room.php which receives the "data" response back from the server. My suggestion would be to add a dataType to your ajaxForm parameters like this

   url: "room.php",
   type: "POST",
   beforeSubmit: disableButtons,
   dataType: 'json',
   success: function(data) {

This will tell jQuery to expect a response as JSON from the server. In your script rooms.php you will then need to establish a standard data format to respond with and return it by using

echo json_encode( array( 'status' => 'OK' ) ); //tell the JS code that the status was OK

or in the event of an error: echo json_encode( array( 'status' => 'ERROR' , 'errtxt' => 'Sorry, but you have already reserved 2 rooms.' ) ); //tell the JS code that the status was OK

So I've boiled down your JS code and removed a lot of jQuery wrappers around functions within functions that you didn't need and here's the end result:

$("#formReg").ajaxForm({
    url: "room.php",
    type: "POST",
    beforeSubmit: function() {
        $('form').find('input[type="submit"]').attr('disabled', 'disabled');
    },
    success: function(data) {

        if( data.status != 'OK' ) {
            $("#dialog-message").find('.error').html(data.errtxt).show();
            return;
        }

        $("#registration").load("room.php #registration", function() { 

            $( "input:submit, a, button", ".registration" ).button();
            $( "a", ".registration" ).click( function(e) {
                e.preventDefault();
            });

        });

        $("#cancellation").load("room.php #cancellation", function() {     
            $( "input:submit, a, button", ".cancellation" ).button();
            $( "a", ".cancellation" ).click(function() { return false; });
        }); 
    }
});

Couple that with the rest of the suggestions for the PHP side, and I think you'll be sittin pretty.

David · Accepted Answer · 2012-03-26 19:43:25Z

You appear to be mixing JavaScript with PHP:

if(rooms_per_user($_SESSION['user_id'])>=2)

Is rooms_per_user a PHP function or a JavaScript function? $_SESSION is definitely a PHP array. Anything that's in PHP is going to be meaningless to the JaveScript, and vice versa. Most likely this code is causing errors in your browser JavaScript console.

PHP executes on the server-side. When it's done executing, the page is emitted to the browser. Then the JavaScript executes in the browser. The PHP code and the JavaScript code exist in two entirely different contexts and can't be mixed like this.

Given the structure you have in your JavaScript code right now, the easiest way to achieve the desired functionality would probably be to add another call to .ajax() to call a server-side resource, get the value of rooms_per_user, set it to a JavaScript variable, and then use it (all in the success of that .ajax() call).

Basically, your JavaScript code can't talk directly to your PHP code. If there's a value that exists only on the server, you need to make a call to that server to get that value.

Collectives™ on Stack Overflow

How to display PHP message after jQuery loading?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related