Develop Reference

How to use ajax requests in table pagination and customization

I have a table that displays the records stored in a database. I have customized my pagination differently from what bootstrap uses to look like phpMyAdmin table pagination. What I have done so far works perfectly but refreshes the page on each user selection. I am stuck on how to use ajax to make the pagination work fine without refreshing the page.
Here's the HTML code to display the table with checkbox, select input and pagination links
<!--DISPLAY TABLE-->
<form class="" name="frmDisplay" id="frmDisplay" method="POST" action="">
<div id="display_table"></div>
<input type="checkbox" name="check" id="check" onchange=""></input> <label for="check">Show All</label>
<label class="clabel">|</label>
<label class="clabel" for="rowno">Number of Rows:</label>
<select class="" id="rowno" name="rowno" style="width:50px;height:25px;margin-bottom:3px;">
<option value='all' hidden disabled>All</option>
<?php
//set the value of $rowno
$rowno = isset($_POST['rowno'])?$_POST['rowno']:5;
if($rowno == 5)
{
$rowno = isset($_GET['limit'])?$_GET['limit']:5;
}
?>
<option value='5' <?=$rowno==5?'selected':''?>>5</option>
<option value='10' <?=$rowno==10?'selected':''?>>10</option>
<option value='15' <?=$rowno==15?'selected':''?>>15</option>
<option value='20' <?=$rowno==20?'selected':''?>>20</option>
<option value='25' <?=$rowno==25?'selected':''?>>25</option>
<option value='30' <?=$rowno==30?'selected':''?>>30</option>
</select>
<label class="clabel">|</label>
<label class="clabel" for="filter">Filter Rows:</label>
<input class="" style="width:50%;height:25px;margin-bottom:10px;" id="filter" name="filter" placeholder="Filter this table" onkeyup="filtertbl();"></input>
<div class='table-responsive-sm' style='width:100%;margin-top:10px;'>
<?php
//code to fetch all records from database on checkbox checked
if(isset($_POST['check']))
{
$sql = "SELECT *FROM evatbl WHERE RegNo = ?";
if($stmt = $con->prepare($sql))
{
$stmt->bind_param("s", $pregno);
$pregno = $_SESSION['regno'];
$stmt->execute();
$result = $stmt->get_result();
$num_rows = $result->num_rows;
if($num_rows>0)
{
$count = 1;
echo "<table id='t01'' class='table'>
<tr id='tblhead'>
<th>SN</th>
<th>Course Title</th>
<th>Course Code</th>
<th>Credit Unit</th>
<th>Course Lecturer</th>
<th>Rating(%)</th>
</tr>";
while($row = $result->fetch_assoc())
{
$ccode = $row['CourseCode'];
$ctitle = $row['CourseTitle'];
$cunit = $row['CreditUnit'];
$clec = $row['CourseLecturer'];
$crate = $row['Rating'];
echo "
<tr>
<td>$count</td>
<td>$ctitle</td>
<td>$ccode</td>
<td>$cunit</td>
<td>$clec</td>
<td>$crate</td>
</tr>";
$count++;
}
}
else{
echo "<p style='color:darkblue;margin-bottom:0;'>Oops! No records found.</p>";
}
}
}
else
{
//code for pagination
//get current page
$currentpage = isset($_GET['currentpage']) ? $_GET['currentpage'] : 1;
$no_of_records_per_page = $rowno;
$setoff = ($currentpage - 1) * $no_of_records_per_page;
//get total number of records in database
$sqlcount = "SELECT *FROM evatbl WHERE RegNo = ?";
$stmt = $con->prepare($sqlcount);
$stmt->bind_param("s", $pregno);
$pregno = $_SESSION['regno'];
$stmt->execute();
$result = $stmt->get_result();
$num_rows = $result->num_rows;
$totalpages = ceil($num_rows/$no_of_records_per_page);
//query for pagination
$sqllimit = "SELECT *FROM evatbl WHERE RegNo = ? ORDER BY CourseTitle LIMIT $setoff, $no_of_records_per_page";
if ($stmt = $con->prepare($sqllimit))
{
$stmt = $con->prepare($sqllimit);
$stmt->bind_param("s", $pregno);
$pregno = $_SESSION['regno'];
$stmt->execute();
$result = $stmt->get_result();
$num_rows = $result->num_rows;
if ($num_rows>0)
{
$count = 1;
echo "<table id='t01' class='table' width='100%'>
<tr id='tblhead'>
<th>SN</th>
<th>Course Title</th>
<th>Course Code</th>
<th>Credit Unit</th>
<th>Course Lecturer</th>
<th>Rating(%)</th>
</tr>";
while($row = $result->fetch_assoc())
{
$ccode = $row['CourseCode'];
$ctitle = $row['CourseTitle'];
$cunit = $row['CreditUnit'];
$clec = $row['CourseLecturer'];
$crate = $row['Rating'];
echo "
<tr>
<td>$count</td>
<td>$ctitle</td>
<td>$ccode</td>
<td>$cunit</td>
<td>$clec</td>
<td>$crate</td>
</tr>";
$count++;
}
}
else{
echo "<p style='color:darkblue;margin-bottom:0;'>Oops! No records found.</p>";
}
echo "</table>";
?><br>
<div class="nav_div">
<?php
//First Page Button
if($currentpage > 1)
{
echo "<a class='nav_a' href='view_eva.php?limit=".$rowno."&currentpage=".(1)."' title='First'><<</a>";
}
//Previous Page Button
if($currentpage >= 2)
{
echo "<a class='nav_a' href='view_eva.php?limit=".$rowno."&currentpage=".($currentpage - 1)."' title='Previous'><</a>";
}
?>
<select class='navno' name='navno' id='navno' onchange="pageNav(this)">
<?php
//Link to available number of pages with select drop-down
for($i = 1; $i <= $totalpages; $i++)
{
echo "<option class='bold'";
if ($currentpage==$i)
{
echo "selected";
}
echo " value='view_eva.php?limit=".$rowno."&currentpage=".$i."'>".$i."</option>";
}
?>
</select>
<?php
//Next Page Button
if($currentpage < $totalpages)
{
echo "<a class='nav_a' href='view_eva.php?limit=".$rowno."&currentpage=".($currentpage + 1)."' title='Next'>></a>";
}
//Last Page Button
if($currentpage <= $totalpages - 1)
{
echo "<a class='nav_a' href='view_eva.php?limit=".$rowno."&currentpage=".($currentpage = $totalpages)."' title='Last'>>></a>";
}
?>
</div>
<?php
}
}
?>
</form>
</div>
</div>
Here's the javascript that controls form submission on each user selection. I know this is where I'll need to use ajax requests but I can't figure out how. I've been on this for some days now.
<script type="text/javascript">
<?php
/*Using PHP to create a javascript variable that can be used to
add the `selected` attribute to the respective option*/
printf("let rownum='%s'", empty($_POST['rowno']) ? 0 : $_POST['rowno']);
?>
let myForm=document.forms.frmDisplay;
let mySelect=myForm.rowno;
let myCheck=myForm.check;
let myNavSelect=myForm.nav_no;
// find all options and if the POSTed value matches - add the selected attribute
// establish initial display conditions following page load / form submission
if(rownum)
{
if(rownum=='all') myCheck.checked=true;
Array.from(mySelect.querySelectorAll('option')).some(option=>
{
if(rownum==Number(option.value) || rownum=='all')
{
option.selected=true;
return true;
}
});
}
// listen for changes on the checkbox
myCheck.addEventListener('click',function(e)
{
if(myCheck.checked)
{
var msg = confirm('Do you really want to see all of the \nrows? For a big table this could crash \nthe browser.');
if(!msg)
{
myCheck.checked=false;
return false;
}
}
if(mySelect.firstElementChild.value=='all')
{
mySelect.firstElementChild.selected=this.checked;
mySelect.firstElementChild.disabled=!this.checked;
}
myForm.submit();
});
// listen for changes on the select
mySelect.addEventListener('change',function(e)
{
if(myCheck.checked) myCheck.checked=false;
myForm.submit();
});
//load url on the navigate select
function pageNav(option)
{
location.href = option.value;
}
</script>
Please, I need all the help I can get to complete this project. Thank you.

