How can I not open a link in jQuery UI - php

Question

I use jquery-ui (v1.12.1).
https://jqueryui.com/tabs/#ajax (TABS LOAD AJAX)
$( function() {
$("#tabs").tabs({
beforeLoad: function (event, ui) {
$('#preloader').show();
if (ui.tab.data("loaded")) {
event.preventDefault();
$('#preloader').hide();
return;
}
ui.ajaxSettings.cache = false,
ui.panel.html('<img src="assets/ajax-loader.gif"> Loading...'),
ui.jqXHR.success(function() {ui.tab.data( "loaded", true ); $('#preloader').hide();
}),
ui.jqXHR.error(function () {ui.panel.html("Couldn't load Data. Plz Reload Page or Try Again Later."); });
}
});
});
I want to not open the tabs "herf" in the form of a link.
<div class="part" id="tabs">
<ul>
<li>Apple</li>
<li>Samsung</li>
<li>Sony</li>
<li>HTC</li>
</ul>
</div>
What's wrong with the code?

Answer 1

I modified this code.
I have extracted the following code from this site:
http://demo.webslesson.info/jquery-ui-tooltip-with-ajax-php/
But I want to write as the tab of Ajax.
index.php
<?php
include('database_connection.php');
$query = "SELECT * FROM tbl_student ORDER BY student_name ASC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
?>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="part" id="tabs">
<ul>
<?php
foreach($result as $row)
{
echo '<li><a id="'.$row["student_id"].'" href="#">'.$row["student_name"].'</a></li>';
}
?>
</ul>
</div>
<script>
$(document).ready(function(){
$("#tabs").tabs({
beforeLoad: function (event, ui) {
$('#preloader').show();
$.post('fetch.php', { id:$(this).attr('id') }, function(data){ result(data); });
if (ui.tab.data("loaded")) {
event.preventDefault();
$('#preloader').hide();
return;
}
ui.ajaxSettings.cache = false,
ui.panel.html('<img src="assets/ajax-loader.gif"> Loading...'),
ui.jqXHR.success(function() {ui.tab.data( "loaded", true ); $('#preloader').hide();}),
ui.jqXHR.error(function () {ui.panel.html("Couldn't load Data. Plz Reload Page or Try Again Later."); });
}
});
});
</script>
fetch.php
<?php
if(isset($_POST["id"]))
{
$query = "SELECT * FROM tbl_student WHERE student_id = '".$_POST["id"]."'";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
{
$output .= '
<img src="images/'.$row["image"].'" class="img-thumbnail" />
<h4>Name - '.$row["student_name"].'</h4>
<h4>Phone No. - '.$row["student_phone"].'</h4>
';
}
echo $output;
}
?>
When I click that tab, That text doesn't show.
Is jQueryUI code loaded incorrectly?