I want my charts and page data has to be changed at certain time without refreshing the page.
I used an ajax request to reload the page or specific div, but when I do that morris.js charts are disappearing. Here is my ajax request. (actually I want full page refresh but if I do that it'll blink page and can't navigate through the page even if I change interval time to be longer).
function updateShouts() {
var selectedAds = 1;
var div = $('#refresh').html();
$.ajax({
url: "<?= base_url() ?>owner/dashBoard",
type: 'POST',
data: {
selectedAds: selectedAds
},
success: function(data) {
if (status) {
/* $("#refresh").load(location.href + " #refresh");*/
location.reload();
}
}
});
}
setInterval("updateShouts()", 4000);
updateShouts();
Related
i am doing a social media project via udemy. the instructor has done ajax for infinite scrolling.the ajax part.i am having doubts regarding it in some lines.
NOTE-posts_area is an empty div where we are going to load the posts
explanation of the $(window).scroll(function() ???
$(document).ready(function() {
$('#loading').show();
//Original ajax request for loading first posts
//$.ajax is a jquery to perform ajax request
$.ajax({
url: "includes/handlers/ajax_load_posts.php",
type: "POST",
data: "page=1&userLoggedIn=" + userLoggedIn, //what does this mean ???
cache:false,
success: function(data) {
$('#loading').hide();
$('.posts_area').html(data);//post area is a empty div created to enter the posts
}
});
$(window).scroll(function() {
var height = $('.posts_area').height();
var scroll_top = $(this).scrollTop();
var page = $('.posts_area').find('.nextPage').val();
var noMorePosts = $('.posts_area').find('.noMorePosts').val();
if ((document.body.scrollHeight == document.body.scrollTop + window.innerHeight) && noMorePosts == 'false') { //if noMorePost is true this wont execute aka there are posts to be loaded
$('#loading').show(); //show loading gif while more posts are loaded
var ajaxReq = $.ajax({
url: "includes/handlers/ajax_load_posts.php",
type: "POST",
data: "page=" + page + "&userLoggedIn=" + userLoggedIn, //whatever page we are set to
cache:false,
success: function(response) {
$('.posts_area').find('.nextPage').remove(); //Removes current .nextpage
$('.posts_area').find('.noMorePosts').remove(); //Removes current .nomoreposts
$('#loading').hide();
$('.posts_area').append(response);
}
});
} //End if
return false;
}); //End (window).scroll(function())
});
the ajax file
<?php
include("../../config/config.php"); //has mysql connection variable
include("../classes/User.php");
include("../classes/Post.php");
$limit=10; //no of posts to be loaded per call(we dont want everthing to load at the same time)
$posts=new Post($con, $_REQUEST['userLoggedIn']);
$posts->loadPostsFriends($_REQUEST,$limit);
?>
what does the following statements do ??
data: "page=1&userLoggedIn=" + userLoggedIn
$('.posts_area').html(data);
Comments added to your code should hopefully explain each step.
$(window).scroll(function() {
//get the height of the area that you are wanting to use infinite scroll on (doesn't appear to be used.....)
var height = $('.posts_area').height();
//see how far down you have scrolled (doesn't appear to be used.....)
var scroll_top = $(this).scrollTop();
//look for an element with class 'nextPage' and get it's value (weird way of doing it - would guess the value is a URL
var page = $('.posts_area').find('.nextPage').val();
//see if class noMorePosts exsits in posts_area -> will return false if it does not.
var noMorePosts = $('.posts_area').find('.noMorePosts').val();
//the function we are in is called every time the user scrolls the page.
//this part looks to see if you have scrolled to the bottom of the page (is the total scroll height equal to the amount you have scrolled plus the height of the page) -> if it is (and the 'noMorePosts' class is not found, run the function.
//As a side note the methods used in this example are terrible and prone to lots of errors and problems so just be careful that you don't try and use them in a live website.
if ((document.body.scrollHeight == document.body.scrollTop + window.innerHeight) && noMorePosts == 'false') { //if noMorePost is true this wont execute aka there are posts to be loaded
$('#loading').show(); //show loading gif while more posts are loaded
//make ajax call
var ajaxReq = $.ajax({
//url to call
url: "includes/handlers/ajax_load_posts.php",
//type of request
type: "POST",
//as this is a POST request you will send some data -> this is that data, you are sending the page (value defined above) and the userLoggedIn variable (which must be defined elsewhere)
data: "page=" + page + "&userLoggedIn=" + userLoggedIn, //whatever page we are set to
//do not cache the response (so if you ask for the same info the server still processes the request)
cache:false,
//think you should get the rest
success: function(response) {
$('.posts_area').find('.nextPage').remove(); //Removes current .nextpage
$('.posts_area').find('.noMorePosts').remove(); //Removes current .nomoreposts
$('#loading').hide();
$('.posts_area').append(response);
}
});
} //End if
return false;
}); //End
//calling the scroll function on page load? Also this seems an odd way of doing it but who am I to judge :-P
(window).scroll(function())
I'm trying to reload my comments on a blog post with ajax when the pagination buttons are clicked. The url before the pagination is clicked looks like this
http://localhost/designv2/blog/read/3/lorem-ipsum/1/
If I then click on a page number in the pagination the url's ajax return in the HTML will look like this
http://localhost/designv2/modules/blog_comments.php/1/
So blog_comments.php is the file ajax is calling to get the comments and that is probably why it is set as the url in all returned links.
How do i send the url assigned to href on the link to the page ajax calls for to get the right page number with comments and then set the url to the correct one?
$(".comments__pagination a").on("click", function() {
event.preventDefault(); // Prevent the page from reloading
var blog_id = $(".blog__comment").attr("id");
$.ajax({
url: "modules/blog_comments.php",
type: "post",
data: {
reload_comments: "true",
blog_id: blog_id
},
// On success output the requested site.
success: function (data) {
$(".blog__comment").html(data);
}
});
});
Using JQuery attr function you have to get href attribute
$(".comments__pagination a").on("click", function(event) {
event.preventDefault(); // Prevent the page from reloading
var blog_id = $(".blog__comment").attr("id");
pageurl = $(this).attr("href");
$.ajax({
url: pageurl,
type: "post",
data: {
reload_comments: "true",
blog_id: blog_id
},
// On success output the requested site.
success: function (data) {
$(".blog__comment").html(data);
}
});
});
I am trying to display a loading animation and hide the search input box before the ajax request has been sent, the ".se-pre-con" element is the loader.
As you can see below I am tring to show this in the beforeSend of the ajax request. However, when the user is typing in the search box then stops for the delay specified (1000ms) the input box still displays throughout the ajax request but it is unresponsive.
Then the results are returned, and the loading animation does the fadeOut so it the show() must be triggering but the page remains unchanged until the results are returned. I want to prevent the unresponsive page effect and show a loading animation during the request. Any help is much appreciated.
$(document).ready(function() {
var delay = (function() {
var timer = 0;
return function(callback, ms) {
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$('#search_field').keyup(function() {
var target = $(this);
delay(function() {
getSearchResults(target.val());
}, 1000);
});
function getSearchResults(str) {
$.ajax({
beforeSend: function(){
$(".se-pre-con").show();
$("#search_field").hide();
},
url: "http://example.com/Search_Results.php",
dataType:"html",
data: {"search_term": str},
method: "post",
async: false,
success: function(data){
if(data !== null) {
$("#search_default").hide();
$("#search_results_wrapper").html(data);
}
$(".se-pre-con").fadeOut("slow");
$("#search_field").show();
$("#search_field").focus();
},
error: function(){
$(".se-pre-con").fadeOut("slow");
$("#search_field").show();
$("#search_field").focus();
}
});
}
});
I found the solution.
Solution
It started working when I removed the option:
async: false
I have a modal that shows content pulled via an ajax call. In this content there is an image slider. The slider works and the images have loaded but they still do not show. Only when I hit f12 to use firebug to try and find out if the images are loaded do the images show on the page. This only happens if firebug is not detached from the browser. It's almost as though they need a kick to show on the page.
I'm using Foundation 4 reveal for the modal
I've searched for a similar problem but can't seem to find anything out there. #
How do I get the images to show after the content has been added to the #popout div.
My code is below
(function($) {
$('.rslides li').click(function(e) {
e.preventDefault();
var project_id = $('.rslides1_on .popout-link').data('project-id');
var url = '/popout-content.php?aid=' + project_id;
params = {
aid: project_id
};
$.ajax({
type: 'GET',
url: 'popout-content.php',
data: params,
dataType: 'html',
success: function(html) {
if (html != 'empty') {
$('#popout').foundation('reveal', 'open');
$('#popout').html(html);
}
}
});
});
})(jQuery);
I hav this code in jquery which is written in such a way that when i scroll down my mouse next set of records are fetched from db and displayed. Initially my page shows 25 records, and when i scroll down next 15 records r fetched from db. My problem is that i am not able set a counter and increment the counter whenever scroll function is called. And also when ever i scroll down same 15 records r displayed.
This is my code...
$(window).on('scroll',function(){
if($(window).scrollTop()==($(document).height()-$(window).height())){
$.ajax({
type: 'POST',
url: 'getdata.php',
success: function(nxt_data){
$('#data').append(nxt_data);
}
});
}
});
Create a page variable and then add to it everytime the ajax is called.
var page = 1;
$(window).on('scroll', function () {
if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
page++;
$.ajax({
type: 'POST',
data: 'page=' + page,
url: 'getdata.php',
success: function (nxt_data) {
$('#data').append(nxt_data);
}
});
}
});
Your issue appears to be because getdata.php has no way of knowing what records to return, so it is just returning the same 15 rows.
var counter=25;
$(window).on('scroll',function(){
if($(window).scrollTop()==($(document).height()-$(window).height())){
$.ajax({
type: 'GET',
url: 'getdata.php?start_row=' + counter,
success: function(nxt_data){
$('#data').append(nxt_data);
counter += 15;
}
});
}
});
In your PHP file you can access the counter variable using $_GET['start_row'];