Динамическое обновление страницы.
Добрый день.
Я новечек в js. Сделал статичный веб. Задача диначески обновлять по каждой ссылки мгновенные данные, поступающие с датчиков, и отображать в таблицы. Таблицы выводить на экран. Создал скрытый DIV. В него вывожу данные. Кликаю по менюшке, данные выводятся, но безконечно - вечно. Нашел стандартный скриптик. Его прикрутил.
<script type="text/javascript">
function allstation() {
$.ajax({
url: 'allstation.php',
success: function(data) {
$('#display').html(data);
}
});
}
var timeInterval = 5000;
setInterval(allstation, timeInterval);
</script>
На каждую кнопку повесил данный скрипт. Скрипт стартует сам, если убрать setInterval(allstation, timeInterval); то нормально нажатие, но тогда не обновляется контент постоянно. Мне надо выход из (простите за делитантизм) из setInterval при нажатии на другую кнопку. Как я понимаю: 1) нужно использовать clearInterval. 2) показывать скрипту, что он в процессе inProcess, чтобы не было автостарта при setInterval Помогите пожалуйста, поправить данный скрипт. |
Saratov64,
var timer = setInterval(allstation, timeInterval);
clearInterval(timer);
|
Цитата:
чтобы отследить изменения
<?php echo date("H:i:s"); ?>
<script type="text/javascript">
function allstation() {
$.ajax({
url: 'allstation.php',
success: function(data) {
$('#display').html(data);
}
});
}
var timer = setInterval(allstation, timeInterval);
clearInterval(timer);
</script>
молчит ((((( |
Saratov64,
clearInterval(timer); вам нужно добавить в то место где вы хотите остановить интервал. в целом это был совет наугад, не понимаю что вам нужно. |
Цитата:
<script type="text/javascript">
function allstation() {
alert ("ТЕСТ");
}
var timer = setInterval(allstation, timeInterval);
clearInterval(timer)
</script>
МОЛЧОК Разово выполняет и все. |
Цитата:
Мне бы хотелось целый код, так как я в js новечек, мне сложно будет, понять где добавить. цель: при нажатии на кнопку, запускает функция, и выполняет опрос базы данных (мгновенные данные которые заливаются в бд), каждые 10 секунд, и выводить в таблицу. Нужно, при нажатии на ДРУГУЮ ЛЮБУЮ КНОПКУ, прирывать выполнения функции function allstation(). Если можно на примере с alert. Нажал на кнопку, каждые 10 сек, появляется сообщение, нажал на другую кнопку, данное сообщение прирывалось. Получается, надо какое-то условие, для прерывания выполнения данной функции. if (click.document), если я правильно понял при любом клике на ДРУГИЕ ССЫЛКИ в документе, прирывать выполнение функции данной кнопки ..... хотя, я может не правильно ставлю себе задачу, по работе функции данной ... |
Saratov64,
$("ДРУГУЮ ЛЮБУЮ КНОПКУ").on("click", function() {
clearInterval(timer)
})
|
Saratov64,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var btn = document.querySelector("#btn");
btn.addEventListener("click", function() {
clearInterval(timer)
});
function allstation() {
document.querySelector("#main").innerHTML += "test "
}
var timeInterval = 1E3;
var timer = setInterval(allstation, timeInterval)
});
</script>
</script>
</head>
<body>
<div id="main"></div>
<input id="btn" name="" type="button" value="stop">
</body>
</html>
|
Цитата:
спасибо большое. Вообщем, надо с нуля за учебник, каждую мелочь не спросишь. еще раз спасибо !!! |
Цитата:
написал свой код который стартует по кнопке, и остановливается по другой кнопке. Но проблема и вопрос в том, если перменные снаружи, вне функции, то функция стартует автоматически при загрузке страницы, и ее можно остановить с помощью clearInterval(timer); А вот если переменные setInterval спрятать внутри функции то, она стартует ПРАВИЛЬНО по клику кнопки, но нифига не работает останов. Как буд-то id не видит, или еще какой-то нюанс который я не понимаю в теории событий javascript. Если можно, поясните пожалуйста, как это работает.
<script type="text/javascript">
var timer
var timeInterval = 5000;
timer = setInterval(allstation, timeInterval);
function allstation() {
$("#display").load('allstation.php');
}
$("#stp").click(function(){
clearInterval(timer);
alert ("stop");
});
</script> |
Saratov64,
нужна глобальная видимость для timer |
Цитата:
Цитата:
вообщем я сформулировал свое меню. Как оно должно работать. И так, у меня есть три - или n.... ссылок для примера три. Я хочу нажать первую, идет опрос датчика раз в 6 секунд, (устанавливаю глобальную переменную в значение = 1), как только я нажимаю вторую ссылку, то меняется значение первой, и запускается clearInterval(timer); и запускается опрос второй ссылки, ну и так далее. Это по моей теории, конечно, опять же если я правильно для себя ставлю задачу, но реализация пока не получилась, поправьте мой код, пожалуйста ... <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style>
<script>
var i=0; // устанавливаем первое значение ГЛОБВЛЬНОЙ переменной
alert (i); //вывод текущего значения переменной
timer;
function allstation(){
var i = 1;
alert ("allstation");
if (i==1){
timer = setInterval(allstation, 6000);
} else {
clearInterval(timer);
}
}
function st1(){
var i = 2;
alert ("st1");
if (i==2){
timer = setInterval(st1, 6000);
}else{
clearInterval(timer);
}
}
function st2(){
var i = 3;
alert ("st2");
if (i==3){
timer = setInterval(st2, 6000);
}else{
clearInterval(timer);
}
}
</script>
</head> <body> <a href="#" onclick="allstation();">allstation</a> <br> <a href="#" onclick="st1();">st1</a> <br> <a href="#" onclick="st2();">st2</a> </body> </html> |
Saratov64,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
|
Цитата:
|
Saratov64,
попробуйте описать алгоритм того что хотите сделать |
Цитата:
есть БД. В нее пишутся данные с датчиков. Нужно для мониторинга по каждому датчику смотреть ТЕКУЩИЕ -МГНОВЕННЫЕ ДАННЫЕ которые должны отображаться на мониторе так же онлайн. Человек нажимает на 1 ссылку, и смотрит показания параметров 1го датчика, и они у него отображаются раз в 6 секунд. к каждой ссылке привязан PHP запрос SELECT * FROM dbo.test 1 ссылка - 1й датчик 2 ссылка -2й датчик 3 ссылка ...... ... .. 7 ссылка - 7й датчик Потом допустим ему нужно показания второго датчика мониторить, он нажимает на вторую ссылку, и прирывается выполнение опроса первой ссылки. А как это реализовать, я придумал, только через условие if |
Saratov64,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var btn = document.querySelectorAll(".btn");
btn[0].addEventListener("click", function() {
clearInterval(timer);
timer = setInterval(station1, timeInterval)
});
btn[1].addEventListener("click", function() {
clearInterval(timer);
timer = setInterval(station2, timeInterval)
});
function station1() {
document.querySelector("#main").innerHTML += "1111 "
}
function station2() {
document.querySelector("#main").innerHTML += "2222 "
}
var timeInterval = 1E3;
var timer = setInterval(station1, timeInterval)
});
</script>
</script>
</head>
<body>
<div id="main"></div>
<input class="btn" name="" type="button" value="fn1">
<input class="btn" name="" type="button" value="fn2">
</body>
</html>
|
<script>
window.addEventListener("DOMContentLoaded", function() {
var btn = document.querySelectorAll(".btn");
btn[0].addEventListener("click", function() {
clearInterval(timer);
timer = setInterval(station1, timeInterval)
});
</script>
Я тока с сентября начал изучать, и Вы, мне приводили уже в пример, конструкцию данную, она НЕ заработала в IE, мне бы сделать, для IE самое главное. Я почитал, и как понял что window.addEventListener("DOMContentLoaded", function() в IE может не работать. На этом сайте, нашел Событие DOMContentLoaded не поддерживается в IE8-, но почти все фреймворки умеют его эмулировать. Если нужна отдельная функция только для кросс-браузерного аналога DOMContentLoaded – можно использовать jquery.documentReady.js. |
Цитата:
|
Цитата:
библиотека <script type="text/javascript" src="/js/js-jquery-1.7.2.min.js"></script> хотя, я за версиями jquery не думал следить ... хм |
Saratov64,
попробуйте с этой <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
Цитата:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="/js/js-jquery-1.7.2.min.js"></script> <script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="/js/jquery-3.1.1.js"></script> сбросил настройки IE в хроме вон, пашет, все отлично, а IE молчит, что-то ему не хватает... молчок (((( |
Saratov64,
убрать совсем строки 3, 4, 5 |
Цитата:
я еще думаю, может это настройки IIS сервера. так эмулируют, так как веб находиться на чужом IIS сервере. Хотя, сам скрипт, работает на клиенте же, нет, значит это браузер сам молчит .... |
Saratov64,
ждите специалиста по серверу |
сам файл index.php на сервере IIS майкрософтовский который. в нем не работает.
сейчас взял на рабочем столе файл html простой index.html скопировал туда ваш, год, все работает в IE 11 . что мне делать ??? |
Цитата:
хотя бы навести его на мысль, что и как, либо обновлять версию IIS надо ? |
<script>
window.addEventListener("DOMContentLoaded", function() {
var btn = document.querySelectorAll(".btn");
btn[0].addEventListener("click", function() {
clearInterval(timer);
timer = setInterval(station1, timeInterval)
});
btn[1].addEventListener("click", function() {
clearInterval(timer);
timer = setInterval(station2, timeInterval)
});
function station1() {
document.querySelector("#main").innerHTML += "1111 "
}
function station2() {
document.querySelector("#main").innerHTML += "2222 "
}
var timeInterval = 1E3;
var timer = setInterval(station1, timeInterval)
});
</script>
Подскажите пожалуйста, а как реализовать данную конструкицю, если меню, находиться в динамически появляющемся диве. Т.е. на момент загрузки DOM этого меню не было. Мучился мучился, но так и не разобрался, как это сделать. добавил строку
window.addEventListener("DOMContentLoaded", function() {
$("#menu").on('click', '.btn', function(e)
..............
});
});
где как мне кажется, я напримую указал див $("#menu"), в котором будет появляться кнопка. Но не работает.... торию взял Цитата:
$(this)- текущий элемент но я не понял, что значит указывать родительский $(this).parent()......(); |
Saratov64,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
//console.log($('#menu').length); //проверка что элемент есть 1
$('#menu').on('click', '.btn', function(e){
alert('ура!!!')
});
});
</script>
</head>
<body>
<div id="menu"></div>
<script>
window.setTimeout(function() {
$('<span>',{text : 'Жмак', 'class':'btn'}).appendTo('#menu')
},2000)
</script>
</body>
</html>
|
Цитата:
var btn = document.querySelectorAll(".btn");
btn[0].addEventListener("click", function() {
clearInterval(timer);
timer = setInterval(station1, timeInterval)
});
btn[1].addEventListener("click", function() {
clearInterval(timer);
timer = setInterval(station2, timeInterval)
});
На каждую кнопку писать свой клик ?
$('#menu').on('click', '.btn', function(e){
имею ввиду с разными допустим class="btn1...btn2..." так как мне еще вешать надо setInterval
$(function() {
//console.log($('#menu').length); //проверка что элемент есть 1
$('menu').on('click', '.btn1', function(e){
alert('1')
});
$('body').on('click', '.btn2', function(e){
alert('2')
});
$('body').on('click', '.btn3', function(e){
alert('3')
});
});
да и прошу прощения, я пока ноль, и вопросы у меня пока тупые .... но пытаюсь .... |
Цитата:
|
Saratov64,
$(function() {
//console.log($('#menu').length); //проверка что элемент есть 1
var timer;
$('body').on('click', '.btn1', function(e){
clearInterval(timer);
timer = setInterval(station1, timeInterval)
});
$('body').on('click', '.btn2', function(e){
alert('2')
});
$('body').on('click', '.btn3', function(e){
alert('3')
});
});
|
| Часовой пояс GMT +3, время: 14:06. |