I have click function on a generated JSON html table with links. These links should show rest JSON objects below table without reload the page. But now if i click on a link it will try to open a page. In this example just open same page. This is installed as plugin. I tested the code in a clean environment out of wordpress headers and it work. How can i prevent click event here? Thank you!
<?php
get_header();
the_post();
?>
<?php
//https://stackoverflow.com/questions/21806992/how-to-cache-an-external-json-request
define( 'HOURS', 60 * 60 );
function get_api_info( ) {
global $apiInfo; // Check if it's in the runtime cache (saves database calls)
if( empty($apiInfo) ) $apiInfo = get_transient('api_info'); // Check database (saves expensive HTTP requests)
if( !empty($apiInfo) ) return $apiInfo;
$response = wp_remote_get('https://jsonplaceholder.typicode.com/users');
$data = wp_remote_retrieve_body($response);
if( empty($data) ) return false;
$apiInfo = json_decode($data); // Load data into runtime cache
set_transient( 'api_info', $apiInfo, 12 * HOURS ); // Store in database for up to 12 hours
return $apiInfo;
}
// Make the WP_Error object global
global $json_error;
// instantiate the class
$json_error = new WP_Error;
$response = file_get_contents('https://jsonplaceholder.typicode.com/users');
$someArray = json_decode($response, true);
echo "<table>
<tr>
<th>id</th>
<th>name</th>
<th>email</th>
</tr>";
foreach($someArray as $row):
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['name'] . "</td>";
echo "<td ><a href=" . $row['id'] . " class='details'>" . $row['email'] . "</a></td>";
echo "</tr>";
endforeach;
echo "</table>";
?>
<script>
$(".details").click(function(event){
event.preventDefault();
var uservarid = $( this ).attr( 'href' );
$.getJSON('https://jsonplaceholder.typicode.com/users/'+uservarid, function(emp) {
$('#userdetails').html('<p> Name: ' + emp.name + '</p>');
$('#userdetails').append('<p>Phone : ' + emp.phone+ '</p>');
$('#userdetails').append('<p> Company: ' + emp.company.name+ '</p>');
$('#userdetails').append('<p> Website: ' + emp.website+ '</p>');
});
});
</script>
<?php
echo "<div id='userdetails'></div>";
?>
<?php
get_footer();
?>