display database data as list in codeigniter through ajax

I am new in codeigniter, i have been trying to display data from database as ul list in form of buttons. It was easily done using php but i want to display the same using ajax to reduce the loading time. i tried some methods but cannot able to display the data. I really need help on this, help will be appreciated. Thanks in advance.
Controller:
function user()
{
$this->data['list'] = $this->mobiles_model->get_status();
$this->_render_page('user', $this->data);
}
model:
function get_status()
{
$sql = "select * from(SELECT * FROM my_user_view ) as t group by imei ORDER BY dattim ASC ";
$query = $this->db->query($sql, array($uid,$value));
$result = $query->result();
return $result;
}
view:
<ul class="sidebar-menu" id="nav-accordion">
<?php
for ($i = 0; $i < count($deptlist); ++$i)
{
$time = $deptlist[$i]->dattim;
$sdate=date("d-m-Y H:i:s",strtotime($deptlist[$i]->dattim));
$dateFromDatabase = strtotime($time);
$dateFiveMinuteAgo = strtotime("-5 minutes");
if ($dateFromDatabase >= $dateFiveMinuteAgo)
{
?>
<li>
<button value="<?php echo $deptlist[$i]->imei ?>" class="btn-success"><?php echo $deptlist[$i]->user;?>
</button>
</li>
<?php }
else
{
?>
<li>
<button value="<?php echo $deptlist[$i]->imei ?>"class="btn-danger"><?php echo $deptlist[$i]->user; ?>
</button>
</li>
<?php }
}?>
</ul>
The data displayed using php but i want to display the same using ajax.
thanks again.

