Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.03.2019, 10:04
Новичок на форуме
Отправить личное сообщение для djsidmsps Посмотреть профиль Найти все сообщения от djsidmsps
 
Регистрация: 25.03.2019
Сообщений: 8

checkbox на ajax
Всем доброго времени суток! Прошу сильно не пинать начинающего.. Бьюсь несколько дней над следующей задачей: Есть чекбокс на странице, который по клику отправляет свое состояние серверу, в виде 1= галка установлена, 0 = галка снята - function Ligntonoff() этим занимается. На сервере состояние чекбокса загоняется в переменную, далее переменная фигурирует в xml который скрипт читает каждую секунду( function handleServerResponse() ).Далее скрипт в зависимости от состояния фигурируемой переменной в xml устанавливает/снимает галку чекбокса. Все как бы работает,но,проблема в том что передача данных не мгновенная,и пока до xml дойдет текущее состояние чека,он меняет свое состояние на противоположное (так как в xml еще старые данные),после чего принимает правильное состояние. Пожалуйста,подскажите как можно обойти данную неприятность?

<html><head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Lignt_Control</title>
 
<SCRIPT>

var xmlHttp=createXmlHttpObject();

function createXmlHttpObject(){
 if(window.XMLHttpRequest){
    xmlHttp=new XMLHttpRequest();
 }else{
    xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
 }
 return xmlHttp;
}

function process(){    // Функция обращается к xml каждую секунду
 if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
   xmlHttp.open('PUT','xml',true);
   xmlHttp.onreadystatechange=handleServerResponse;
   xmlHttp.send(null);
 }
 setTimeout('process()',1000);
}

var isResizeble = false;

function handleServerResponse(){ // Функция разбирает xml по тегам
 if(xmlHttp.readyState==4 && xmlHttp.status==200){
   xmlResponse=xmlHttp.responseXML;

   xmldoc = xmlResponse.getElementsByTagName('timedatestring');
   message = xmldoc[0].firstChild.nodeValue;
   document.getElementById("NTP_TimeDate").innerHTML = message;
   
   xmldoc = xmlResponse.getElementsByTagName('uptimestring');
   message = xmldoc[0].firstChild.nodeValue;
   document.getElementById("UptimeString").innerHTML = message;

   xmldoc = xmlResponse.getElementsByTagName('set_sec'); // Имя тега set_sec
   message = xmldoc[0].firstChild.nodeValue;
   document.getElementById('Set_Sec').value=message;   // Данные из тега передаются элементу Set_Sec по ID

   xmldoc = xmlResponse.getElementsByTagName('set_zummer'); 
   message = xmldoc[0].firstChild.nodeValue;
   document.getElementById('Set_Zummer').value=message;  

   xmldoc = xmlResponse.getElementsByTagName('lignt_on_off');
   message = xmldoc[0].firstChild.nodeValue;
   if(message==true){                                      // Устанавливаем / снимаем галочку чекбокса в зависимости от принятых данных с сервера
   document.getElementById('checkbox').checked = true;
   }
   if(message==false){
    document.getElementById('checkbox').checked = false;
   }
   
  }
 }
 
function Setsec(){
znachenie=prompt('Введите число от 1 до 600');
if(znachenie<=0 || znachenie>=600){
alert('Введите число от 1 до 600 !!!');  
}else{
server = "/Setsec?state=" + znachenie;
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send();  
}
}

function Setzummer(){
znachenie=prompt('Введите число от 0 до 100');
if(znachenie >= 100){
alert('Введите число от 0 до 100 !!!'); 
}else{
server = "/Setzummer?state=" + znachenie;
request = new XMLHttpRequest();
request.open("GET", server, true);
request.send(); 
}
}

function Ligntonoff() {  // Отправка состояния чекбокса на сервер
    var ch1;
    if(document.getElementById('checkbox').checked ==true) {
    ch1=1;
    }else{
    ch1=0;
    }
    server = "/Ligntonoff?state=" + ch1;
    request = new XMLHttpRequest();
    request.open("GET", server, true);
    request.send();   
}

