Ajax load: adding whole page again in the element - javascript

I have a listing page. by default I'm showing 10 rows of results. if the rows are greater than 10 I'm showing a load more. when the user clicks on the load more I want to show 10 more results. but when I click on the load more button it add the whole page again the table inside of rows. any suggestions?
Listing Page:
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
var job_count = 10;
$('#loadMoreJobs').click(function() {
job_count += 10;
$('#latestJobs').load('load_jobs.php', {
job_count: job_count
});
});
});
</script>
<tbody id="latestJobs">
<?php
$jobs = find_jobs_by_status('active', 10);
if (mysqli_num_rows($jobs) < 1) {
echo '<tr class="job-listing-body">';
echo '<td colspan="6">No jobs found.</td>';
echo '</tr>';
} else {
while ($job = mysqli_fetch_assoc($jobs)) {
echo '<tr class="job-listing-body">';
echo '<td>' . $job['updated_at'] . '</td>';
echo '<td>' . $job['title'] . '</td>';
echo '<td>0/' . $job['required_freelancers'] . '</td>';
echo '<td>' . $job['delivery_time'] . ' days</td>';
echo '<td>' . $job['budget'] . '</td>';
echo '<td>Apply</td>';
echo '</tr>';
}
}
?>
</tbody>
<button class="btn btn-secondary w-md waves-effect waves-light" id="loadMoreJobs">Load More</button>
Load More Rows Page:
<?php
require_once('includes/initialize.php');
if (isset($_POST['job_count'])) {
$job_count = $_POST['job_count'];
$result = find_jobs_by_status('active', $job_count);
if (mysqli_num_rows($result) < 1) {
echo '<tr class="job-listing-body">';
echo '<td colspan="6">No jobs found.</td>';
echo '</tr>';
} else {
while ($job = mysqli_fetch_assoc($result)) {
echo '<tr class="job-listing-body">';
echo '<td>' . $job['updated_at'] . '</td>';
echo '<td>' . $job['title'] . '</td>';
echo '<td>0/' . $job['required_freelancers'] . '</td>';
echo '<td>' . $job['delivery_time'] . ' days</td>';
echo '<td>' . $job['budget'] . '</td>';
echo '<td>Apply</td>';
echo '</tr>';
}
mysqli_free_result($result);
}
} else {
redirect_to('jobs');
}
?>

If you do this in Listing Page then it would be better
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var job_count = 10;
$('#loadMoreJobs').click(function() {
job_count += 10;
$.ajax({
type: 'post',
url: 'load_jobs.php',
data: {
job_count:job_count
},
success: function (response) {
var content = document.getElementById("job_display");
content.innerHTML = response;
}
});
});
});
</script>
<tbody id="latestJobs">
<?php
$jobs = find_jobs_by_status('active', 10);
if (mysqli_num_rows($jobs) < 1) {
echo '<tr class="job-listing-body">';
echo '<td colspan="6">No jobs found.</td>';
echo '</tr>';
} else {
while ($job = mysqli_fetch_assoc($jobs)) {
echo '<tr class="job-listing-body">';
echo '<td>' . $job['updated_at'] . '</td>';
echo '<td>' . $job['title'] . '</td>';
echo '<td>0/' . $job['required_freelancers'] . '</td>';
echo '<td>' . $job['delivery_time'] . ' days</td>';
echo '<td>' . $job['budget'] . '</td>';
echo '<td>Apply</td>';
echo '</tr>';
}
}
?>
</tbody>
<div id="job_display"></div>
<button class="btn btn-secondary w-md waves-effect waves-light" id="loadMoreJobs">Load More</button>

Related

Message box and query is executed but changes do not reflect in the database