working example
to output the view part
public function index(){
if($this->session->userdata('is_logged_in')){
$this->load->view('../template/header');
$this->load->view('manufacturer');
$this->load->view('../template/footer');
} else {
redirect('main/restricted');
}
}
my controller name is manufacturer / method is manufacturer_list
public function manufacturer_list()
{
$result = array('data' => array());
$data = $this->manufacturer_model->fetchManufacturerData();
foreach ($data as $key => $value) {
//i assigned $buttons variable to hold my edit and delete btn to pass in my array.
$buttons = '
<button class="btn btn-primary" onclick="editData('.$value->id.')" data-toggle="modal" data-target="#myModal">Edit</button>
<button class="btn btn-danger" onclick="deleteData('.$value->id.')" data-toggle="modal" data-target="#deleteModal">Delete</button>
';
$result['data'][$key] = array(
$value->id,
$value->brand,
$buttons
);
}
echo json_encode($result);
}
my ajax
showRecords();
function showRecords(){
$.ajax({
url: 'manufacturer/manufacturer_list', //controller/method
type: 'POST',
dataType: 'json',
success: function(data){
var html = '';
for(i=0; i<data.length; i++){
html += '<tr align="center">'+
'<td>'+data[i].id+'</td>'+
'<td>'+data[i].brand+'</td>'+
'<td>'+'<button class="btn btn-primary edit-data" data="'+data[i].id+'">Edit</button>'+' '+
'<button class="btn btn-danger delete-data" data="'+data[i].id+'">Delete</button>'+'</td>'+
'</tr>';
}
$("#showdata").html(html); //pass the data to your tbody
},
error: function(){
alert('Could not load the data');
}
});
}
html view part is like this (manufacturer.php from index method in controller)
<table>
<thead>
<tr>
<th>ID</th>
<th>Manufacturer</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="showdata">
</tbody>
</table>
hope you get the idea

dynamic ajax dropdown menu not working

