Not retrieving data with ajax call

[UK-1991]

Hello,

I am using a bootstrap modal pop up box I just need to show the data from the data base in the modal box for that I hae used ajax to do that as in normal listing when ever users click on the records view button it should show the details of the same record on which the user clicked for I am unable to define completely but please review my code why I am mistaken and inshort nothing foudn

These are the erros I am getting on console of chrome

Uncaught SyntaxError: Unexpected identifier
jquery.js:2 Uncaught TypeError: $(...).lettering is not a function
cf7msm.js:2 Uncaught ReferenceError: cf7msm_posted_data is not defined
2projects.php:125 Uncaught ReferenceError: ajax_post is not defined
projects.php:125 Uncaught ReferenceError: ajax_post is not defined

My code

<?php 
    $get_projects = mysqli_query($connection, "SELECT * FROM projects WHERE email='$email' LIMIT 5");
    while($record = mysqli_fetch_assoc($get_projects)) {
    $project  = $record["proj_name"]; 
    $pid      = $record["proj_id"];

    echo "<div id='project'><h1>$project</h1><div class='ico'>";
    echo "<input type='hidden' id='pid' name='pid' value='$pid' /><button type='submit' onclick='ajax_post();' data-toggle='modal' data-target='#viewModal'><i class='fa fa-eye'></i></button>";
    echo "</div></div>";
    }
?>

My ajax code

function ajax_post() {
    var hr = XMLHttpRequest();

    var url  = "get_data.php";
    var id   = document.getElementById('pid').value;
    var data = "pid="+id;

    hr.open("POST", url, true);
    hr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    hr.onreadystatechange = function() {
    if(hr.readyState == 4 $ hr.status == 400) {
    var return_data = hr.responseText;
    document.getElementById("status").innerHTML = return_data;
    }
    }
    hr.send(data);
}

get_data.php

<div class="projdetails">
    <div class="price">
        <p>Project Details</p>
    </div>

        <?php 
            $pid = $_POST["pid"];
            $get_projects = mysqli_query($connection, "SELECT * FROM projects WHERE proj_id='$pid'");
            while($record = mysqli_fetch_assoc($get_projects)) {
                $project_id =  $record["proj_id"];
                $project    =  $record["proj_name"];
                $budget     =  $record["budget"];
                $start      =  $record["start"];
                $platform   =  $record["platform"];
                $details    =  $record["details"];

            }
        ?>
    <div class="small_details">
    <p class="info">Project ID</p>
    <p class="full"><?php echo $project_id; ?></p>
    </div>

    <div class="small_details">
    <p class="info">Budget</p>
    <p class="full"><?php echo $budget; ?></p>
    </div>

    <div class="clearfix"></div>

    <div class="small_details">
    <p class="info">Platform</p>
    <p class="full"><?php echo $platform; ?></p>
    </div>

    <div class="small_details">
    <p class="info">Start Date</p>
    <p class="full"><?php echo $start; ?></p>
    </div>

    <div class="clearfix"></div>

    <div class="description">
    <span class="mid-border"></span>
        <h2>Project Description</h2>
        <div class="details"><?php echo $details; ?></div>

    </div>
</div>

Please help me out with this concirn thank you in advance

[UK-1991]

Now checnged little code some xyz and dollars mistakes but now I am facing a new problem retreiving the data of the first records only not for all the data's I am alooking for

Like I clikc on second records so should display the data for id 2 not to show all the data from id 1

[UK-1991]

So this is the thing what is happening with me let me provide you an example.

a) This is the record 1 (View Button)

<input type='hidden' id='pid' name='pid' value='dynamic id (1)' /><button type='submit' onclick='ajax_post();' data-toggle='modal' data-target='#viewModal'><i class='fa fa-eye'></i></button>"

b) This is the record 2 (View Button)

<input type='hidden' id='pid' name='pid' value='dynamic id (2)' /><button type='submit' onclick='ajax_post();' data-toggle='modal' data-target='#viewModal'><i class='fa fa-eye'></i></button>"

c) This is the record 3 (View Button)

<input type='hidden' id='pid' name='pid' value='dynamic id (3)' /><button type='submit' onclick='ajax_post();' data-toggle='modal' data-target='#viewModal'><i class='fa fa-eye'></i></button>"

the users click record a of id 1 shows the details of record a when users clicks b) having id 2 shows details for a) having id 1 when users clicks c) having id 3 also shows the record of a and so on and so forth

I hope this will help you alot to help me out.

Thank You

[pritaeas]

Your three inputs all have the same id and name. Because of that getElementById will always returns the first one.

You can pass this as a parameter to your ajax_post(). Do that and you already have the right element, you just need to get it's value. Even if you choose to do this, you still need to make the id attributes unique. It will cause issues at some point if you don't.

[UK-1991]

can you plase show me an example as I am new on ajax and i did not understood your words please

[UK-1991]

Thank your idea worked