AJAX php code with animated divs - javascript

Following javascript code is used to load the php page:
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('.squeeze_overzicht').load('squeeze_overzicht.php');
}, 2000); // the "3000" here refers to the time to refresh the div. it is in milliseconds. S
});
In de php script following div is set:
if ($LMS_info['result']['mode'] == "play")
{
echo "<div class=\"squeeze_plays_badkamer\"></div>";
}
Problem: The inserted div is an animated div wich restarts with every load. I want it to keep rotating till the div is not shown. How to set the div without being influenced by the specific loading time set in the javascript?

Related

Trying to refresh div inside Iframe

I have a section of my site im working on where i have a certain div, the div "comments" needs to be checked for blank comments being posted and remove them, it works fine the first time but after the div is refreshed it stops working. I'm trying to get this script to reload every second along with the div so the results stay consistent. Here are my 2 scripts:
<script type="text/javascript">
function doRefresh(){
$("#comments").load("comment.txt");
}
$(function() {
setInterval(doRefresh, 1000);
});
</script>
<script>
setTimeout(refreshData, 1000);
function parent()
{ $(".comment_name:empty").parent().hide()};
refreshData();
</script>
For future reference you should have a look into websockets. This will enable you to have data refresh as it is entered from one browser to another and will always keep it up to date without refreshing.
Here is a reference for you to get started. https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
It is a starting point and will help you a lot in future for dynamic content on multiple end points.

remove and append iframe when src refreshes

The code below creates a 10 second delay, and then draws the captcha iframe to the page.
<script>
$(document).ready(function() {
$("#contain").delay(10000).queue(function(next) {
$(this).append('<iframe src="captcha.php"></iframe>');
});
});
</script>
<div id="contain"></div>
When the correct captcha is entered, the iframe captcha page refreshes and a new captcha is presented.
What I would like to happen is every time captcha.php is refreshes, I would like the iframe removed from source again, and the then readded again after 10 seconds.
Originally I was just using a switch inside the captcha to toggle the parent iframe for 10 seconds, but that is relatively easy for the user to just set the display without waiting for the timer - so I am seek a better solution.
It seems the best way, if I can manage to get it working, would be to add and remove the iframe with a 10 second delay on the add.

php/js refresh variable without refresh page

i have problem with my php/js code.
I need to check every 1 second content of file, so before i'm going to load page i set adress.txt content to "localhost" then i go to my website and it displays me localhost, now i want to edit content of text file to "192.168.0.1", so i want to set automatically div text to new content without refresh, its still localhost not 192.168.0.1
My actual js:
$(document).ready(
function() {
setInterval(function() {
var randomnumber = Math.floor(Math.random() * 100);
$('#show').text("<?php echo file_get_contents("adress.txt");?>");
}, 1000);
});
How can i update div text to new txtfile content without refresh?
Sorry for bad english :)
PHP is a server-side language. Your <?php echo file_get_contents("adress.txt");?> executes only when the page is loaded (or refreshed). Then, if you want to do anything without refreshing, you need to use javascript. If you want to call some PHP code without refreshing, you can use AJAX. And you even don't need PHP if you just want to get content of some file.
Try this:
$(document).ready(function()
{
setInterval(function()
{
$.get('address.txt', function(data)
{
$('#show').text(data);
});
}, 1000);
});

jQuery - Load content to div without flashing?

I load content (from a php file that get lists from database) to a div. It has a 10 seconds loop. So on every 10 seconds, it checks the file and load content to div to show new lists if added. However, on every run, the div content flashes (appear and disappear). It seems so unprofessional.
setInterval(function(){
$("#messageshere").empty();
$("#messageshere").load("msgs.php");
}, 10000);
My question is, is there smarter way for doing the same thing, but without flashing ?
Use a callback to show your message and empty your div only when you have your response. like this:
$('#messageshere').load('msgs.php', function(data) {
$(this).empty() // also unnecessary
$(this).html(data);
});

jQuery replace all HTML

I'm trying to replace all the HTML (including the HTML tags) with another page. What I'm trying to do is having a website acting as an app even when navigating the another page.
Here is the code :
(function($) {
Drupal.behaviors.loadingPage = {
attach: function(context,settings) {
$('a').click(function(event) {
event.preventDefault();
// Create the loading icon
// ...
$.ajax({
url: $(this).attr('href'),
success: function(data) {
$('html').replaceWith(data);
}
});
});
}
};
})(jQuery);
I've tried several things. replaceWith() causes a jQuery error in jquery.js after deleting the HTML tag, I guess it is because it can't find the parent anymore to add the replacement.
The best result I got was with document.write(data). The problem is, the javascript code on the loaded page is not executed.
Anyone got a better idea ?
A better idea? Yeah, just load the new page normally by setting window.location instead of using AJAX. Or submit a form.
Otherwise, if you want to load something to replace all of the visible content of the current page but keep the current page's script going, put all the visible content in a frame sized to fill the browser window - which, again, you wouldn't populate using AJAX.
(I like AJAX, but I don't see why you'd use it to replace a whole page.)

Categories