i'm trying to make a notification tab work but do not seem to get it right. The dropdown is working fine but the ajax call to newfriends.php is not working right, when viewed with firebug there are no results to be seen in the dropdown.Quite confusing.
(note the dropdown menu is located in header and can only be displayed if the session is initialised)
here is the ajax used in jquery:
function load_notifications(view=''){
$.ajax({
url: "notification/new_friends.php",
method: "POST",
data:{view:"view"},
dataType:"json",
success: function(data){
$(".dropdown-menu").html(data.notification);
if(data.unseen_notification>0){
$(".badge1").html(data.unseen_notification);
}
}
});
//$(".dynamic-notification").load("notification/pm_n.php");
// $(".dynamic-notification-f").load("notification/new_friends.php");
};
load_notifications();
$(document).on("click",".count_friend", function(){
load_notifications('yes');
});
//loads every 2 seconds for chat
setInterval(function(){load_notifications();},2000);
here is the new_friends.php content:
<?php
include '../includes/dbconfig.inc.php';
if (isset($_POST['view'])) {
if($_POST['view'] !=''){
$update="update friends set count='1' where friend_one=:session and count='0'";
$stmt=$conn->prepare($update);
$stmt->bindValue(":session", $_SESSION['uname']);
$stmt->execute();
}
$sql123="select id from friends where friend_two=:sess_uname and count='0'";
$stmt123=$conn->prepare($sql123);
$stmt123->bindValue(":sess_uname", $_SESSION['uname']);
$stmt123->execute();
$request_count=$stmt123->fetchColumn();
//$count_friend=$stmt123->rowCount();
/*$sql_f_count="select *from user where user_id=:session_id and activated='1' limit 1";
$stmt_f_count=$conn->prepare($sql_f_count);
$stmt_f_count->bindValue(":session_id", $_SESSION['id']);
$stmt_f_count->execute();
$user_details=$stmt_f_count->fetchAll();
$friend_badge=$user_details[0]['friend_count_badge'];*/
require "notification/friend_request_notification.php";
// $new_friends="<span class='dropdown'><a href='#' data-placement='bottom' class='btn dropdown-toggle' data-toggle='dropdown' title='Friend Requests' data-html='true'><span class='count_friend' style=' height:33px; width:30px;'><span class='badge1 label label-pill'>".$count."</span><img src='img/logo/group-button-white.png' style='height:25px; width:27px;' alt='new_friends_alert'></span></a><ul class='dropdown-menu'></ul></span>";
//if($request_count[0]>0){
//$new_friends="<a href='#' data-placement='bottom' class='btn' data-trigger='focus' title='Friend Requests' data-toggle='popover' data-html='true' data-content='".$friend_requests."'><span class='count_friend' style=' height:33px; width:30px;'><img src='img/logo/group-button-white.png' style='height:25px; width:27px;' alt='new_friends_alert'></span><span class='badge'>".$friend_badge."</span></a>";
/*}else{
$new_friends="<a href='all_notifications.php'><img src='img/logo/group-button-black.png' style='height:25px; width:27px;' alt='new_friends_alert'></a>";
}*/
//echo $new_friends;
//}
$data=array(
'notification'=>$friend_requests,
'unseen_notification' =>$request_count[0][0]
);
}
echo json_encode($data);
and the code for friend requests output:
<?php
//error_reporting(0);
require_once 'includes/dbconfig.inc.php';
$sql = "select * from friends where friend_two=:session and accepted='0' order by friends_date_made asc";
$stmt = $conn->prepare($sql);
$stmt->bindparam(":session", $_SESSION['uname']);
$stmt->execute();
$numrows = $stmt->fetchAll(PDO::FETCH_ASSOC);
$friend_requests="";
if ($numrows < 1) {
$friend_requests = "You do not have any friend requests";
echo "$friend_requests";
exit();
} else {
foreach ($numrows as $i=>$row1 ) {
$reqid = $row1['friend_id'];
$user1 = $row1['friend_one'];
$datemade = $row1['friends_date_made'];
$datemade1 = strftime("%B %d, %y", strtotime($datemade));
$sql = "SELECT * FROM user WHERE uname=:user1 LIMIT 1";
$stmt = $conn->prepare($sql);
$stmt->bindparam(":user1", $user1);
$stmt->execute();
$thumbrow = $stmt->fetchAll(PDO::FETCH_ASSOC);
$user1avatar = $thumbrow[$i]['avatar'];
$user1id=$thumbrow[$i]['user_id'];
if ($user1avatar =="") {
$user1pic = '<img src="img/avatardefault.png" height="50" style="float:left;" width="50" alt="'.$user1.'" class="user_pic">';
} else {
$user1pic = '<img src="../user/user/'.$user1id.'/'.$user1avatar.'" height="50" style="float:left;" width="50" alt="'.$user1.'" class="user_pic">';
}
$friend_requests .= '<li><div id="'.$reqid.'" float="right" class="friendrequests">
'. $user1pic .'
<div class="user_info '.$reqid.'" id="'.$reqid.'"><small>' . $datemade1 . '</small>
'.$user1.' is requesting your friendship<br /><br />
<button id="'.$reqid.'" name="'.$_SESSION['uname'].'" sess="'.$_SESSION['id'].'" class="accept_btn btn btn-warning">Accept</button><span class="show-spinner"></span> or
<button id="'.$reqid.'" name="'.$_SESSION['uname'].'" sess="'.$_SESSION['id'].'" class="reject_btn btn btn-warning">Reject</button>
</div>
</div><hr></li>';
}
}

