How to get data from script and display in php form (dialog box)?

Question

I have a requirement where

<div class="button" id="room_open" value="<?php echo $Records['room_id'];?>" onclick="tappedOnRoom(<?php echo $Records['room_id'].","."'".$Records['room_status']."'".","."'".$Records['block_num']."'";?>)"><?php echo $Records['block_num']."-".$Records['room_id'];?></div>

And my script is:

function tappedOnRoom(id,status,block){                     
if(status == 'Open')            
   {                
      $(function() {
         $( "#dialog" ).dialog({ title: "Book a Room",width: 835, height:300});
       });
    }
}

So, when my div is clicked, the script checks the status and if the status is " Open ", then a form opens in a dialog box. So, my requirement is that I need to display block_num and room_id in the form dynamically.

My form contains:

<output type="text" id="blockNum" name="blockNum" class="span6" value=""/>
<output type="text" id="roomNum" name="roomNum" class="span6" value=""/>

Now, I would like to display block and status in the above output types.

Answer 1

Looks like you're passing it to a function. So this would be fairly easy using JQuery.

In your tappedOnRoom function:

$(function() {
    $( "#dialog" ).dialog({ title: "Book a Room",width: 835, height:300});
    $("#blockNum").val(block);
    $("#roomNum").val(status);
}

You may also want to look at this example for a different way to write it.

Edit

I would advise you to not use the output tag. To be honest it is not a tag I have used and the examples I have seen, make it seem like they are really designed for simple calculations. Furthermore they are not supported by Internet Explorer. While most people don't use IE anymore, and developers tend to have a wide variety of angry epithets at the ready when the browser is mentioned, the fact is that you are still making your application unusable for a large number of people.

SO, instead I would advise you to use a <span> or <div> tag which works on all browsers, and which Jquery can insert into quite easily, Simply replace your output tags with something like this:

<div id="blockNum" name="blockNum" class="span6"> </div>
<div id="roomNum" name="roomNum" class="span6"> </div>

Then you can adapt the JQuery to something like this:

$(function() {
    $( "#dialog" ).dialog({ title: "Book a Room",width: 835, height:300});
    $("#blockNum").text(block);
    $("#roomNum").text(status);
}

Regarding your hiding of divs, this is primarily a CSS question, although you can use JQuery to actually program the CSS. It wasn't clear to me that you didn't actually have the dialog portion down as far as hiding. I did a quick search and found this which looks like it does exactly what you want - just substitute the JQuery #opener for #room_open . It makes use of the show feature of .dialog .

PS in this example they use special effects. I believe you can use "appear" and "hide", and you can certainly just shorten the duration, to avoid any animations, if you wanted to.