0

UPDATED CODE I am trying to call a PHP scripts in my main PHP file where everything will be displayed. I just want to display the results from my PHP script with the SQL queries that are being run.

Id also like to include the possibility of showing the results dynamically/by not refreshing the page.

this is what I tried so far, im new to Jquery and AJAX. thanks in advance!

JQuery/AJAX part:

<div id="map_size" align="center">
<script type="text/javascript">
                    //Display station information in a hidden DIV that is toggled
                    //And call the php script that queries and returns the results LIVE
                    $(document).ready(function() {
                    $(".desk_box").click(function() {
                        $id = $(this).attr("data")
                    $("#station_info_"+$id).toggle();
                        
                    $.ajax({
                        url:"display_stationinfo.php",
                        success:function(result){
                    $("#map_size").html(result);
                    }});//end ajax  
                    });//end click
                    });//end ready
    </script>
</div> <!-- end map_size -->

display_station.php (script that I want to call):

<?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
$html = "<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
    echo $_GET['callback'] . '(' .json_encode($html) . ')';             
mysqli_close($conn); // <-- DO I NEED TO INCLUDE IT HERE OR IN MY db_conn.php SINCE IM INCLUDING IT AT THE TOP?

?>

Improve this question
7
  • 2
    post: "GET", == type: "GET", Commented Oct 8, 2014 at 17:08
  • what about it? it didnt give me any results Commented Oct 8, 2014 at 17:19
  • 1
    your php script must echo a result in order to be received by the done callback. Doesn't one of your alerts go off? Commented Oct 8, 2014 at 17:29
  • are you still facing the problem !!! does my answer helps? Commented Oct 10, 2014 at 5:57
  • I updated my code as you can see it above. I'm facing problems combining for JQuery toggle function and using AJAX to call my PHP script Commented Oct 14, 2014 at 14:08

1 Answer 1

Reset to default
2

You should find out what are the ways in which you can make jquery ajax calls

Other basic tutorial which will help you in ajax is below

http://api.jquery.com/jquery.ajax/

http://www.w3schools.com/jquery/ajax_ajax.asp

http://www.w3schools.com/jquery/jquery_ajax_intro.asp

http://www.w3schools.com/jquery/jquery_ref_ajax.asp

http://www.w3schools.com/jquery/jquery_ajax_get_post.asp

http://www.tutorialspoint.com/jquery/jquery-ajax.htm

Since you have not explained clearly the question i am making genral assumption and going to give you two answer on how you can use ajax for your purpose

1.AJAX LOAD

Lets say your HTML structure is

HTML

<div id="map_size" align="center"></div>

MY JS FILE

 $(document).ready(function(){

  jQuery("#map_size").load("myphp.php", {}, function() { });
})

PHP

echo "<p>THIS IS TEST FOR DEMO AJAX LOAD</p>"

you can do much more if you are retrieving from db.

myphp.php

//get number of rows for X,Y coords in the table
while($row = mysqli_fetch_assoc($coord_result)){    
//naming X,Y values
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];


//draw a box with a DIV at its X,Y coord     
echo "<div id='desk_box' style='style:absolute;
                                    left: " . $x_pos. " px;
                                    top:  " . $y_pos. " px;'>box number</div>";
    }

you can also do same thing on button click and load everything dynamically without refreshing page

2.Jquery Ajax [GET, POST] : Link

This also can be used

HTML

<div id="map_size" align="center"></div>

MY JS FILE

//http://api.jquery.com/jquery.ajax/

 $(document).ready(function(){

   $.ajax({url:"myphp.php",success:function(result){
       $("#map_size").html(result);
   }});
})

myphp.php

//get number of rows for X,Y coords in the table
while($row = mysqli_fetch_assoc($coord_result)){    
//naming X,Y values
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];


//draw a box with a DIV at its X,Y coord     
$html = "<div id='desk_box' style='style:absolute;
                                    left: " . $x_pos. " px;
                                    top:  " . $y_pos. " px;'>box number</div>";
    } 
 //create a JSON 
  echo $_GET['callback'] . '(' . json_encode($html ) . ')';
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

did this solve your problem ?
sorry for the late reply, I will try this and let you know ASAP. thanks
No problem , take your time :)
hey, I updated my code as you see above. When I click on the ".desk_box" DIV it shows me this error : Notice: Undefined index: callback in C:\webroot\display_station.php on line 23 (" that is where im doing json_encode .. basically I want to combine the click/toggle function with the AJAX call for the PHP script. @hitesh
heres the link to the new opened post: stackoverflow.com/questions/26363123/…

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.