</SCRIPT>
  
  
</head>

<BODY onload="process();">   

    
    <br>
    Дата/Время с NTP: &nbsp; <label id="NTP_TimeDate"></label> 
    <br>
    <br>
    Время работы: &nbsp; <label id="UptimeString"></label> 
    <br>
    <br>
    
    Задержка освещения в сек: &nbsp;<input type="text" name="h" onclick="Setsec()" id="Set_Sec" value="00" size="1" readonly>
    <br>
    <br>
    Интенсивность зуммера: &nbsp;<input type="text" name="h" onclick="Setzummer()" id="Set_Zummer" value="00" size="1" readonly>
    <br>
    <br>
    Принудительное освешение: &nbsp; <input id="checkbox" type="checkbox" onclick="Ligntonoff()"/>
              
   
   </body></html>
Ответить с цитированием
  #2 (permalink)  
Старый 25.03.2019, 10:44
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от djsidmsps
Пожалуйста,подскажите как можно обойти данную неприятность?
Как вариант в атрибутах того чека хранить некие его состояния...
Отправил - зафиксировал.
Получил подтверждение от сервера - зафиксировал.

Тогда, в зависимости от состояния, можно будет узнать - можно обновлять его или нет.
Ответить с цитированием
  #3 (permalink)  
Старый 25.03.2019, 11:51
Новичок на форуме
Отправить личное сообщение для djsidmsps Посмотреть профиль Найти все сообщения от djsidmsps
 
Регистрация: 25.03.2019
Сообщений: 8

ksa,спасибо за потраченное время. Не соображу как это сделать.. Можно примерчик?
Ответить с цитированием
  #4 (permalink)  
Старый 25.03.2019, 12:10
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от djsidmsps
024 setTimeout('process()',1000);
Зачем вам вычислять выражение, когда у вас есть готовая функция!
setTimeout(process, 1000);


Пока не придёт ответ, галочка должна находиться в заблокированном состоянии, чтобы не меняли её состояние, и чтобы не запускалась функция отправки... притом если не удалось связаться с сервером, то состояние возвращается на место!
<label><input type="checkbox" onchange="lightSwitch(this)">Принудительное освещение</label>

<script>

function lightSwitch(checkbox) {
    var initialPosition = checkbox.checked;
    var url  = "/Ligntonoff?state=" + (initialPosition ? 1 : 0);
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            checkbox.disabled = false;
            if(xhr.status === 200) checkbox.checked = initialPosition;
        } 
    };

    xhr.open("GET", url, true);
    xhr.send();

    checkbox.checked = !initialPosition;
    checkbox.disabled = true;
}

</script>

Последний раз редактировалось Malleys, 25.03.2019 в 12:51.
Ответить с цитированием
  #5 (permalink)  
Старый 25.03.2019, 12:29
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от djsidmsps
Можно примерчик?
Тут тестовый пример ждем от тебя... На нем можно будет показать варианты.

Мне же пока не понятно зачем какой-то процесс меняет значение переменной, если это должен делать пользователь.
Ответить с цитированием
  #6 (permalink)  
Старый 25.03.2019, 13:15
Новичок на форуме
Отправить личное сообщение для djsidmsps Посмотреть профиль Найти все сообщения от djsidmsps
 
Регистрация: 25.03.2019
Сообщений: 8

Malleys, ksa спасибо. Буду думать. Процесс обновляет данные на странице. Например если непосредственно на сервере изменились значения переменных,что бы они так же обновлялись в реальном времени на странице.
Выше приведенный мной код, мой только частично) Из примеров втыкаю,проверяю как работает и.т.д . Сервер - микросхема китайская esp8266..

Последний раз редактировалось djsidmsps, 25.03.2019 в 13:17.
Ответить с цитированием
  #7 (permalink)  
