You need to set attribute like data-attrb
(Not necessary with same name) in <a></a>
and use this attribute in <script></script>
. You can pass your value in data-attrb
which will get store in var ID=$(this).attr('data-attrb');
in <script></script>
. Declare one class name for <a></a>
, use this class name to call that load()
function. I've checked this code, It's working.
<a href="#" class="asd" data-attrb='1277'> Two </a>
<a href="#" class="asd" data-attrb='1235'> Three </a>
<div id='myStyle'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".asd").click(function(){
var ID=$(this).attr('data-attrb');
$("#myStyle").load("templatecode.php?id="+ID);
});
});
</script>
templatecode.php (This page name is used in <script></script>
tag too, so if you are changing page name here. Please change page name there too.)
<?php
$ID = $_GET['id'];
$results = $mysqli->query("SELECT * FROM PresidentialCandidate WHERE ID='$ID'");
if( $results->num_rows > 0 )
{
$row = mysqli_fetch_array($results,MYSQLI_ASSOC);
//Instead of just echoing out the ID, you need to build the result/data that you want in the div right here. The success function of the AJAX call will append whatever you echo out here
echo $row['ID'];
}
?>