How can I submit JobId and add values ​​in the view. Ajax

Question

This is a lottery list from the r_job database table. When I click the Details Details button, it should take the task value on the controller page via ajax, and there I will receive information about the task, and in response I need to send feillds tables related to the work and display it on this page.

This is my dynamic list:

$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 problem is when I click view information only at a glance the button remains unanswered

Answer 1

Please note that there must be one identifier per page. all you have to do is create a js function and call it when you click the button and send JobId as a parameter. This works great 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 problems viewing the code.

1. ids can only be used once per HTML page

HTML identifiers are unique and can only be used once per page. that is your first design mistake, you need to use classes instead of ids if you generate html inside a PHP loop.

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

you are currently always sending the same identifier to your controller because $('#JobId').html() independently returns the first #JobId html. you need to find out which button your user clicked to be able to distinguish between your identifiers.

1. step - replace id with classes in html for all elements that are displayed more than once. I also added the data-id attribute to your button, so it’s very easy to find out which button was pressed:

 <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 clicked by the user - I use the data attribute here:

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

Explanation: $(this) in jquery always refers to the current element that raised the event. in your case, this is a click event that was triggered by your button - therefore $(this).data('id') reads the data attribute "id" in your button HTML code.