Use Ajax to call details of the selected id from database in a div in the samepage

Question

Discription

I have this table with the name of call.php

<?php

$result = mysqli_query($conn,"SELECT * FROM job  where approved='1' ORDER BY `CreatedTime` DESC");

echo "<table id='maintable' class='table-fill' border='0' cellpadding='0' cellspacing='0'>
<tr>
<th position='fixed' overflow='hidden' width='10%'>Job Title</th> 
<th position='fixed' width='5%'>Company Name</th>
<th width='5%'>Closing Date</th>
</tr>";

while($row = mysqli_fetch_array($result) ) 
{
        if (strlen($row['positiontitle']) > 20) $row['positiontitle'] = substr($row['positiontitle'], 0, 60) . "...";
      echo "<tr onclick='get_data(123)' ref='job.details.php?id=".$row['id']."' target='content' class='positiontitle-link'>";
      echo "<td><font style='text-shadow: none;'>" . $row['positiontitle'] . "</font></a></td>";
      echo "<td>" . $row['companyname'] . "</td>";
      echo "<td>" . $row['closingdate'] . "</td>";
      echo "</tr>";
     }

echo "</table>";

mysqli_close($conn);
?>

Question

I want when the positiontitle row in call.php file clicked then the details which are in details.php should load in the same page without reloading the page.

<?php

   $result = mysqli_query($conn,"SELECT * FROM job WHERE id = '".$_GET['id']."' ORDER BY `CreatedTime` DESC");

   $jobdetails = mysqli_fetch_assoc($result);

    echo ''.$jobdetails['positiontitle'].'';?>
    </title>


</br>


<div style="width:100%; margin-top:-20px;">

<!-------------------------------------------Start of Right Sidebar----------------------------------------------------------------> 
    <div style="float:left; font-size: 14px; width:20%;"class="ara-form">
    <header style="padding-top: 25px; font-size: 14px; color:#666666; padding-left:7px; padding-right:7px;">
    <?php
    $result = mysqli_query($conn,"SELECT * FROM job WHERE id = '".$_GET['id']."' ORDER BY `CreatedTime` DESC");

   $jobdetails = mysqli_fetch_assoc($result);

    echo '<strong>Job Title</strong><hr class="style-six"> '.$jobdetails['positiontitle'].'</p></br>';
    echo '<strong>Company Name</strong><hr class="style-six"> '.$jobdetails['companyname'].'</p></br>';
    echo '<strong>Location</strong><hr class="style-six"> '.$jobdetails['location'].'</p></br>';
    echo '<strong>Closing Date</strong><hr class="style-six"> '.$jobdetails['closingdate'].'</p></br>';
    echo '<strong>Number of Vacancy</strong><hr class="style-six"> '.$jobdetails['numberofvacancy'].'</p></br>';
    echo '<strong>Job Category</strong><hr class="style-six"> '.$jobdetails['jobcategory'].'</p></br>';
    echo '<strong>Duration</strong><hr class="style-six">'.$jobdetails['duration'].'</p></br>';
    echo '<strong>Employment Type</strong><hr class="style-six"> '.$jobdetails['employmenttype'].'</p></br>';
    echo '<strong>Salary</strong><hr class="style-six"> '.$jobdetails['salary'].'</p></br>';
    echo '<strong>Timing</strong><hr class="style-six"> '.$jobdetails['timing'].'</p></br>';
    echo '<strong>Nationality</strong><hr class="style-six"> '.$jobdetails['nationality'].'</p></br>';
    echo '<strong>Gender</strong><hr class="style-six">'.$jobdetails['gender'].'</p></br>';
    echo '<strong>Experience</strong><hr class="style-six">'.$jobdetails['experience'].'</p></br>';
    echo '<strong>Education</strong><hr class="style-six"> '.$jobdetails['education'].'</p></br>';
    echo '<strong>Gender</strong><hr class="style-six"> '.$jobdetails['gender'].'</p></br>';
    echo '<strong>Gender</strong><hr class="style-six"> '.$jobdetails['gender'].'</p></br>';
?>
</header>


</div>
<!---------------------------------------------End of Right Sidebar------------------------------------------->    

<div style="float:left; font-size: 14px; width:80%;" class="ara-form">
    <fieldset style="font-size: 14px; color:#666666;">




<!-------------------------------------------------Start Time viewed Button------------------------------------------------>    
    <div style="width:100px; float:right; padding-left:2px; padding-top: 10px;">

    <?php
    include "module/button/job.views.php";
    ?>

    </div>
<!---------------------------------------------------End Time viewed Button------------------------------------------------->     





<!-----------------------------------------------Start Main Content----------------------------------------------->      
    <?php
    echo '<p><strong>Company Background</strong><hr class="style-six"> '.$jobdetails['background'].'</p></br>';
    echo '<p><strong>Job Summary</strong><hr class="style-six"> '.$jobdetails['summary'].'</p></br>';
    echo '<p><strong>Job Duties and Responsibilities</strong><hr class="style-six"> '.$jobdetails['duty'].'</p></br>';
    echo '<p><strong>Qualification</strong><hr class="style-six"> '.$jobdetails['qualification'].'</p></br>';
    echo '<p><strong>Skills</strong><hr class="style-six"></br> '.$jobdetails['skill'].'</p></br>';
    echo '<p><strong>Submission Guideline</strong><hr class="style-six"> '.$jobdetails['submission'].'</p></br>';
    echo '<p><strong>Words to search this job</strong><hr class="style-six"> '.$jobdetails['search'].'</p></br>';
    ?>
<!-------------------------------------------------End Main Content-----------------------------------------------> 


    </fieldset></div>

For more details see this image

enter image description here

score 0 · Accepted Answer · edited May 01 '16 at 18:46

0

Suppose that Details ID is <div id="details">

If you have jQuery it would be easy, change following

echo "<tr onclick='get_data(123)' ref='job.details.php?id=".$row['id']."' target='content' class='positiontitle-link'>";`

to

echo "<tr  ref='job.details.php?id=".$row['id']."' target='content' class='positiontitle-link'>";

<!-- at the end of a html page add -->
<script>
 $('.positiontitle-link').click(
  function(){
   var durl = $(this).attr('ref');
   $('#details').load(durl)
 }
)
</script>

to get jQuery add at the header section

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited May 01 '16 at 18:46

marc_s

732,580
175
1,330
1,459

answered Sep 30 '14 at 12:09

BojanT

801
1
6
12

Thanks, but the url in the address bar is not changing. I mean when i click on a row then the address should also change like `http://www.example.com/call.php/id=147` – arafi Sep 30 '14 at 12:37
No you specifically asked "I want when the positiontitle row in call.php file clicked then the details which are in details.php should load in the **same page without reloading the page**." – BojanT Sep 30 '14 at 12:39
Thanks, but is it possible to do so to have the row id in the address bar. – arafi Oct 01 '14 at 03:31

Use Ajax to call details of the selected id from database in a div in the samepage

1 Answers1