How can i send JobId and append values on view. Ajax

Question

This is the lotal listing fetching from the data base r_job table.. When i click view Details button it has to take the job value to controller page through ajax and there i will fetch the job information and in responsense i have to send job related table feillds and have to display on this page.

This is my Dynamic Listing:

$Jobquery = $conn->query("SELECT * FROM r_job ");
while($JobResults = $Jobquery->fetch_assoc()){

<tr>
    <td id="hiringevent"><?php echo $JobResults['hiringevent']; ?></td>
    <td id="JobId"><?php echo $JobResults['id_job']; ?></td>
    <td><button id="ViewDetails" class="btn btn-primary text-center">View Details</button></td>
</tr>

And this is my ajax and jquery Call:

$("#ViewDetails").click(function() {
    $.ajax({
            url: "job-controller.php",
            method: "POST",
            data: {'action':'viewjob','JobId' : + $('#JobId').html()},
            dataType: "json",
            success: function (response) {
                $("#showMessage").html(response['message']);
            },
            error: function (request, status, error) {
                $("#showMessage").html("OOPS! Something Went Wrong Please Try After Sometime!");
            }
        }); 
        return false;
    });

Finally my Controller Page:

if($_POST['action']=='viewjob'){ 
        $jobSearch= $conn->query("SELECT * From r_job WHERE id_job='".$_POST['JobId']."'") or die(mysql_error());
        $ViewJob=$jobSearch->fetch_assoc();
        $hiringevent        =   $ViewJob['hiringevent'];
        $jobname            =   $ViewJob['jobname'];
        $jobdescription     =   $ViewJob['jobdescription'];
        $cutoff             =   $ViewJob['cutoff'];
        $joblocation        =   $ViewJob['joblocation'];
        $interviewlocation  =   $ViewJob['interviewlocation'];
        $jobexperience      =   $ViewJob['jobexperience'];
            $response['message'] = "Show Job Information";
            $response['success'] = true;
            }else{
            $response['message'] = "OOPS! Something Went Wrong Please Try After Sometime!";
            $response['success'] = false;
        }
        echo json_encode($response);
        exit;
    }

My current issue is when i click view details only first view details button working remaining no response

Answer 1

Note there should a single id per page. all you need to do is, create a js function and call it when button is clicked and send the JobId as a parameter. that works fine when you are in Loop.

HTML

$Jobquery = $conn->query("SELECT * FROM r_job ");
while($JobResults = $Jobquery->fetch_assoc()){

<tr>
    <td id="hiringevent"><?php echo $JobResults['hiringevent']; ?></td>
    <td id="JobId"><?php echo $JobResults['id_job']; ?></td>
    <td><button class="btn btn-primary text-center" onClick="getDetails(<?php echo $JobResults['id_job']; ?>)">View Details</button></td>
</tr>
}

JS

function getDetails(jobID){
// ajax Call Here
console.log(jobID)// you can see JobID Here.
// now set the values to by using id
$("#ViewJobId").val(response['jobData']['jobId']);
/* val is used to set aswell as get the values */



  /*in case of td you have to use text insted of val*/
   $("#ViewJobId").text(response['jobData']['jobId']);

}

Answer 2

you have a view issues in your code.

1. ids can only be used once in a HTML page

HTML-ids are unique and can only be used once on a page. that's your first design-error, you need to use classes instead of ids if you are generating html inside a PHP loop.

2. the id sent by ajax needs to depend on where you click

you are currently always sending the same id to your controller because $('#JobId').html() is independently returning the first #JobId's html. you have to find out which button your user clicked to be able to differentiate between your ids.

1. step - replace id by classes in your html for all elements that are rendered more than once. I also added a data-id attribute to your button, this way it's very simple to find out which button was clicked:

<tr>
    <td class="hiringevent"><?php echo $JobResults['hiringevent']; ?></td>
    <td class="JobId"><?php echo $JobResults['id_job']; ?></td>
    <td><button class="ViewDetails" class="btn btn-primary text-center" data-id="<?php echo $JobResults['id_job']; ?>">View Details</button></td>
</tr>

2. step - in your ajax request: find out which button was actually clicked by the user - I am using the data-attribute here:

// ...
data: {'action':'viewjob','JobId' : $(this).data('id')},
// ...

explanation: $(this) in jquery is always referring to the current element which triggered the event. in your case it is the click event which was triggered by your button - so $(this).data('id') is reading the data-attribute "id" in your button's html code.