I'm working on a system using jQuery UI that opens a dialog which basically loads a continually refreshing tail of a log file. It works great, but the problem is that when you close it, it doesn't kill off the dialog, so it still continues to send traffic to you with the tail of the file. Obviously it is not a good practice.
Anyway, the code I have so far to try and tackle the problem is as follows.
var $console = $('<div title=" Server Console"></div>')
.dialog({
height: 720,
width: 1000,
resizable: false,
autoOpen: false
});
$(".consoleOpen").click(function(){
$console.dialog('open').load("console.php?console="+this.name);
});
$console.bind('dialogclose', function(event) {
$console.remove();
});
This is the refresh function in console.php:
(function($)
{
$(document).ready(function()
{
var $container = $("#responsecontainer");
$container.load("console_class.php?console=<?php echo $console; ?>");
var refreshId = setInterval(function()
{
$container.load('console_class.php?console=<?php echo $console; ?>');
}, <?php echo $consoleRefresh;?>);
});
})(jQuery);
Look at the API function destroy()
$console.bind('dialogclose', function(event) {
$console.dialog('destroy').remove();
});
You also need to use clearInterval or else it will keep running as long as the page is open.
$console.bind('dialogclose', function(event) {
$console.dialog('destroy').remove();
clearInterval(refreshID);
});
Try this:
$console.bind('dialogclose', function(event) {
$console.dialog( "destroy" );
});
or read this jQuery Dialog
You mentioned it already
$console.dialog("destroy");
The dialog is not the issue here - it's the interval that's making the call.
Where you declare refreshId do it like this...
var window.refreshId = setInterval(function()
Then where you remove the dialog, add a clearInterval...
$console.bind('dialogclose', function(event) {
$console.remove();
clearInterval(window.refreshId);
});
That makes the variable refreshId global so that it can be accessed elsewhere in your code. You can then use it to clear the interval that is making the repeated call.
I've had this same problem...
See:
jQuery UI dialog close doesn't clear dialog (Stack Overflow question)
Creating dialogs on demand (blog entry)
You need to call $('#dialog_id').dialog("destroy");.
Related
I've written the following Jquery to send a Heartbeat back to PHP every 3 seconds and it works fine. The reason I'm doing this is to understand what users are currently logged in and using the site.
setInterval(function () {
$.post('includes/heartbeat.php', {'heartBeatConfirmation': '1'});
},3000);
The catch I'm finding is it continues to heartbeat when users aren't looking at the site - eg: they still have the browser open but are looking at other pages or doing something else.
Is there a way to update this so it only sends the AJAX heartbeat if the user is using the site?
You can check if window is focused and only heartbeat if it's focused.
Try this:
$(window).focus(function() {
heartbeat = setInterval(function () {
$.post('includes/heartbeat.php', {'heartBeatConfirmation': '1'});
},3000);
})
.blur(function() {
clearInterval(heartbeat);
});
$(window).focus();
$(document).ready(function(){
heartBeatInterval = null;
$(window).focus(function() {
if(heartBeatInterval == null){
heartBeatInterval = setInterval(function () {
$.post('includes/heartbeat.php',
{'heartBeatConfirmation': '1'}
);
console.log('We have the fouces of the active tab');
},1000);
}
});
$(window).blur(function() {
heartBeatInterval = null;
console.log('We have the lost the focus of the active tab');
});
});
It is just a matter of taste I guess:
$(window)
.on('mouseleave', function(){
clearInterval(inside);
})
.on('mouseenter', function(){
inside = setInterval(function () {
$.post('includes/heartbeat.php', {'heartBeatConfirmation': '1'})
}, 3000)
})
JSFIDDLE ( Reminder: window is "Result" Frame ).
I want to pop-up a jQuery Ui Dialog, but it doesnt work. Instead of dialog, i get a new page opened. My code is next:
Controller's action:
public function diaAction()
{
$viewModel = new ViewModel();
$viewModel->setTerminal(true);
return new ViewModel();
}
index.phtml:
<a class="some-link" title="title here" href="<?= $this->url('dialog', array('action' => 'dia'))?>">open form</a>
dia.phtml (dialog code)
<script type="text/javascript">
$(document).ready(function() {
$('.some-link').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
});
});
});
</script>
I just don't get it, why this is not as simple as it should be. Any help?
You have to handle 'click' so it show the dialog instead of following a link. Something like this:
$('.table a.button').on('click',function(e){
e.preventDefault();
$('<div></div>')
.load($link.attr('href'))
.dialog({
autoOpen: false,
title: $link.attr('title'),
});
});
In my opinion, the javascript is just not at its right place. It is called by the index.phtml, not the dia.phtml. How can it be executed it the browser just doesn't know the existence of it?
I think my answer comes too late for you but I hope it will help some other people.
I'm trying to run a function in JQuery that basically shuts down or starts up a server. The code I have so far is this -
$(".stopServer").click(function(){
$.post("controller.php",{stop: 'true', server: this.name});
$('#test'+this.name).load('controller.php?status=true&server='+this.name);
});
The problem is obviously it stops the server fine but it updates the status div ('#test'+this.name) straight away. This is no good because the server takes a period of time to shut down. I've been trying to get SetTimeout to work but can't figure it out... Any help would be appreciated.
Thanks guys, you're the best :)
UPDATE:
Full functions are here:
$(document).ready(function() {
$(".startServer").click(function(){
$.post("controller.php",{server: this.name});
setTimeout("showStatus('"+this.name+"')", 3000);
});
$(".stopServer").click(function(){
$.post("controller.php",{stop: 'true', server: this.name});
setTimeout("showStatus('"+this.name+"')", 3000);
});
function showStatus(name) {
alert(name);
$('#test'+name).load('controller.php?status=true&server='+name);
}
});
UPDATE
Given up on the idea of it, instead the status is polled for every second instead.
var refreshId = setInterval(function()
{
$('.status').each(function() {
var $name = $(this).attr('name');
$(this).load("controller.php?status=true&server=" + $name);
});
}, 1000);
I've added a quick sample of wrapping the function in a setTimeout
$(document).ready(function(){
$('#test').click(function(){
var message = 'hello';
setTimeout(function(){ callback(message) },1000);
});
function callback(name){
alert(name);
}
});
JSFiddle DEMO
I dont know if you will get a response from 'controller.php' when the server actually shuts down, in case you don't, try this...
$(".stopServer").click(function(){
$.post("controller.php",{stop: 'true', server: this.name});
setTimeout("showStatus('"+this.name+"')", 10000);
});
function showStatus(name) {
$command = $('#test'+name).load('controller.php?status=true&server='+name);
}
ajax calls are asynchronous. the $.post() call returns immediately and lets the actual post work be done in the background. either change it to a synchronous call (usually not a good idea), or put the subsequent code in the "success" part of the .post call, e.g.
$.post('controller.php', success: function(data) {
$command = etc....
});
I have a page that generates a google map on page load that I would like to call from another page via a link. Here is how I'm creating the google map inside a colorbox:
// show_map.php
jQuery(document).ready(function(){
$.colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});
Here is my attempt but something tells me I've headed down the wrong path. Should I use the modal window for something like this or is there a better way?
$(document).ready(function() {
$('.show_map').click(function() {
$.get("show_map.php", function(data) {
// alert(data);
})
});
If I've understood correctly, colorbox is already designed to do what you want to do. You don't need to use extra ajax calls (it's already built in). Just set the href option to your page instead of your inline html (then of course remove the inline:true option). The full code (in the page with the link to your map):
$(document).ready(function() {
$('.show_map').click(function() {
$.colorbox({
href: "show_map.php",
width:"643px",
height:"653px"
});
})
});
You can also load any external page if you add the iframe: true option to that code.
Either you use jQuery's .getScript() if the page only contains JavaScript or you can use .load() to insert the page content into the DOM.
$(document).ready(function() {
$('.show_map').click(function() {
$('.some-element').load("show_map.php");
})
});
EDIT: a better approach
have the colorbox inline instead. Saves a round trip to the server.
$(document).ready(function() {
$('.show_map').colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});
I have to make a div load an external file every minute. It does load the file but the JQuery functions don't work. Is there any other way I can load the file so that the JavaScript functions work?
My JQuery code-
emaild = $("#hidden").val();
var refresh = setInterval(function() {
$("#load").load('aposts.php?id='+emaild);
}, 60000);
$.ajaxSetup({ cache: false });
Sorry for the bad English :P
I see you defining emaid and referencing emaild
try this
var $div = $('#myDiv');
var timer = setInterval( function() {
$div.html( $("#load").load('aposts.php?id='+emaild) );
}, 5000);