I'm using Simple:Press in Wordpress, and I have an Ajax auto-refresh code in the header, which refreshes ONLY the div that has the newest thread posts.
The page refreshes just fine, but won't load in any new posts in that thread.
Here's the code in my header:
<script>
var refreshId = setInterval(function()
{
$('.sfposttable').fadeOut("fast").load('response.php').fadeIn("fast");
}, 60000);
</script>
Any ideas why the div refreshes, but doesn't pull in any new posts?
I think you have to use first
$(document).ready(function() {
var refreshId = setInterval(function()
{
$('.sfposttable').fadeOut("fast").load('response.php').fadeIn("fast");
}, 60000);
});
Here is a working example: http://jsfiddle.net/943UA/
Also you may want to change the refresh time: 60000 -> 1 minute make it 2000 -> 2 sec for test purpose.
Related
I have an AJAX chat. AJAX reloads session every 750ms so it deselect text which I selected in chat. How can I solve it?
My code:
document.getElementById('content-frame').onload = msg_loading();
$(document).ready(function(e) {
$.ajaxSetup({
cache: false
});
setInterval(function() {
$('#content-frame').load('<? echo('init/conversation.php?uid='.$id.'&cid='.$u['id']); ?>');
}, 750);
});
Personally I would be reloading the data via ajax on the page that contains the chat. Like so:
Right now you have your chat box reloading from the "Main page" which I think is the problematic part. I would use ajax to call a REST API instead. This will solve your problem with the page reloading and deselecting the text because the page is not reloading, the data is being updated via ajax.
setInterval(function(){
$.ajax({
url: '/conversation-rest-api.php?uid=' + uid
})
.done(function(data){
// Use templating tool to generate html from `data`
// var content = getContentFromData(data);
$('#content-output').html(content);
});
}, 750);
I'm trying to capture the page load time using casperjs. The page in question is login protected. Here is what I have so far:
var casper = require('casper').create();
// Enter the login page, fill up the form and submit it
casper.start('https://example.net/login', function () {
// Fill the form
this.fill('form[name=signin]', {
'user': 'username',
'passwd': 'password'
}, false);
// Submit the form by clicking the submit button
this.then(function() {
this.click('#sign_in');
});
});
// Now on the loggedin page click the link of page for which response time is needed
casper.then (function() {
var start = Date.now();
this.click ('#pageLink');
// Measure response time of this page
var end = Date.now();
this.echo (end - start);
});
casper.run();
I can pretty much tell it's the wrong approach because I should perhaps wait for the page to load and then capture the end time. But on the casper js documentation page, I did not find any thing that lets me know when the page has loaded fully. Would it make sense to look for the closing tag and see if that has loaded ?
You should use the events : here an example :
(function(){
"use strict";
var s
,e
;
//we use casper events to calculate the time between a http request and its response
casper.on('page.resource.requested', function(requestData, request) {
//console.log("request url " + requestData.url);
s = new Date().getTime();
});
casper.on('page.resource.received', function(response) {
//console.log("response url " + response.url);
e = new Date().getTime();
casper.echo("Time between HTTP request and HTTP response : " + (e-s) + "ms","INFO");
});
})();//then your code
I use an IIFE just to create a scope for var s (start) and e (end).
For what you want, you could do the same with load.started and load.finished.
http://casperjs.readthedocs.org/en/latest/events-filters.html
But there are better tools to do that, Casper isn't that good for monitoring.
I have the following script, it reloads the forum topics every 3 seconds but I also want it to load as soon as the page loads, so that there is no delay the first time. The first time the page loads it takes 3 seconds before the topics show up.
Can anyone help me with this?
Thanks in advance.
<script type="text/javascript">
window.onload = function(){
function foo()
{
$('#forum').load('forum.php').fadeIn("slow");
} // refresh every 10000 milliseconds
setInterval(foo, 3000);
}
</script>
That is because you are waiting on the .onload event, which is fired when all resources/assets (like images) have been downloaded by the browser — this delay will be significant on bloated or resource-heavy sites, which will make a lot of HTTP requests and does not fire the onload event as early as you wish.
The solution? You should instead fire foo on DOM ready:
$(function() {
var foo = function() {
$('#forum').load('forum.php').fadeIn("slow");
}
// Will execute on DOM ready
foo();
setInterval(foo, 3000);
});
Note that $(function() {...}) is the equivalent of $(document).ready(function() {...}) in jQuery.
If you wish to also forcibly fire foo() when all resources are loaded up, just fire it again with:
$(function() {
var foo = function() {
$('#forum').load('forum.php').fadeIn("slow");
}
// Will execute on DOM ready
foo();
setInterval(foo, 3000);
// Also execute on window load
$(window).load(foo);
});
I am using addNotice to display any message on screen. Now, I want to customize it and it should be removed after some time(let's say after 10 seconds) like we can do with javascript.
Is this possible to do this using default addNotice message of magento ?
Any Help would be appreciated.
add this script in your page
This will hide the div after 1 second (1000 milliseconds).
$(function() {
setTimeout(function() {
$('.messages').fadeOut('fast');
}, 1000); // <-- time in milliseconds
});
If you just want to hide without fading, use hide().
hope this will help you
Add this to your footer:
setTimeout(function(){
var messages = $$('.messages')[0];
if (messages){
$(messages).hide();
}
}, 10000)
The code above is the prototype version.
If you have jquery already in your website use what #magExp wrote. It's cleaner.
Let say your success message id is "success-msg", then write jquery like
$(function() {
// setTimeout() function will be fired after page is loaded
// it will wait for 5 sec. and then will fire
// $("#success-msg").hide() function
setTimeout(function() {
$("#success-msg").hide('blind', {}, 1000)
}, 5000);
});
Remember that you need to load jQuery Library..
I am trying to create ajax pagination on Blog Page..
What I need to do is to display 5 posts initially and then load 5 more when "load more posts" link is clicked.
Below is the javascript I am using:
<script>
jQuery(document).ready(function() {
// ajax pagination
jQuery('.nextPage a').live('click', function() {
// if not using wp_pagination, change this to correct ID
var link = jQuery(this).attr('href');
// #main is the ID of the outer div wrapping your posts
jQuery('.blogPostsWrapper').html('<div><h2>Loading...</h2></div>');
// #entries is the ID of the inner div wrapping your posts
jQuery('.blogPostsWrapper').load(link+' .post')
});
}); // end ready function
</script>
The problem is that when I click the link the old posts get replaced by the new ones, I need to show old posts as well as the new posts...
Here is the Updated jQuery Code which enables the ajax pagination.
jQuery(document).ready(function(){
jQuery('.nextPage a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('.blogPostsWrapper').html('Loading...');
jQuery('.blogPostsWrapper').load(link+' .post');
});
});
The only problem now is the old posts get removed, i need to keep both old and new posts..
Here is the final code I used and now everything works perfectly...
// Ajax Pagination
jQuery(document).ready(function($){
$('.nextPage a').live('click', function(e) {
e.preventDefault();
$('.blogPostsWrapper').append("<div class=\"loader\"> </div>");
var link = jQuery(this).attr('href');
var $content = '.blogPostsWrapper';
var $nav_wrap = '.blogPaging';
var $anchor = '.blogPaging .nextPage a';
var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts
$.get(link+'', function(data){
var $timestamp = new Date().getTime();
var $new_content = $($content, data).wrapInner('').html(); // Grab just the content
$('.blogPostsWrapper .loader').remove();
$next_href = $($anchor, data).attr('href'); // Get the new href
$($nav_wrap).before($new_content); // Append the new content
$('#rtz-' + $timestamp).hide().fadeIn('slow'); // Animate load
$('.netxPage a').attr('href', $next_href); // Change the next URL
$('.blogPostsWrapper .blogPaging:last').remove(); // Remove the original navigation
});
});
}); // end ready function
Could you maybe try the following code? This is how I got this working on my own site.
replace:
jQuery('.blogPostsWrapper').load(link+' .post')
with:
$.get(link+' .post', function(data){
$('.blogPostsWrapper').append(data);
});
You should use jQuery append() to add the new posts without using the old ones.
jQuery load() Will replace the data found in your element . Quoted from jQuery API:
.load() sets the HTML contents of the matched element to the returned
data. This means that most uses of the method can be quite simple: