SQL Query creates buttons that one can click to 'hopefully' change DIV

Question

I am failing hardcore with describing this but here it goes..

I have home.php, pretty much just:

<body>
<div id='leftColumn'>
  <?php include ('includes/roomQuery.php') 
</div>                                        
</body>

Now, roomQuery.php echos my sql column 'room_name' from table 'rooms' as follows:

echo "<td><a href=\"room.php?room=$roomName\">$roomName</a></td>";

Any of the room links will take me to room.php and populate the page with more queries respective to $roomName via $_GET.

room.php is basically:

$get = $_GET['room'];
$query
    while($row = $result->fetch_assoc()){
        echo $query

This is working perfectly for what it is.

====================================

however, I am trying to make my site flow better, and have been trying out the jQuery .load function. So far I have changed roomQuery.php to:

echo "<td><button>$roomName</button></td>";

here is my jQuery to replace home.php #page with room.php #page:

    $(document).ready(function(){
        $("button").click(function(){
            $("#page").load("room.php #page",function(responseTxt,statusTxt,xhr){
                if(statusTxt=="success")
                    alert("Success");
                if(statusTxt=="error")
                    alert("Error: "+xhr.status+": "+xhr.statusText);
            });
        });
    });

When I click any of the buttons that roomQuery.php spits out, it replaces #page perfectly but I cannot grasp how/if I can send $_GET['room'] to room.php so that when #page is loaded, the information is still respective to the room I clicked on. If I change jQuery to

$("#page").load("room.php?room=CL%20124 #page"

Then #page is populated with the data specifically respective to room CL 124. Is it possible to post the button text that is output from roomsQuery.php to room.php #page when the button is clicked?

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

Yes, you can pass data into the .load() call as the second parameter.

Firstly, you need to work out how to get the room ID from the DOM into your jQuery call, maybe you could use a data attribute on the button element like this:

<button data-room-id="123">Click me</button>

Then use jQuery like this:

$("button").click(function(){
    // define your room ID here, however you do it
    var your_room = $(this).data('room-id');
    $("#page").load(
        "room.php #page",
        {
            room: your_room
        },
        function(responseTxt,statusTxt,xhr){
            if(statusTxt=="success")
                alert("Success");
            if(statusTxt=="error")
                alert("Error: "+xhr.status+": "+xhr.statusText);
        }
    );
});

Edit: just noticed that you might actually be using the button's value as your room ID, if so, use this definition:

var your_room = $(this).val();

If you're expecting spaces or non-alpha numeric characters in this value, you might want to consider URL encoding it before you send it.

edited May 23 '17 at 11:57

Community

1
1

answered Aug 08 '14 at 01:24

scrowler

24,273
9
60
92

Thanks for the fast response. I am plugging this is in now and seeing what I can work out. – dunPushedthatPanicButton Aug 08 '14 at 01:39
So i have verified that changing the button to include data-room-id works. The buttons are populating with the data set as their respective $roomName. However, when I click the button it is still populating #page with queries from all the rooms. Its not adding the ?room=$roomName to room.php. do I need to modify how the data is being interpreted by jQuery? – dunPushedthatPanicButton Aug 08 '14 at 01:58
When you provide data to `.load()` as an object (which I've done above), the HTTP method is changed to POST instead of GET. You'll need to either pass a string like `data: "room=" + your_room` or change your PHP superglobal from `$_GET` to `$_POST` – scrowler Aug 08 '14 at 02:04
using var roomName = $( this ).val(); worked perfect. thanks a ton – dunPushedthatPanicButton Aug 09 '14 at 05:33

SQL Query creates buttons that one can click to 'hopefully' change DIV

1 Answers1