Question 36609 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Pulling info from MySQL using PHP, AJAX and jQuery and show in pop up

I am currently working on a project that is a bit of a learning curve for me at the moment so I thought I’d turn to stack to see if anyone can help me make sense of a hole I appear to be digging myself…

I’m working on a Text browser game that has a very basic vector map (For now), see screenshot in link below to see how it current looks.

Preview of instance and what I’m looking for it to do

My idea is that when you click one of the SVG paths, a pop up shows information based on the id that is in <path id=""

Right now, the code looks like this because it’s not dynamic.. propertyDetail and prop2 are the same div, just different content inside them, I want it to be one div, that loads the content based on a mysqli query, finding info from properties based on the id="" in path that’s clicked.. So for this example, in the MySQL database the property id will be Path_27 or Path_57

<script>
$(document).ready(function () {
    $("#Path_27").click(function(){
        $(".propertyDetail").fadeToggle();
    });
    $("#closeDetail").click(function(){
        $(".propertyDetail").fadeToggle();
    });
    $("#Path_57").click(function(){
        $("#prop2").fadeToggle();
    });
    $("#closeDetail2").click(function(){
        $("#prop2").fadeToggle();
    });
});
</script>

The code for the PHP, well it’s pretty simple right now too.. just a lookup based on the id that will be passed from the UI when clicked…

$query = $dbb->query("SELECT * FROM properties WHERE id = $id LIMIT 1");

Now I know this will be an AJAX request and not just as simple as the code above, but I don’t currently know where to even start to achieve what I’m trying to do in a scalable way 🤦

UPDATE*
I do not want to pull paths from the database.. as in using a while loop or something like that, the paths already are hard coded on the page, I just want to find info about that path that’s clicked, and show it using a pop up window

Thank you kindly in advance if someone is willing to take a look. 🙂

Tags:

2

Answers


  1. 0

    Add a jQuery ajax request to your $("#Path_27").click(function(){ and/or $("#Path_57").click(function(){ function block. Point it at your PHP file on the server handling the mysql query. In that file echo the query results and handle that back in your jquery click handlers.

    In the jQuery ajax request, designating the return data type as JSON: dataType: "json", then…

    In the PHP file, using json_encode() to send a string representation of the property information back to the browser.

    And back in your Javascript file, the property information is provided as a JSON object, accessible like: property_info_obj.street_address.

    $("#Path_27").click(function(){
    $(".propertyDetail").fadeToggle();

    $.ajax({
        type: "POST",

        url: "get_property_info.php", // PHP file on server
        data: {"path_id": this.id}, // provide path id here

        dataType: "json",

        // handle server response here
        success: function(property_info_obj) {
            // assuming "street_address" is one of the field names
            alert(property_info_obj.street_address); 
        },

        error: function() {
            $(".result").append("Error occured");
        },
    });
});

    get_property_info.php

    $sql = "SELECT * FROM properties WHERE id = ? LIMIT 1";
$stmt = $conn->prepare($sql); 

$stmt->bind_param("i", $_POST["path_id"]);

$stmt->execute();
$result = $stmt->get_result();

$property_info = array();

while ( $row = $result->fetch_assoc() ) {
    $property_info[] = $row;
}

echo json_encode($property_info);
    Login or Signup to reply.
  2. 0

    You can do in this way. you can define a function to each path like in this way.

    <path id="" data-id="27" onclick="make_request(this);">

    In your javascript code do the folllowing.

    <script>

function make_request(obj){

var path_id= $(obj).data('id');
  $.ajax({
    url: "test.php",//your path url
    type: "post",
    data: {id:path_id} ,
    success: function (response) {
       // return your response from php in json.the you can do as below
            var data=JSON.parse(response);
           //render your data with html template
            e.g var html="<div>name:"+data.name+"</div>";
           // then append this data into you poup
           $("#prop"+path_id).html(html);
           $("#prop"+path_id).show();


    },
    error: function(jqXHR, textStatus, errorThrown) {
       console.log(textStatus, errorThrown);
    }
});
        
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search