How can I call a PHP script using JQuery toggle and AJAX?

Question

I am trying to call a PHP script in my main PHP file . I want to display the results from my PHP script with the SQL queries that are being run.

I'd 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!

working fiddle: http://jsfiddle.net/52n861ee/ thats what I want to do but when I click on it will tell me error: line 23 (" where I am using json_encode

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",
                        type: "GET",
                        success:function(result){
                    $("#station_info_"+$id).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?

?>

Once (if) you get a response from the ajax call, it will replace the <script> ... </script> block. — PeterKA
– PeterKA, Commented Oct 14, 2014 at 14:24
When you run $("#map_size").html(result);, result becomes the new contents of #map_size .... that's not a good place to put your script. The best place is an external file. Let us know if we should clarify further. — PeterKA
– PeterKA, Commented Oct 14, 2014 at 14:42
@user3558931 I updated my code and included a JSfiddle of what I want it to look like.. that works if I include both of my PHP scripts in my main.. but since I'm trying to call it with AJAX it won't do anything. I see the mistake I did with $("#map_size").html(result); .. so since i'm trying to target #station_info_ shouldn't I replace it for that with the ID? — mario
– mario, Commented Oct 14, 2014 at 15:02

PeterKA · Accepted Answer · 2014-10-14 15:20:39Z

1

Three problems:

In your PHP script you're treating a html string as though it was an object or array --- you cannot output a string literal as JSON
In your JS script you're treating the 'JSON' [object] as though it was a string literal or a html object --- you cannot output JSON that way, you need to use DOT notation to access it's data.
Even though your PHP script seems to be sending JSONP you have not specified a jsonp dataType in your ajax call.

Assuming all your PHP scripts are on the same domain, change echo $_GET['callback'] . '(' .json_encode($html) . ')'; to:

echo $html;

So that your PHP output is consistent with what your JS expects.

answered Oct 14, 2014 at 15:20

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mario Over a year ago

alright, so I changed what you told me. Still no DIV is being toggled when I click? thansk for explaining my problems in my code!

PeterKA Over a year ago

Is there anyway to see your live set up?

PeterKA Over a year ago

What do you see when you load display_stationinfo.php in your browser ... via url such as http://yourserver.com/base_folder/display_stationinfo.php?

mario Over a year ago

If I include the echo inside the while loop :I see all the DIVs on their appropiate coordinates like so: jsfiddle.net/2t4yrL0m if I put the echo outside my while loop I will only see the last row ID DIV on screen.

PeterKA Over a year ago

Your PHP script needs some work but that may not solve the issue. I can't c I can't tell Initialize $html=''; before the while loop, then in the loop concatenate the strings if you intention is to see all the divs: $html .= ......

Collectives™ on Stack Overflow

How can I call a PHP script using JQuery toggle and AJAX?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related