How to show selected table row id in the address bar with ajax

I have this below script that load the selected table row details in a div in the same page with ajax.

 $('.positiontitle-link').click(
  function(){
   var durl = $(this).attr('ref');
   $('#details').load(durl)   
 }
)

This is my Table where it have two column. First column used to list the jobs from MySQL database and the second used to view the selected row full details.

<table class="table1" width="100%" cellpadding="0" cellspacing="0" style="height: 100%; z-index:1; top:0; position: absolute;">

  <tr>
    <td width="30%" style=" min-width:40px;padding:0; background-color:rgba(255, 255, 255, 0.9); height: 100%; bottom: 0; top:0;" valign="top">
    <div style="margin: 0; padding: 0; overflow-x:hidden; height: 100%; position: inherit; bottom: 0; top:0;">
    <?php
    require "module/call.php";
    ?>
</div>

</td>
<td width="60%" style="min-width:40px;padding:0; background-color:rgba(255, 255, 255, 0.9); height: 100%; bottom: 0; top:0;" valign="top"><div id="details" style="overflow:auto; width:100%; border-left-width: thin; border-right-width: 0; border-top-width: thin; border-bottom-width: 0; height: 100%; bottom: 0; top:0;"></div></td>


    <td width="20%" style="padding:0;">&nbsp;</td>
  </tr>
</table>

This is the imageof the table

This is the call.php codes

<?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 data-id='<?php echo $row['id']?>'><font style='text-shadow: none;'>" . $row['positiontitle'] . "</font></a></td>";
      echo "<td data-id='<?php echo $row['id']?>'>" . $row['companyname'] . "</td>";
      echo "<td data-id='<?php echo $row['id']?>'>" . $row['closingdate'] . "</td>";
      echo "</tr>";
     }

echo "</table>";

mysqli_close($conn);
?>

and this is the details.php codes

<?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>

My Question is

1- I want to show the selected row id in the address bar

2- I want to show unclicked.php in the details div when no row selected

Answers


  1. If you want to change the content of the address bar without refreshing the page, you'll either need to use the HTML5 History API or a hashbang URL.

    • HTML5 History API: This will allow you to change the content of the address bar to whatever you like, but the browser support is limited. An example is as follows: history.pushState(null, "", "/test"); This will change the page URL to yoursite.com/test. You can use this to add a row-related extension to the URL, eg. yoursite.com/table/row/20. See here for a more in-depth explanation of how the API works.

    • Hashbang URL: This is a less clean solution, but is somewhat simpler and will work on all browsers. Your URL will look like yoursite.com/table#row20. (If you already have a # in the page URL, this will not work). Just call window.location = "#row20" to add #row20 to the current page URL.

If you are going to change the URL when a new row is selected, then you should also check the URL on page load and preselect a row if required. Eg. requesting yoursite.com/table#row20 would return the page with row 20 already selected.

  1. $('#details').load('path/to/unclicked.php') will load the file's contents into the div. If you want this to occur on page load, just wrap it in a call to $(document).ready(). Simply make the AJAX request again if the user is able to deselect all rows.

Need Your Help

Preselect Value of Treeview inside combobox

c# wpf combobox treeview

I am looking to implement a treeview inside a combobox. Basically I want it to show as a combobox when collapsed but a treeview inside combo box when expanded. When a user clicks on a node, I want ...

ASP.net control similar to auto-hide feature of Visual Studio toolbox

asp.net

First off, I'm sorry if the title doesn't explain this very well.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.