We Keep Coding

Auto-refresh content inside a div?

I know this question has been asked several times. And I have read all the threads without coming to a solution. I use Wordpress, together with a plugin, this plugin lets me add events to it. I use the "shortcode"/[slug] on a Wordpress page. This displays the events I have added. If I add or remove an event I need to manually refresh the page to see this.
My goal is to be able to see the new events (and removed) without refreshing the whole page.
If I check the page with chrome together with the source I find that a div id="vs" is what contains all the events.
I have made an addition to the plugin where I've created a javascript.
jQuery(document).ready( function($) {
var auto_refresh = setInterval(
function() {
$.ajax({
url: "https://example.com",
success: function( data ) {
$("#vs").html( $(data).find('div').html());
}
})
}, 5000); // refreshing after every 5000 milliseconds
})
What happens is that it is refreshed automatically. But it displays a lot of elements, and it is a duplicate of the content that was already there. And everything is offset too.
I really don't know what to try?
And also, the page which this is displayed on is a slider, both displaying the same slug, but it only "works" on the first slider.
Any ideas?

So it's a little hard to answer without seeing what all the dom looks like but it sounds like you are not replacing the content but rather just adding to it over and over again. As a result, slowly the width content is getting smaller and smaller which is why you get the indenting affect. My guess is you're using .html when you want to be using .replaceWith
http://api.jquery.com/replacewith/
var auto_refresh = setInterval(
function() {
$.ajax({
url: "https://example.com",
success: function( data ) {
$("#vs").replaceWith( $(data).find('div').html());
}
})
}, 5000); // refreshing after every 5000 milliseconds
If this doesn't work I think we need to see what your dom looks like.

How to select new loaded elements in jQuery without any event

I am working on a jQuery project which a part of page is loaded by choosing different options usign load() method.
I have this line in my application:
$('.pe').myFunction();
This code must be executed without any event. So I can not use any code like this:
$(document).on('click','.pe',function(){...});
It works well on all preloaded elements with pe class.But it does not work on new loaded contents which have same class.
Can you help me please?

The arguably correct way of doing it is using $(document).on('.pe','click',function(){...});; however, I did program a fair amount before I discovered that. So, I know there are a couple of work around. I'd use a class to mark an item as 'completed' after adding a click event.
If you have any 'hook' to know when the new html is added you can simply call a function that instead of using an interval.
Note regarding the question: you did say no events and this uses no events.
//Simulating ajax loading
setInterval(function () {
$(document.body).append('<button class="clickable">So clickable!</button><br />');
},1000);
//Your code
setInterval(function () {
$(".clickable:not(.completed)").click(function () {
console.log('works!');
}).addClass("completed");
},10);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button class="clickable">So clickable!</button>
</div>

Finally I found the answer. I just put the same code inside the loaded page.
// New page which will be loaded with its all contents ...
<script>$('.pe').myFunction();</script>

Execute jQuery after Other JS file Dynamically loads content

I'm working to modify some content which is dynamically loaded via another script(let's call is script #1) onto my site. Script #1 loads some markup and content and I've been using the setTimeout() function to call my script (Script #2) using a delay of a few seconds, in order to wait to be sure that Script #1 has executed and the content is present in the DOM.
My issue is that Script#1 has different loading times, based on the server load and can be slow or fast depending on these factors, and right now, playing it safe with setTimeout() I'm often left with a second or two where my scripts are still waiting to be fired and Script #1 has already loaded the content.
How can I execute my script as soon as Script#1 successfully loads it's dynamic content?
I've found this post which does seem to address the same issue but using the setInterval function as #Matt Ball has laid out there doesn't work at all for some reason. I'm using the code below where 'div.enrollment' is meant to find in the DOM which is dynamically loaded and execute..
jQuery(window).load(function ($)
{
var i = setInterval(function ()
{
if ($('div.enrollment').length)
{
clearInterval(i);
// safe to execute your code here
console.log("It's Loaded");
}
}, 100);
});
Any help on guidance on this would be greatly appreciated! Thanks for your time.

It seems that the healcode.js is doing a lot of stuff. There is a whole lot of markup added to the <healcode-widget> tag.
I would try to add another tag with an id inside and test for its existence:
<healcode-widget ....><div id="healCodeLoading"></div></healcode-widget>
Test in an interval for the existence of healCodeLoading inside <healcode-widget>: (Assuming jQuery)
var healCodeLoadingInterval = setInterval(function(){
var healCodeLoading = jQuery('healcode-widget #healCodeLoading');
if (healCodeLoading.length == 0) {
clearInterval(healCodeLoadingInterval);
// Everything should be loaded now, so you can do something here
}
}, 100);
healcode.js should replace everything inside <healcode-widget></healcode-widget> during init. So, if your <div>-element is no longer inside, the widget has loaded and initialized.
Hope that helps.