Старый 25.03.2019, 15:02
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от djsidmsps
Например если непосредственно на сервере изменились значения переменных,что бы они так же обновлялись в реальном времени на странице.
Тогда можно присылать и время на какое актуальны эти данные.
При изменении поля пользователем, так же записать в атрибут когда было изменение.

Если сервер прислал "старые" данные - переменную не менять. Если данные новее, чем поменял пользователь - смело можно переменную менять и удалять/менять атрибут, отвечающий за отслеживание изменений.

Вот как-то так можно сделать...
Ответить с цитированием
  #8 (permalink)  
Старый 25.03.2019, 15:03
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от djsidmsps
Выше приведенный мной код, мой только частично)
Это понятно.
Просто ты просишь пример действующий. А смоделировать такое не совсем просто. Проблема-то твоя - значит создавать всякий сервис для тестов нужно тебе.
Ответить с цитированием
  #9 (permalink)  
Старый 29.03.2019, 19:23
Новичок на форуме
Отправить личное сообщение для djsidmsps Посмотреть профиль Найти все сообщения от djsidmsps
 
Регистрация: 25.03.2019
Сообщений: 8

А ларчик то просто открывался-сел сегодня за 15 минут решил задачу.
Переменную ch1 сделал глобальной и в function handleServerResponse() сравниваю ее с тем что в message.Короче все четко,как надо работает,но на оптимальность не претендую.
В очередной раз убеждаюсь что нужно давать себе отдохнуть,а не долбить одно и то же..)) Всем спасибо.
<html><head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Lignt_Control</title>
 
<SCRIPT>

var ch1;
var xmlHttp=createXmlHttpObject();

function createXmlHttpObject(){
 if(window.XMLHttpRequest){
    xmlHttp=new XMLHttpRequest();
 }else{
    xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');
 }
 return xmlHttp;
}

function process(){    // Функция обращается к xml каждую секунду
 if(xmlHttp.readyState==0 || xmlHttp.readyState==4){
   xmlHttp.open('PUT','xml',true);
   xmlHttp.onreadystatechange=handleServerResponse;
   xmlHttp.send(null);
 }
 setTimeout('process()',1000);
}


function handleServerResponse(){ // Функция разбирает xml по тегам
 if(xmlHttp.readyState==4 && xmlHttp.status==200){
   xmlResponse=xmlHttp.responseXML;
   
   xmldoc = xmlResponse.getElementsByTagName('lignt_on_off');
   message = xmldoc[0].firstChild.nodeValue;
   if(message==ch1){
      checkbox.disabled = false;  
     if(message==true){                                      
       document.getElementById('checkbox').checked = true;
     }
     if(message==false){
       document.getElementById('checkbox').checked = false;
     }
   }
   
  }
 }
 


function Ligntonoff() {  // Отправка состояния чекбокса на сервер
    if(document.getElementById('checkbox').checked ==true) {
    ch1=1;
    }else{
    ch1=0;
    }
    server = "/Ligntonoff?state=" + ch1;
    request = new XMLHttpRequest();
    request.open("GET", server, true);
    request.send(); 
    checkbox.disabled = true;
    checkbox.checked =false;  
}

</SCRIPT>
  
  
</head>

<BODY onload="process();">   


   <label> Принудительное освешение: &nbsp; <input id="checkbox" type="checkbox" onclick="Ligntonoff()"/></label>    
   
   </body></html>

Последний раз редактировалось djsidmsps, 29.03.2019 в 19:42.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Калькулятор стоимости услуг. Nik_Dev Элементы интерфейса 4 03.05.2018 16:50
Checkbox переключатель (CSS) не реагирует на данные из AJAX запроса mr_smit AJAX и COMET 10 10.09.2015 05:50
AJAX + Firefox некорректное отображение checkbox shu7 Firefox/Mozilla 2 26.06.2015 14:23
simple ajax checkbox Mick_20 AJAX и COMET 2 25.01.2014 19:55
ajax и checkbox не передается значение pashin76 AJAX и COMET 5 03.10.2013 20:57