Whenever I press the enable or disable button, the messagebox is generated meaning the query has executed but changes are not reflected in the database and the query when executed seperately in phpmyadmin reflects the result into the database. I even tried outputing the mysqli_error() function but that is also not giving back any errors.
<!doctype html>
<html>
<?php include'abcadmin.css' ?>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center><h1></h1></center>
<form action="" method="POST">
<center><h4><b>Student Edit & Account Management</b></h4></center> <br>
<center><h4>SAP ID: <input type="text" name="search"><br /></h4> </center>
<center><input type="submit" value="Search" name="submit" /> </center><br>
</form>
<br>
<?php
session_start();
global $a,$search,$b;
$con=mysqli_connect('localhost','root','') or die(mysql_error());
mysqli_select_db($con,'sophomore') or die("cannot select DB");
if(isset($_POST["submit"]))
{
$search=$_POST['search'];
$query=mysqli_query($con,"SELECT * FROM student_registration WHERE sap_id='".$search."'");
$numrows=mysqli_num_rows($query);
if($numrows>0)
{
if(!empty($_POST['search']))
{
if($numrows!=0)
while($row=mysqli_fetch_assoc($query))
{
{
$stuname=$row['fname'];
$stusurname=$row['lname'];
$stusapid=$row['sap_id'];
$studob=$row['dob'];
$stuage=$row['age'];
$stucourse=$row['course'];
$stusemester=$row['semester'];
$stustatus=$row['status'];
$_SESSION['adminstusapid']=$stusapid;
}
}
}
echo '<h4><table align="center" width="">';
echo '<tr>';
echo '<td>';
echo "Name: ";
echo '&nbsp';
echo '</td>';
echo '<td>';
echo $stuname;
echo '</td>';
echo '</tr>';
echo '<h4><table align="center" width="">';
echo '<tr>';
echo '<td>';
echo "Surname: ";
echo '&nbsp';
echo '</td>';
echo '<td>';
echo $stusurname;
echo '</td>';
echo '</tr>';
echo '<h4><table align="center" width="">';
echo '<tr>';
echo '<td>';
echo "SAP ID: ";
echo '&nbsp';
echo '</td>';
echo '<td>';
echo $stusapid;
echo '</td>';
echo '</tr>';
echo '<h4><table align="center" width="">';
echo '<tr>';
echo '<td>';
echo "DOB: ";
echo '&nbsp';
echo '</td>';
echo '<td>';
echo $studob;
echo '</td>';
echo '</tr>';
echo '<h4><table align="center" width="">';
echo '<tr>';
echo '<td>';
echo "Age: ";
echo '&nbsp';
echo '</td>';
echo '<td>';
echo $stuage;
echo '</td>';
echo '</tr>';
echo '<h4><table align="center" width="">';
echo '<tr>';
echo '<td>';
echo "Course: ";
echo '&nbsp';
echo '</td>';
echo '<td>';
echo $stucourse;
echo '</td>';
echo '</tr>';
echo '<h4><table align="center" width="">';
echo '<tr>';
echo '<td>';
echo "Semester: ";
echo '&nbsp';
echo '</td>';
echo '<td>';
echo $stusemester;
echo '</td>';
echo '</tr>';
echo '</table>';
echo '</h4>';
echo '<br>';
echo '<form method="post">';
echo '<center>';
echo '<input type="submit" value="Enable" name="enabled">';
echo '&nbsp';
echo '&nbsp';
echo '<input type="submit" value="Disable" name="disabled">';
echo '</center>';
echo '</form>';
}
else
{
echo "<script type='text/javascript'>alert('No results found!!')</script>";
}
}
$a=0;
$b=1;
if(isset($_POST["enabled"])){
$sqla="UPDATE student_registration SET status='$stucourse' WHERE sap_id='".$search."'";
if(mysqli_query($con, $sqla)){
echo "<script type='text/javascript'>alert('The account has been enabled!!')</script>";
}
else
{
}
}
else
{
}
if(isset($_POST["disabled"])){
$sqlb="UPDATE student_registration SET status='$b' WHERE sap_id='".$search."'";
if(mysqli_query($con, $sqlb)){
echo "<script type='text/javascript'>alert('The account has been disabled!!')</script>";
}
else
{
}
}
else
{
}

Dropdown clicked only selected rows