If you just want to load some markup and content and then run some script afterwards, you can use jQuery. You should use something like the following in script#1 to run a function in script#2
$.get( "ajax/test.html", function( data ) {
// Now you can do something with your data and run other script.
console.log("It's Loaded");
});
The function is called, after ajax/test.html is loaded.
Hope that helps

How to refresh mysql posts every 1 second

I use ajax to save user posts/comments into a mysql table without page refresh.
First: I have this <div id="posts-container"></div>
Second: I've tried using Jquery load() to loop in table and echo the posts, with the following code:
var auto_refresh = setInterval(function() {
$('.posts-container').load("refresh_p.php").fadeIn();
}, 0 );
But it doesn't work, page refreshes but content doesn't load, anybody knows why?
Third: If i copy the code that contains refresh_p.php and paste into the data gets loaded successfully. A little weird? Yes. Hope get any help :)
EDIT:
I fixed it, the problem was in refresh_p.php it was expecting the parameter 'profile_id'
i modified the function to this:
1: profile.php
search_user = document.getElementById('user_from').value;
var auto_refresh = setInterval(function() {
$('.posts-container').load("refresh_p.php?search_user="+search_user).fadeIn();
}, 5000 );
2: refresh_p.php
$profile_id = $_GET['search_user'];
All good, but now the whole page refreshes every 5 seconds. I just want the div 'post-container' to refresh.
I've used this function before to refresh a chat box and it worked, only refreshes the div i wanted to. but here it refreshes the entire page.

Don't use setInterval. Do recursive calls on jQuery load complete, this way you make sure that calls are sent one AFTER another, not at the same time.
Try this:
var auto_refresh = function () {
$('.posts-container').load("refresh_p.php", function(){
setTimeout(auto_refresh, 800);
}).fadeIn();
}
auto_refresh();
Also, .fadeIn() only works the first time, after that you have to hide the div before showing it again.
Demo: http://jsfiddle.net/P4P9a/1/ (might be slow because it is loading an entire page).
LE: As I think you are not returning an HTML page you should use $.get instead of $.load .
$('.posts-container').get("refresh_p.php", function(data){
$(this).html(data);
setTimeout(auto_refresh, 800);
}).fadeIn();

var auto_refresh = setInterval(function(){
$('.posts-container').load("refresh_p.php").fadeIn(50);
},1000);
Changed the interval from 0 (which would just create a crazy load...) to 1000ms (1 second). Should work if your path is correct.

Make sure your interval is long enough for your requests to finish. Also think about less real-time options, such as sending an array of messages every 15 seconds, showing them one after another on the client side. Optimize your server side for quick response using caching and also think about using json data and client side templating instead of html responses.

$(window).load(function()-how it works with FF

I have a jquery code.
$(window).load(function() {
document.title = $("#myid").text(); //not working in FF
});
Here I have used $(window).load(function() because in the #myid I am getting value through another javascript, if I use ready(), its giving me error. so I am first loading the window then start reading value.
Now in IE, after the window loads itself , I am getting the value of document.title,
but for FF its coming as blank.undefined.
Why? any idea or alternate sln.

It might be a rendering/timing issue.
How are you setting the #myid text? Im assuming you are running this code on page load?
Personaly on another note, i like to use the shorthand version of jQuery DOM ready, this might also fix your problem too.
jQuery(function(){
document.title = jQuery("#myid").text();
});
And i would make sure that you call it at the end of the body or ideally in the head tag.

I think it is possible that firefox triggers ready and load at the same time when it loads quickly (localhost, small experiment page with one div, etc.)
Why not put the title setting in the ready function right after getting it? If You put it in a div, You can put it in the title too.

I didn't check this code and it isn't a good way, but maybe it help you...
If your code isn't working in Firefox only, you can check browser by Javascript and execute my code for Firefox only.
<script type="text/javascript">
var timerId = 0;
function checkElement() {
// If don't work: try .html() or $("#myid").text() != undefined or smth like this
if($("#myid").text()) {
document.title = $("#myid").text();
clearInterval(timerId);
}
}
$(document).ready(function() {
timerId = setInterval('checkElement()', 500);
});
</script>