I will try to describe as simple as possible what I am trying to achieve with my code. I am new with JQuery AJAX and all the examples online confuse me since they're all using Forms which i'm not using at all. Here is my fiddle to have a better understanding of what I'm doing: http://jsfiddle.net/x4d6jqxe/
I have 3 files : map.php , display_desk.php and display_station.php
When map.php is loaded (everything will be shown here) I want it call display_desk.php (this script creates DIVs to show small boxes on screen at XY coordinate thats being read from the database). When a DIV from display_desk.php is clicked, it will then open another DIV with information inside by the use of of a JQuery toggle function which is shown below.
Now, how do I make these JQuery AJAX calls for these scripts? If anything gets updated/deleted/inserted etc in my database I want it to appear LIVE on screen for all of these scripts.
thanks in advance!
map.php
<script type="text/javascript">
/*I tried multiple examples like this but don't work...*/
$(document).ready(function(){
$.ajax({
type: "GET",
url: "display_desk.php"
}).done(function(data){
alert(data);
}).fail(function(jqXHR, textStatus, errorThrown) {
alert(textStatus);
});
/*I use this function to toggle the station_info DIV that I want it to call display_station.php */
$(".desk_box").click( function() {
$(".station_info").hide();
$("#station_info"+ $(this).attr('data') ).show();
});
</script>
**display_desk.php I want it to be called as soon that map.php is loaded **
<?php
include 'db_conn.php';
//query to get X,Y coordinates from DB for the DESKS
$desk_coord_sql = "SELECT coordinate_id, x_coord, y_coord FROM coordinates";
$desk_coord_result = mysqli_query($conn,$desk_coord_sql);
//see if query is good
if($desk_coord_result === false) {
die(mysqli_error());
}
//didsplay Desk stations in the map
while($row = mysqli_fetch_assoc($desk_coord_result)){
//naming X,Y values
$id = $row['coordinate_id'];
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];
//draw a box with a DIV at its X,Y coord
echo "<div class='desk_box' data='".$id."' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>id:".$id."</div>";
} //end while loop for desk_coord_result
mysqli_close($conn);
?>
display_station.php I want it to load LIVE data when being clicken on with the toggle function above
<?php
include 'db_conn.php';
//query to show workstation/desks information from DB for the DESKS
$station_sql = "SELECT coordinate_id, x_coord, y_coord, section_name FROM coordinates";
$station_result = mysqli_query($conn,$station_sql);
//see if query is good
if($station_result === false) {
die(mysqli_error());
}
//Display workstations information in a hidden DIV that is toggled
while($row = mysqli_fetch_assoc($station_result)){
//naming values
$id = $row['coordinate_id'];
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];
$sec_name = $row['section_name'];
//display DIV with the content inside
echo "<div class='station_info' id='station_info".$id."' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>Hello the id is:".$id."</br>Section:".$sec_name."</br></div>";
}//end while loop for station_result
mysqli_close($conn);