Develop Reference

Why doesn't the 'infinite scroll' stop loading content?

I am using an 'infinite scroll' script that keeps sending requests to the database even when there are no more records. When that happens, it reloads the last set on the page. I would like for the function to stop running when it reaches the last record on the database. I'm new to JS so this is a bit difficult for me to troubleshoot, also, I'm not using jQuery. I am doing most of the work in the PHP script.
I've been reading a lot of posts in here about 'infinite scroll' and I am unable to get how other people check the limits in JS.
JavaScript
function loadPosts(){
var target = document.getElementById('PostsContainer');
var contentHeight = target.offsetHeight;
var yOffset = window.pageYOffset;
var y = yOffset + window.innerHeight;
if(y >= contentHeight){
var xhr = ajaxObj("POST", "loadContent.php");
xhr.onload = function(){
target.innerHTML += xhr.responseText;
}
xhr.send("action=loadMore");
}
}
window.onscroll = loadPosts;
PHP
$sql = "SELECT * FROM posts WHERE post_type = 'a' ORDER BY post_date DESC LIMIT 2" //Original content on page
$totalPosts = 12; (query to DB)
$max = 1;
$current = 2; //Start on record after initial content
while($current < $totalPosts){
$sql = "SELECT * FROM posts WHERE post_type = 'a' ORDER BY post_date DESC
LIMIT $current, $max";
$result = $db_link->query($sql);
$posts_list += ... //Collect the data from DB
$current++;
}
echo $posts_list;
No matter how many times I keep scrolling the new content keeps loading even after I run out of records in the DB. Output keeps repeating every single time I get to the bottom of the page. In this case I have 7 posts in the DB I start with 7, 6... then I keep getting posts 5-1.

So in this case what you can do,
just add one parameter in json, from php or server side which will tell, is data present or not, based on that, you can stop calling loadPosts function
so basically Algorithm be like,
...php
while($current < $totalPosts){
......................
......................
if($current >= $totalPosts)
{
$getNext = False;
}
else
{
$getNext = True;
}
}
...javasrcipt
function loadPosts(){
if(!getNext)
return false;
else
{
......................
......................
}
}
window.onscroll = loadPosts;
Hope this strategy will help you

window.location.reload(true) reloads page but page needs refreshing to show changes

Have a function that makes a change to taxonomy term via AJAX. This works great, except the content remains unchanged on window.location.reload(true) even though the change has been made. See the code and GIF below to understand.
This is an example that adds the button and reloads page on click
if ( 'publish' === $post->post_status && $post->post_type === 'campaigns' ) {
$text = (in_category( 'live') ? 'Activate' : 'Activate');
echo '<li>' . $text . '</li>';
}
So, is there another way that I can reload the page onClick that may help? Also, the post modified date is not updating, yet changes have been made to the post.
Thanks in advance for your help
EDIT -
I have already tried
location.href = location.href; and
document.location.reload();
ADDITIONAL INFO -
Function
add_action('wp_ajax_toggle_live', function(){
// Check ID is specified
if ( empty($_REQUEST['post']) ) {
die( __('No post ID specified.') );
}
// Load post
$post_id = (int) $_REQUEST['post'];
$post = get_post($post_id);
if (!$post) {
die( __('You attempted to edit an item that doesn&#8217;t exist. Perhaps it was deleted?') );
}
// Check permissions
$post_type_object = get_post_type_object($post->post_type);
if ( !current_user_can($post_type_object->cap->edit_post, $post_id) ) {
die( __('You are not allowed to edit this item.') );
}
// Load current categories
$terms = wp_get_post_terms($post_id, 'campaign_action', array('fields' => 'ids'));
// Add/remove Starred category
$live = get_term_by( 'live', 'campaign_action' );
$index = array_search($live, $terms);
if ($_REQUEST['value']) {
if ($index === false) {
$terms[] = $live;
}
} else {
if ($index !== false) {
unset($terms[$index]);
}
}
wp_set_object_terms( $post_id, 'live', 'campaign_action' );
die('1');
});
JS
function toggleLive(caller, post_id)
{
var $ = jQuery;
var $caller = $(caller);
var waitText = ". . .";
var liveText = ". . .";
var deactivateText = ". . .";
// Check there's no request in progress
if ($caller.text() == waitText) {
return false;
}
// Get the new value to set to
var value = ($caller.text() == liveText ? 1 : 0);
// Change the text to indicate waiting, without changing the width of the button
$caller.width($caller.width()).text(waitText);
// Ajax request
var data = {
action: "toggle_live",
post: post_id,
value: value
};
jQuery.post("<?php bloginfo( 'wpurl' ); ?>/wp-admin/admin-ajax.php", data, function(response)
{
if (response == "1") {
// Success
if (value) {
$caller.text(deactivateText);
} else {
$caller.text(liveText);
}
} else {
// Error
alert("Error: " + response);
// Reset the text
if (value) {
$caller.text(deactivateText);
} else {
$caller.text(liveText);
}
}
// Reset the width
$caller.width("auto");
});
// Prevent the link click happening
return false;
}
IT WORKS RIGHT ON PAGE THAT ISN'T SINGULAR

