I currently have a page that loads slow and would like to make the user experience more enjoyable. I would like to load each div so when a div is read() fade in using jQuery. Currently my code works but it loads everything at the same time and fades in. I would like it to load in order of div placement. Below is an example code of loading 2 divs with large tables in them. I would like each table to show up as soon as it's ready. The first one should be ready before the second one and it should render first. I have tried to separate the js so that each has their own ready() but that didn't work.
Also: I am more looking for a consent on how to do this rather than the specific code. What if I have a lot of divs with a lot of different tables. Not every div will have a table in it. some might have pictures or just text. There should be a way to load each div whenever it's ready to be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="style/jquery-ui.css" rel="stylesheet" type="text/css"/>
<link href="style/main.css" rel="stylesheet" type="text/css" />
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<title>Animated jQuery Fade | Script tutorial</title>
</head>
<script>
$(document).ready(function(){
$('.myTable').DataTable();
});
$(document).ready(function(){$(".content").hide().fadeIn(1000);});
</script>
<body>
<div id="header">
<h1>Welcome to test page</h1>
</div>
<div class="content" style="display: none;">
<table class="myTable">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</thead>
<tbody>
<?php for($i =0; $i <10000; $i++){ ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<div class="content" style="display: none;">
<table class="myTable">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</thead>
<tbody>
<?php for($i =0; $i <20000; $i++){ ?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
<td><?php echo $i; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</body>
</html>
I think what you need here is to provide you DataTables with an AJAX source, which will retrieve your data. Then set a callback that will fire when the data has been loaded to fadeIn your tables.
It might look something like this:
$(document).ready(function() {
$('#myTable1').dataTable( {
"ajax"{
"url": 'path/to/datasource.php',
"success" : function(){
$('#myTable1').parent().fadeIn(1000);
}
}
} );
} );
This is untested code and the syntax may be wrong, but it should give you an idea of how this is done. Also, the returned data from your php datasource must return json in the correct format DataTables is expecting (this is very important, and is often where people make mistakes).
Please see the DataTables ajax docs here.
the problem is not about what type of data it need to display, but rather you should limit amount of data display each time, and separate the server side, from client side, so it will reduce load on browser, the code below is untested, prob lot of syntax error #_#
PHP
<?php
// you can manual hard code the data, or use database, it really didn't matter what the data are it can be path of image, text, etc...
var $textData = array(); // eg ('text1','text2')
var $imgData = array(); // eg ('path/img.jpg', 'path/img.jpg')
var $divData = array(); // eg ('<div class="parent"><div class="child"></div></div>')
// see what data set you want to get
if($_POST['type']==='text') {
// now encode the data into json for ajax
echo json_encode($textData);
} else if($_POST['type']==='img') {
echo json_encode($imgData);
}
?>
JQUERY AJAX
<script>
if(some condition are made) {
$.ajax({
url: "text.php",
type: "POST",
data: {
type: 'text' // it can be anything
},
dataType: "JSON",
success: function (dataSet) {
// jquery to append dataSet, use if() to append to different place depend on type
// this set you can hide as default with css
// after data loaded fade in with jquery.
}
});
}
</script>
Related
I am not that experienced in web developing, so sorry for rookie mistakes;)
In HTML, I want to create a dynamic popup window(div hidden by CSS). On the click of a button I am performing an AJAX post request. The result of the request is a string, which is stored in a hidden input field on the HTML page.
The popup contains a table with the content submitted by the string.
However now I want to retrieve the string via a PHP $_GET or $_POST request.
This is not working at the moment and I don't understand why.
Opening the popup window I am getting these errors:
Notice: Undefined index: popupcontenthidden in ...
Warning: Invalid argument supplied for foreach() in
The HTML:
<div class="popupcontent">
<span class="helper"></span>
<div>
<div class="popupclose">X</div>
<h3>UPDATE DATABASE ENTRY</h3>
<h4>Enter values:</h4>
<table id="popupresult">
<form name='form' action="" method='post'>
<input type='text' name='popupcontenthidden' id='popupcontenthidden'>
</form>
<tr>
<th>Field</th>
<th>Type</th>
<th>Null</th>
<th>Key</th>
<th>Default</th>
<th>Extra</th>
<th>Value</th>
</tr>
<?php
$rows = json_decode($_POST['popupcontenthidden']);
foreach ( $rows as $print ) {
?>
<tr>
<td><?php echo $print->Field; ?></td>
<td><?php echo $print->Type; ?></td>
<td><?php echo $print->Null; ?></td>
<td><?php echo $print->Key; ?></td>
<td><?php echo $print->Default; ?></td>
<td><?php echo $print->Extra; ?></td>
</tr>
<?php } ?>
</table>
</div>
The JS:
$.ajax({
type:'POST',
url: '../wp-content/plugins/ars-management/admin/ars-management-admin-ajax.php',
data: {function: "update", entries: entries},
success: function(response) {
var rows = response;
//hand data to html hidden input
document.getElementById("popupcontenthidden").value = rows;
//open popup on click
$(".popupcontent").show();
}
});
I understand that the second error is happening because $rows is empty.
But how can I fix the issue and retrieve the string from the input field? I can confirm that the string is correctly stored in the input field so all the AJAX stuff works.
Thank you so much!
A kind of solution here:
HTML:
<div class="popupcontent">
<span class="helper"></span>
<div class="popupclose">X</div>
<h3>UPDATE DATABASE ENTRY</h3>
<h4>Enter values:</h4>
<table id="popupresult">
<thead>
<tr>
<th>Field</th>
<th>Type</th>
<th>Null</th>
<th>Key</th>
<th>Default</th>
<th>Extra</th>
<th>Value</th>
</tr>
</thead>
<tbody id="myPopupContentTableBody"></tbody>
</table>
</div>
Javascript:
$.ajax({
type:'POST',
url: '../wp-content/plugins/ars-management/admin/ars-management-admin-ajax.php',
data: {function: "update", entries: entries},
success: function(response) {
$('#myPopupContentTableBody').html(response);
//open popup on click
$(".popupcontent").show();
}
});
PHP:
<?php
...
$rows = myPHPCalculation;
foreach ($rows as $print){
echo '
<tr>
<td>'.$print['Field'].'</td>
<td>'.$print['Type'].'</td>
<td>'.$print['Null'].'</td>
<td>'.$print['Key'].'</td>
<td>'.$print['Default'].'</td>
<td>'.$print['Extra'].'</td>
</tr>
';
}
...
I was tryin to create something quick to use data tables but I am having issues with jQuery I keep getting jQuery undefined and $ undefined. I thought I had put jQuery in the correct order. I am little stumped on what to do. I know it something simple so I will continue to figure it out.
Index.php
<div class="container">
<h1>Example List</h1>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Equipment</th>
<th>Qty</th>
</tr>
</thead>
<tbody>
<?php
<?php
$db = new PDO('mysql:host=localhost;dbname=database;charset=utf8mb4', 'user', 'password');
$stmt = $db->query('SELECT * FROM table');
while($row = $stmt->fetch(PDO::FETCH_ASSOC))
{ ?>
<tr>
<td><?php echo $row['date'];?></td>
<td><?php echo $row['equipment'];?></td>
<td><?php echo $row['qty'];?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<?php //script section ?>
<link rel="stylesheet" href="bootstrap.min.css">
<scriptsrc="jquery.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script>
$('.table').DataTable();
</script>
Going for the low hanging apple here, but is <script src="jquery.js"></script> present as-is in your index? Seems to be a typing error.
The below code is connected to a local database that holds customer information. First, the page is supposed to display the customer name and country, but should display more information for that particular customer once the name is clicked.
The problem with this code below is that it will only always display the first customers information, no matter which name is clicked. Can anyone see where I might be going wrong? Do I need to create an ID for each button (customer name)? Bare in mind that there are a lot of customers in the database and I feel that an ID for each would be very difficult to implement, especially if the database gets modified.
<DOCTYPE html!>
<html>
<head>
<link rel="stylesheet" type="text/css" href="a3.css">
</head>
<body>
<div class="nav">
<?php include 'nav.php';
?>
</div>
<?php include 'dbconfig.php';
$sql ='SELECT * FROM `customers` ORDER BY `customers`.`country` ASC';
$q = $conn->query($sql);
$q->setFetchMode(PDO::FETCH_ASSOC);
?>
<div class = "main">
<table>
<?php while ($r = $q->fetch()): ?>
<tr>
<td><button onclick = "showCustomer();"/><?php echo ($r['customerName'])?></td>
<td><?php echo ($r['country'])?></td>
</tr>
<tr id ="extra" style="display:none">
<td><?php echo ($r['customerNumber'])?></td>
<td><?php echo ($r['contactLastName'])?></td>
<td ><?php echo ($r['contactFirstName'])?></td>
<td><?php echo ($r['phone'])?></td>
<td><?php echo ($r['addressLine1'])?></td>
<td><?php echo ($r['addressLine2'])?></td>
<td><?php echo ($r['city'])?></td>
<td><?php echo ($r['state'])?></td>
<td><?php echo ($r['postalCode'])?></td>
<td><?php echo ($r['salesRepEmployeeNumber'])?> </td>
<td><?php echo ($r['creditLimit'])?></td>
</tr>
<?php endwhile; ?>
</table>
</div>
<div class="foot">
<?php include 'foot.php'; ?>
</div>
<script>
function showCustomer() {
var showForm=document.getElementById('extra');
if (showForm.style.display="none") {
showForm.style.display ="";
alert('ok');
console.log(showForm);
}
else if (showForm.style.display=""){
showForm.style.display ="none";
}
}
</script>
</body>
</html>
</DOCTYPE>
All your <tr> have the same id="extra". As suggested, you need a different "id" for each of them, this is how : I created a variable $i (line 18), that is increased right after the while (line 20), inserted as parameter in the call for showCustomer (line 23), inserted at the end of the id "extra" (line 27), finally, on the bottom, where function showCustomer is declared, the parameter "index" is inserted at the end of the id "extra".
<DOCTYPE html!>
<html>
<head>
<link rel="stylesheet" type="text/css" href="a3.css">
</head>
<body>
<div class="nav">
<?php include 'nav.php';
?>
</div>
<?php include 'dbconfig.php';
$sql ='SELECT * FROM `customers` ORDER BY `customers`.`country` ASC';
$q = $conn->query($sql);
$q->setFetchMode(PDO::FETCH_ASSOC);
?>
<div class = "main">
<table>
<?php $i = 0;
while ($r = $q->fetch()):
$i++; // UNIQUE INDEX FOR EACH CUSTOMER.
?>
<tr>
<td><button onclick = "showCustomer('<?php echo $i;?>');"/>
<?php echo ($r['customerName'])?></td>
<td><?php echo ($r['country'])?></td>
</tr>
<tr id ="extra<?php echo $i;?>" style="display:none">
<td><?php echo ($r['customerNumber'])?></td>
<td><?php echo ($r['contactLastName'])?></td>
<td ><?php echo ($r['contactFirstName'])?></td>
<td><?php echo ($r['phone'])?></td>
<td><?php echo ($r['addressLine1'])?></td>
<td><?php echo ($r['addressLine2'])?></td>
<td><?php echo ($r['city'])?></td>
<td><?php echo ($r['state'])?></td>
<td><?php echo ($r['postalCode'])?></td>
<td><?php echo ($r['salesRepEmployeeNumber'])?> </td>
<td><?php echo ($r['creditLimit'])?></td>
</tr>
<?php endwhile; ?>
</table>
</div>
<div class="foot">
<?php include 'foot.php'; ?>
</div>
<script>
function showCustomer( index ) { // UNIQUE INDEX AS PARAMETER.
var showForm=document.getElementById('extra' + index); // USING INDEX.
if (showForm.style.display="none") {
showForm.style.display ="";
alert('ok');
console.log(showForm);
}
else if (showForm.style.display=""){
showForm.style.display ="none";
}
}
</script>
</body>
</html>
</DOCTYPE>
I want to get dynamic values from php in js in a dynamic manner...Let me elaborate: First I show the image then code:
<div id="">
<table border="1" width="820" style="margin-left:15px;">
<tr>
<th>Sr #</th>
<th>Commented Post</th>
<th>Commenter Name</th>
<th>Commenter Email</th>
<th>Comments</th>
<th>Status</th>
</tr>
<?php
$values = array();
while($row= mysqli_fetch_assoc($res)) {
$values[] = $row['comment_id'];
?>
<tr align="center" style="height:50px;">
<td><?php echo $row['comment_id']; ?></td>
<td><?php echo $row['post_title']; ?></td>
<td><?php echo $row['comment_name']; ?></td>
<td><?php echo $row['comment_email']; ?></td>
<td><?php echo $row['comment_text']; ?></td>
<td>
<?php
if($row['status']==0) { ?>
<div class="status_<?php echo $row['comment_id']; ?>" id="status_<?php echo $row['comment_id']; ?>">Unapproved</div>
<?php } else { ?>
Approved
<?php } ?>
</td>
</tr>
<?php }
?>
</table>
</div>
And Js here's:
<script type="text/javascript">
$(document).ready(function(){
var values = <?php echo json_encode($values); ?>;
var id = values[0];
$('.status_'+id).click(function(){
$("#status_"+id).html("<b>Test</b>");
});
var i = values[1];
$('.status_'+i).click(function(){
$("#status_"+i).html("<b>Test</b>");
});
});
</script>
I want to get all comment id's in js dynamically, so that on clicking each row link, it changes to text "Test"...As I have written the js code manually...how we obtain all the comment_id's dynamically in js..I hope you got the idea what I am trying to do...
There's no point in assigning unique ids to each of your elements. Why not do something like:
<tr>
<td>...</td>
<td><a href="#" onclick="toggle(this, <?php echo $id ?>)">Unapproved</td>
</tr>
then something like
function toggle(node, id) {
node.parentNode.innerHTML = '<b>test</b>';
... do something with "id" value? ...
}
No need for getElementById, assigning a massive pile of repetitive ids, etc.. just a single function call and a bit of DOM tree traversal.
Try to add a class to your status TD, like <td class="status" data-id="<?php echo $row['comment_id'] ?>">// your inital value</td>.
Using jQuery you can easily listen for events which are attached to a an event listener:
$(document).on('click', '.status', function() {
var id = $(this).attr('data-id');
$(this).html('<strong>Test</strong>');
// maybe to something with ajax?
$.ajax({
url: 'yourfile.php?call=doSomething&id=' + id,
type: 'post'
}).done(function(response) {
// console.log(response);
});
});
You dont appear to actually use the ids.
All you need to do is ascertain the clicked element, which use can do using this
html:
<div class="status">Unapproved</div>
js:
$(document).ready(function(){
$('.status').click(function(){
$(this).html("<b>Test</b>");
});
});
I'm trying to use the popover element from bootstrap's framework for Javascript/jQuery and it only works with the first one in the while loop. How can I make it work for all of them?
Why is this? Been trying to figure this out for a bit...
<?php
require 'include.php';
session_start();
$selectBets = $dbc->query("SELECT * FROM `bets` ORDER BY `bid` DESC LIMIT 10");
?>
<style type="text/css">
#hash_text {
font-size: 3.8px;
}
</style>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Bet Number</th>
<th>Amount</th>
<th>Send Address</th>
<th>Time Created</th>
<th>Time Expires</th>
<th>Chance to Win</th>
<th>Payout Multiplier</th>
<th>Final Profit</th>
<th>Server Hash</th>
</tr>
</thead>
<tbody>
<?php while($BetsArray = $selectBets->fetch()) { ?>
<tr>
<td><?php echo $BetsArray['bid']; ?></td>
<td><?php echo $BetsArray['amount']; ?></td>
<td><?php echo $BetsArray['deposit_address']; ?></td>
<td><?php echo date('m/d/Y - H:i:s', $BetsArray['time_created']); ?></td>
<td><?php echo date('m/d/Y - H:i:s', $BetsArray['time_expires']); ?></td>
<td><?php echo $BetsArray['win_chance']; ?></td>
<td><?php echo $BetsArray['multiplier']; ?></td>
<td><?php echo $BetsArray['profit']; ?></td>
<td><a id="hash" data-container="body" data-toggle="popover" data-placement="right">Click here for Server Hash</a></td>
</tr>
<?php } ?>
</tbody>
</table>
<script type="text/javascript">
$(function() {
$('#hash').popover({
html: true,
placement: 'right',
content: '<?php echo '<span id="hash_text">' . hash('sha512', $BetsArray['number'] . '-' . $_SESSION['client_seed']) . '</span>'; ?>'
});
});
</script>
You are creating the popover element by duplicating the ids. Change it to class and see it working.
<a id="hash" data-container="body" data-toggle="popover" data-placement="right">Click here for Server Hash</a>
When you bind to the popover using the id selector $('#hash') it will select only the first element with id that appears in DOM and hence the behavior that you are seeing.
If you want to place a quick fix then you can use attribute selector to select the id like this.
$('[id=hash]').popover({
html: true,
placement: 'right',
content: '<?php echo '<span id="hash_text">' . hash('sha512', $BetsArray['number'] . '-' . $_SESSION['client_seed']) . '</span>'; ?>'
});
But never ever do that