I have crated table with weather data using php and openweathermap. I would like to show only first row from each day. After clicking on selected row only content belonging within selected date is dropping down.
At this moment I have managed to create table with visible only first rows from each day and dropdown all hidden content at one moment.
How can I dropdown content belonging to chosen row section (date)?
My code to download data and create table:
<?php
date_default_timezone_set('Europe/Warsaw');
use Cmfcmf\OpenWeatherMap;
require __DIR__ . '/vendor/autoload.php';
$lang = 'pl';
$units = 'metric';
$owm = new OpenWeatherMap("MY_KEY");
$forecast = $owm->getWeatherForecast('Warszawa', $units, $lang, '', 3);
?>
<table class="pogoda">
<tr>
<th><?php echo "Data:"; ?></th>
<th><?php echo "Godzina:"; ?></th>
<th><?php echo "Temperatura: "; ?></th>
<th><?php echo "Ciśnienie: "; ?></th>
<th><?php echo "Wilgotność: "; ?></th>
<th><?php echo "Prędkość wiatru: "; ?></th>
<th><?php echo "Kierunek wiatru: "; ?></th>
<th><?php echo "Zachmurzenie: "; ?></th>
</tr>
<?php
$i = 0;
$j = NULL;
foreach ($forecast as $weather) {
if($j == $weather->time->day->format('d.m.Y')){
$i = 1;
}
if($i == 0){
echo '<tr class="dropdown">';
echo '<td>' . $weather->time->day->format('d.m.Y') . '</td>';
echo '<td>' . $weather->time->from->format('H:i') . " - " . $weather->time->to->format('H:i') . '</td>';
echo '<td>' . $weather->temperature . '</td>';
echo '<td>' . $weather->pressure . '</td>';
echo '<td>' . $weather->humidity . '</td>';
echo '<td>' . $weather->wind->speed . '</td>';
echo '<td>' . $weather->wind->direction . '</td>';
echo '<td>' . $weather->clouds . '</td>';
echo '</tr>';
$i = 0;
}
else{
echo '<tr class="dropdown-content">';
echo '<td>' . $weather->time->day->format('d.m.Y') . '</td>';
echo '<td>' . $weather->time->from->format('H:i') . " - " . $weather->time->to->format('H:i') . '</td>';
echo '<td>' . $weather->temperature . '</td>';
echo '<td>' . $weather->pressure . '</td>';
echo '<td>' . $weather->humidity . '</td>';
echo '<td>' . $weather->wind->speed . '</td>';
echo '<td>' . $weather->wind->direction . '</td>';
echo '<td>' . $weather->clouds . '</td>';
echo '</tr>';
$i = 0;
}
$j = $weather->time->day->format('d.m.Y');
}
?>
css:
tr.dropdown-content{
display: none;
}
js:
$(document).ready(function(){
$("tr.dropdown").click(function(){
$("tr.dropdown-content").slideToggle('fast');
});
});
I have simply changed the js code to:
$(document).ready(function(){
$("tr.dropdown").click(function(){
$(this).nextUntil('tr.dropdown').slideToggle('normal');
});
});
It solved the problem.

How to add column to a table using javascript and take the column name from a textbox?