Is toggleLive the function that makes the AJAX request? You are calling reload immediately on click before changes are reflected on the backend. If you are using Jquery include your reload code in the complete callback function that indicates completion of your AJAX request.

Try using Live Query plug-in in jquery instead of live .

I was able to achieve this by setting return trueOrFalse(bool); in the JS and adding the permalink for the page into <a href=""> within the function.
I believe #cdoshi was correct in their answer, yet I was unable to achieve this. I am sure that a little further exploration would make this possible, yet my fix achieved what I wanted with little change to my code.

Pass variables from javascript to php file to store them in mysql db after

Im trying to add a new functionality to my web application. I want the user to be able to select the dates and time they can actually work. For that I create a calendar where I can select the days and times they are available. In the calendar they can select different hours intervals. Until here everything is good. Now I need to add that information in the database. For that I understand that I have to pass the values to a .php file so I can save them in the database. The problem is how can I pass that values to the php file. After that how to add them in the database I guess its not going to be a problem. But how can I send that selected values to the php file so I can save that information?
Any help will be very appreciated.
Thanks.
JS
function isSlotSelected($slot) { return $slot.is('[data-selected]');
function isSlotSelecting($slot) { return $slot.is('[data-selecting]'); }
/**
* Get the selected time slots given a starting and a ending slot
* #private
* #returns {Array} An array of selected time slots
*/
function getSelection(plugin, $a, $b) {
var $slots, small, large, temp;
if (!$a.hasClass('time-slot') || !$b.hasClass('time-slot') ||
($a.data('day') != $b.data('day'))) { return []; }
$slots = plugin.$el.find('.time-slot[data-day="' + $a.data('day') + '"]');
small = $slots.index($a); large = $slots.index($b);
if (small > large) { temp = small; small = large; large = temp; }
return $slots.slice(small, large + 1);
}
DayScheduleSelector.prototype.attachEvents = function () {
var plugin = this
, options = this.options
, $slots;
this.$el.on('click', '.time-slot', function () {
var day = $(this).data('day');
if (!plugin.isSelecting()) { // if we are not in selecting mode
if (isSlotSelected($(this))) { plugin.deselect($(this)); }
else { // then start selecting
plugin.$selectingStart = $(this);
$(this).attr('data-selecting', 'selecting');
plugin.$el.find('.time-slot').attr('data-disabled', 'disabled');
plugin.$el.find('.time-slot[data-day="' + day + '"]').removeAttr('data-disabled');
}
} else { // if we are in selecting mode
if (day == plugin.$selectingStart.data('day')) { // if clicking on the same day column
// then end of selection
plugin.$el.find('.time-slot[data-day="' + day + '"]').filter('[data-selecting]')
.attr('data-selected', 'selected').removeAttr('data-selecting');
plugin.$el.find('.time-slot').removeAttr('data-disabled');
plugin.$el.trigger('selected.artsy.dayScheduleSelector', [getSelection(plugin, plugin.$selectingStart, $(this))]);
plugin.$selectingStart = null;
}
}
});
this.$el.on('mouseover', '.time-slot', function () {
var $slots, day, start, end, temp;
if (plugin.isSelecting()) { // if we are in selecting mode
day = plugin.$selectingStart.data('day');
$slots = plugin.$el.find('.time-slot[data-day="' + day + '"]');
$slots.filter('[data-selecting]').removeAttr('data-selecting');
start = $slots.index(plugin.$selectingStart);
end = $slots.index(this);
if (end < 0) return; // not hovering on the same column
if (start > end) { temp = start; start = end; end = temp; }
$slots.slice(start, end + 1).attr('data-selecting', 'selecting');
}
});
};
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style>
body { font-family:'roboto'; background-color:#ECF0F1; }
</style>
</head>
<body>
<h1 style="margin:150px auto 30px auto;"></h1>
<div id="day-schedule"></div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="../src/index.js"></script>
<script>
(function ($) {
$("#day-schedule").dayScheduleSelector({
});
$("#day-schedule").on('selected.artsy.dayScheduleSelector', function (e, selected) {
console.log(selected);
})
})($);
</script>
</body>
</html>
changes made
As suggestion Im trying to use an Ajax function, and Im telling which parameters do I want to pass, and the file that is going to receive them. But nothing happenss...
Here are the changes. Thanks!
this.$el.on('mouseover', '.time-slot', function () {
var $slots, day, start, end, temp;
if (plugin.isSelecting()) { // if we are in selecting mode
day = plugin.$selectingStart.data('day');
$slots = plugin.$el.find('.time-slot[data-day="' + day + '"]');
$slots.filter('[data-selecting]').removeAttr('data-selecting');
start = $slots.index(plugin.$selectingStart);
end = $slots.index(this);
if (end < 0) return; // not hovering on the same column
if (start > end) { temp = start; start = end; end = temp; }
$slots.slice(start, end + 1).attr('data-selecting', 'selecting');
}
console.log(day);
$.ajax({
url: "/Member/test.php",
dataType:"json",
type: "POST",
data: {
weekDay: 'day',
start: 'start',
end: 'end'
}
})
});

Either with Ajax or you can wrap your inputs with a <form action=your_php_file.php> and post/get them to the php script

Post to your php script using an AJAX call and then, in your php script, access the parameters via the $_POST array, ie:
Code to post to your php script (insert the code in your JS file):
$.ajax({
url: "/subdirectory/model.php",
type: "POST",
data: {
day: "friday",
start: "07:00:00",
end: "16:00:00"
}
})
.done function(data)({
console.log(data)
})
.fail function()({
console.log("Parameters failed to be sent to php!")
})
Code to access the parameters passed from JS in /htdoc/subdirectory/model.php:
<?php
var_dump($_POST);
?>
Executing your JS should result in the three sample parameters being displayed in your browser's log. For you db, instead of vardumping $_POST, you'll add code to the php script that writes the variables to your db.

Trouble migrating from twitter search api to status api

I was using search api to fetch tweets of a particular user. It worked perfectly except that it couldn't fetch tweets where username contained numbers.
So upon suggestion I replaced the query with that of status api. But am unable to parse it now!!
Posting below the old code to display the tweet details.
function displayTweets(data) {
//var data = JSON.parse(d);
$("#heading").html("Tweets: <span class='handleName'>#"+handle+"</span>");
$("#loading").remove();
$("#tweets").children().remove();
alert("1");
$.each(data.results, function(i, tweet) {
alert("hi");
if(tweet.text !== undefined) {
// Calculate how many hours ago was the tweet posted
var date_tweet = new Date(tweet.created_at);
var date_now = new Date();
var date_diff = date_now - date_tweet;
var hours = Math.round(date_diff/(1000*60*60)); // calc time to tweet in hours
if(hours < 1){
hours = Math.round(date_diff/(1000*60));
if(hours<1){
$("#tweets").append($("<li/>").html(tweet.text+" <span class='tweetTime'>--a moment ago.</span>"));
}else{
$("#tweets").append($("<li/>").html(tweet.text+" <span class='tweetTime'>--"+hours+" minute(s) ago.</span>"));
}
}else{
$("#tweets").append($("<li/>").html(tweet.text+" <span class='tweetTime'>--"+hours+" hour(s) ago.</span>"));
}
}
});
}
Now the query string i am using to get the response and store the response in localstorage:
function sendRequest(handle, noOfTweets, boolDisplay){
$.getJSON("http://api.twitter.com/1/statuses/user_timeline.json?screen_name="+ handle + "&count=" + noOfTweets + "&callback=?", function(data) {
if(boolDisplay){
displayTweets(data);
}
localStorage.setItem("tweets"+handle, JSON.stringify(data));
});
Please tell me what changes are needed!!
}

The structures of the returned JSON is completely different. See the examples at https://dev.twitter.com/docs/api/1/get/search and https://dev.twitter.com/docs/api/1/get/statuses/user_timeline
For example, you're saying
$.each(data.results, function(i, tweet) {
But the user timeline doesn't contain a results element.
You want something like
$.each(data, (function(i, tweet) {

JavaScript setTimeout() not actually executing it's function?

I have a JavaScript function that goes through a list of checked checkboxes and uploads a video file for each checked box. I'm trying to make sure that the videos have been transcoded into a smaller format before I begin the upload process. I use to track the index in the array videos, that have completed the transcode process. I check to be sure that counter is >= id before starting the upload process for a given video. If counter is too low (the file is not yet transcoded) I use setTimout() to call the uploadVideos function again. It never seems to call the uploadVideos function again, because I never see the alert popup a second time.
How can I get this to work?
function uploadVideos(id, videos, selected, boxes) {
var status = document.getElementById('currentUploadStatus');
// need to deal with element an array
var fields = videos[id].split(":", 2);
var playlist = document.getElementById('playlist');
var dataString = 'videoId='+ fields[0] + '&playlist=' + escape(playlist.value);
// need to determine the maxTranscodedId
var counter = document.getElementById('counter');
alert('counter: ' + counter.innerHTML + " id: " + id);
if (counter.innerHTML >= id) {
id++;
status.innerHTML = "<b class='status'>Uploading Bout #" + fields[1] + " (" + id + " of " + videos.length + ")</b>";
$.ajax({
type: "GET",
url: "floUpload.php",
data: dataString,
success: function(txt) {
if (txt != 'Success') {
alert(':' + txt + ':');
}
if (id < videos.length) {
uploadVideos(id, videos, selected, boxes);
} else {
//re-enable the start button
var startButton = document.getElementById('start');
startButton.disabled = false;
status.innerHTML = "<b class='status'>Upload Complete</b>";
alert('Upload Completed');
}
//deselect the checkbox
if (boxes == 1 ) {
document.videos.video.checked = false;
document.videos.video.style.display = 'none';
} else {
document.videos.video[selected[id-1]].checked = false;
document.videos.video[selected[id-1]].style.display = 'none';
}
},
async: true
});
} else {
// timer call myself the same way I was called
status.innerHTML = "<b class='status'>Upload waiting for trancode.</b>";
var t=setTimeout("uploadVideos(id, videos, selected, boxes)",3000);
//var t=setTimeout("alert('waking')",3000);
}
}

This is a common error in JS beginners. setTimeout admits either one of two kinds of first parameter:
a) Text, in which you can put JS code to be evaluated out of scope (so referenced variables may be undefined), not quite helpful.
b) Function, such as the fix I propose for this, is to replace the line:
setTimeout("uploadVideos(id, videos, selected, boxes)",3000);
with:
setTimeout(function(){
uploadVideos(id, videos, selected, boxes);
},3000);
As you can see I'm wrapping the function call inside another anonymous function. Why? simply because I need to pass arguments, and otherwise I'd be just calling it, instead of passing as argument.