You currently have data:{view:"view"}.
Which means that you are passing string 'view' in the body of your request.
Change it to something like:
function load_notifications(thisview=''){
var theData = {
view: thisview
}
$.ajax({
url: "notification/new_friends.php",
method: "POST",
data: theData,
dataType:"json",
success: function(data){

Like system with Codeigniter and AJAX

I have a problem with my like system an user can give more than 1 like but the system register on the db just one, i think is a problem related to AJAX.
This is the button:
<a class="btn btn-xs btn-white" name="btn" onclick="usercountcomments(<?php echo $value['user_id'].",".$value['personal_closest_id'].",".$value['id']; ?>)"><i class="fa fa-star"></i><span id="countVal1_<?php echo $value['id']; ?>"><?php echo $value['countcomments']; ?></span> Cool </a>
And this one is the jscript AJAX script:
function usercountcomments(user_id,postId,id){
var a = $("#countVal1_"+id).text();
var display = document.getElementById("countVal1_"+id);
var count = a;
var user_comments="cool";
$.ajax({
type: "POST",
url: "<?php echo base_url() ?>social/commentcool/" +user_id+"/"+postId+"/"+user_comments,
data:{ user_comments : user_comments},
success: function(data) {
count++;
display.innerHTML = count;
// alert(a++);
}
});
}
What can I do to prevent the user giving more than one like ?

you can use cookie
<?php
$id =$_GET['id'];
if(isset($_COOKIE['like'.$id])) {
echo "error";
exit;
}else {
$sql = "UPDATE post SET likecount=likecount+1 WHERE id=$id";
$conn->query($sql);
$sql = "SELECT likecount from post where id=$id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
echo $row['likecount'];
setcookie('like'.$id,true, time() + (86400 * 30), "/");
}
}

How do I post a radio button and menu selection with ajax and json

I've found several articles on this but nothing that fits my circumstance. I have these radio buttons and drop down menu from which I need to post a selection using ajax in json dataType. Simply put, what do I put in the "WHAT GOES HERE" spot?
Thanks in advance!
<script>
$(function() {
$('#driver').click(function(){
$.ajax({
url:'_resources/_helpers/grader-test.php',
type: "POST",
data:{ /*WHAT GOES HERE?????*/ },//<---WHAT GOES HERE??
dataType: "json",
success: function(result){
$('#jsonstuff').html(result);
console.log(result[0].AVG);
$('#grade').html(result[0].AVG);
}
});
});
});
</script>
<td>
Select:
<select id="extension">
<option value="empty"></option>
<? foreach ($sql as $row){
echo '<option value = "' . $row['extension'] . '">' . $row["tech_fname"] . ' ' . $row["tech_lname"] . ' - ' . $row['extension'] . '</option>';
?>
</select>
</td>
<td>
As Reviewer<input type="radio" class="as_type" name="as_type" value="reviewer"/><br />
As Reviewed<input type="radio" class="as_type" name="as_type" value="reviewed"/>
<input type="button" id="driver" value="Submit" />
</td>
<td id="grade"></td>
And here is grader-test.php:
$ext = $_POST['extension'];// 2752;//
$type = $_POST['as_type'];// "reviewer";//
switch($type){
case "reviewer":
$dbh = new PDO('mysql:host=;dbname=', '', '');
$sql = "SELECT AVG(grade_average) AS AVG from call_reviews WHERE reviewer_ext = :ext";
$stmt = $dbh->prepare($sql);
$stmt->bindParam(':ext',$ext);
$stmt->execute();
$average = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($average);
break;
case "reviewed":
$dbh = new PDO('mysql:host=;dbname=', '', '');
$sql = "SELECT AVG(grade_average) AS AVG from call_reviews WHERE reviewed_ext = :ext";
$stmt = $dbh->prepare($sql);
$stmt->bindParam(':ext',$ext);
$stmt->execute();
$average = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($average);
break;
default:
echo "select something";
}