I wrote this code to add column to a table using javascript and take the column name from a html textbox. But this is not working.
JavaScript :-
<script type="text/javascript">
$(document).ready(function () {
$('#btnAdd').click(function () {
var count = 3,
first_row = $('#Row2');
while (count-- > 0) first_row.clone().appendTo('#blacklistgrid');
});`enter code here`
var myform = $('#myform'),
iter = 4;
$('#btnAddCol').click(function () {
var col_name = document.getElementID("txt_col_name").value;
myform.find('tr').each(function(){
var trow = $(this);
if(trow.index() === 0){
trow.append('<td>'+colname+'</td>');
}else{
trow.append('<td><input type="text" name="al'+iter+'"/></td>');
}
});
iter += 1;
});
});
</script>
HTML :-
<form name="myform" id="myform">
<table id="blacklistgrid">
<tr id="heading">
<td>Employee ID</td>
<td>Employee Name</td>
<td>Basic Salary</td>
<td>Mobile Allowances</td>
<td>Travel Allowences</td>
<td>Internet Allowences</td>
<td>Sales Commission</td>
<td>Bonus</td>
<td>Net Salary</td>
</tr>
<?php
$sql1="SELECT user_id, user_fname, user_lname
FROM ".$prefix."users_info
WHERE user_st='1'";
$employee_info = $wpdb->get_results($sql1);
//var_dump($employee_info);
foreach ($employee_info as $employee_info_row)
{
$user_id = $employee_info_row->user_id;
$user_fname = $employee_info_row->user_fname;
$user_lname = $employee_info_row->user_lname;
echo "<tr id=\"row\">";
echo "<td>";
echo "$user_id";
echo "</td>";
echo "<td>";
echo "$user_fname $user_lname";
echo "</td>";
echo "<td>";
echo "<input type=\"text\" name=\"bs\" />";
echo "</td>";
echo "<td>";
echo "<input type=\"text\" name=\"a1\" />";
echo "</td>";
echo "<td>";
echo "<input type=\"text\" name=\"a2\" />";
echo "</td>";
echo "<td>";
echo "<input type=\"text\" name=\"a3\" />";
echo "</td>";
echo "<td>";
echo "<input type=\"text\" name=\"sc\" />";
echo "</td>";
echo "<td>";
echo "<input type=\"text\" name=\"bns\" />";
echo "</td>";
echo "<td>";
echo "";
echo "</td>";
echo "</tr>";
}
?>
</table>
<input type="text" id="txt_col_name" name="add_col" />
<button type="button" id="btnAddCol">Add new column</button>
</br>
</br>
<input type="submit"></input>
</form>
I also want to add the new column between 'Internet Allowences' and 'Sales Commission'. Can anyone pls tell me how to do that. Thank You
Hope this help
jsfiddle.net/stormspirit/2zh64/1/

Add Variable from PHP foreach to bootstrap modal

I have a button within a php foreach statement which loads a modal. How can i pass the particular id ($animalid) to the modal? I have it kind of working but the modal will load the same id in each modal popup. See my php foreach code below and also part of the modal.
$pdo2 = Database::connect();
$sql2 = 'SELECT * FROM animals WHERE riderid = '.$data[id].' AND hp != "Choose One"';
foreach ($pdo2->query($sql2) as $row) {
echo '<tr>';
echo '<td>'. $row['hp'] . '</td>';
echo '<td>'. $row['hpname'] . '</td>';
echo '<td>'. $row['hpage'] . '</td>';
echo '<td>'. $row['hpcolour'] . '</td>';
echo '<td>'. $row['hpmicro'] . '</td>';
echo '<td>';
echo '<button class="btn btn-default btn-xs" id="float-right" data-toggle="modal" data-target=".bs-example-modal-lg-2"><span class="glyphicon glyphicon-pencil"></span> Update</button>';
echo ' ';
echo '<a class="btn btn-default btn-xs" href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a>';
echo '</td>';
echo '</tr>';
$animalid = $row['id'];
}
Database::disconnect();
?>
Modal Code
<div class="modal-body">
<form name="editanimal" id="editanimal" class="form-horizontal" action="updateanimal.php" method="post">
<span class="form-break">
<?php
// Get Animal id
//$animalid = $data['id'];
echo $animalid;
?>
$animalid is in the loop. If you want to use that value, you can store the data to other array and use it. Hope you get some inspiration.
PHP:
<?php
$pdo2 = Database::connect();
$sql2 = 'SELECT * FROM animals WHERE riderid = '.$data[id].' AND hp != "Choose One"';
$list = array();
foreach ($pdo2->query($sql2) as $row) {
$item = array();
$content = '<tr>';
$content .= '<td>'. $row['hp'] . '</td>';
$content .= '<td>'. $row['hpname'] . '</td>';
$content .= '<td>'. $row['hpage'] . '</td>';
$content .= '<td>'. $row['hpcolour'] . '</td>';
$content .= '<td>'. $row['hpmicro'] . '</td>';
$content .= '<td>';
$content .= '<button class="btn btn-default btn-xs" id="float-right" data-toggle="modal" data-target=".bs-example-modal-lg-2"><span class="glyphicon glyphicon-pencil"></span> Update</button>';
$content .= ' ';
$content .= '<a class="btn btn-default btn-xs" href="#"><span class="glyphicon glyphicon-trash"></span> Delete</a>';
$content .= '</td>';
$content .= '</tr>';
$item['id'] = $row['id'];
$item['content'] = $content;
$list[] = $item;
}
Database::disconnect();
?>
HTML:
<div class="modal-body">
<form name="editanimal" id="editanimal" class="form-horizontal" action="updateanimal.php" method="post">
<span class="form-break"></span>
<?php foreach($list as $item){ ?>
<?php echo $item['id'];?>
<?php } ?>
or..
<table>
<?php foreach($list as $item){ ?>
<?php echo $item['content'];?>
<?php } ?>
</table>
<!-- ... -->
</form>
</div>
$animalid is being over written each time you iterate through the foreach loop. You would have to build an array to hold all of the animalids, and pass that to your modal or print out the id as you are iterating through the loop.

Toggle the display of a table echod from php in Jquery

I have a table created in php that contains rows of customer information, with an additional row containing notes about each customer.
I would like a button above the table that when clicked will show or hide the notes row of each customer. So far my code doesn't seem to produce anything, I create the table here:
echo "<table id='listTable' border='1' cellpadding='10' class='listTable'>";
echo "<tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Company Name</th> <th>Telephone</th> <th>Alt/ Telephone</th> <th>Address </th> <th>Town</th> <th>Postcode</th> <th></th> <th></th> <th></th> <th></th></tr>";
// loop through results of database query, displaying them in the table
for ($i = $start; $i < $end; $i++)
{
// make sure that PHP doesn't try to show results that don't exist
if ($i == $total_results) { break; }
// echo out the contents of each row into a table
echo "<tr class='main'>";
echo '<td>' . mysql_result($result, $i, 'id') . '</td>';
echo '<td>' . mysql_result($result, $i, 'First_Name') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Surname') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Company_Name') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Telephone') . '</td>';
echo '<td>' . mysql_result($result, $i, 'Alt_Telephone') . '</td>';
echo '<td>' . mysql_result($result, $i, 'line_1') . '</td>';
echo '<td>' . mysql_result($result, $i, 'town') . '</td>';
echo '<td>' . mysql_result($result, $i, 'postcode') . '</td>';
echo '<td>View</td>';
echo '<td>Delete</td>';
echo '<td>archive</td>';
echo '<td>New Job</td>';
echo "</tr class='notes'>";
echo "<tr>";
echo '<td>' . mysql_result($result, $i, 'notes') . '</td>';
echo "</tr>";
}
// close table>
echo "</table>";
and Have the following Javascript at the top of my code
<link rel="stylesheet" type="text/css" href="test.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html>
<head>
<title>View Records</title>
<script language="Javascript">
var rows = $('table.listTable tr.notes');
$('#showNotes').click(function() {
var showN = rows.filter('.showN').show();
rows.not( showN ).hide();
});
</script>
</head>
With the Toggle button created further down
<button id="showNotes">Toggle Notes</button>
When I click the button nothing is happening
You add class notes to close tag </tr>.
You have:
echo "</tr class='notes'>";
echo "<tr>";
Should be:
echo "</tr>";
echo "<tr class='notes'>";
And jQuery:
$(document).ready(function() {
$('#showNotes').click(function() {
$('#listTable tr.notes').toggle();
});
});
Now some remarks about your code:
Use mysqli_*, mysql_* is deprecated.
If you're using HTML in echo maybe try ' for it: echo '<tr class="notes">' looks better I think.
Use prepared statements: mysqli.prepare
Check this out (against your for loop): mysqli-stmt.fetch
Wrap the script in document ready function:
$(document).ready(function() {
$('#showNotes').click(function() {
var showN = rows.filter('.showN').show();
rows.not( showN ).hide();
});
});

Categories