Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.09.2015, 12:50
Новичок на форуме
Отправить личное сообщение для Bakhit Посмотреть профиль Найти все сообщения от Bakhit
 
Регистрация: 23.08.2013
Сообщений: 5

При выборке данных с использованием selectmenu показываются и предыдущие данные,
Добрый день.
Нужно выводить данные с сервера с заданным интервалом. Запрос посылается на сервер выборкой с использованием selectmenu. При выборках любых следующих строк меню выводятся как последние выбранные так и предыдущие с нарастанием.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
    $("#selectColor").selectmenu({
      width: 300,
      icons:{
        button:"ui-icon-triangle-1-sw"
      }
    });
		
    function start(data) {
			setInterval(function() {
        $.post("test.php", data,  function(json){
          var colors = '';
					$.each(json.colors,function() {
            colors = $(this).attr('color');
          }); 
					$("div.currentData").empty();
          $.each(json.randomData,function() {
            $('<div style="position:relative; left:' + $(this).attr('left') + 'px; top:' + $(this).attr('top') + 'px; color:' + colors + ';">' + 'Число с сервера: ' + $(this).attr('random_data') + '</div>').appendTo('#currentData');
          });
        }, "json");
			},1000);
    }

    $("#selectColor").selectmenu({
      change:function(event,ui) {
        var data = {selectColor: ui.item.value};
				start(data);			
      }
    });
      
    $.post("test.php", function(json){
      var options = '';
      $.each(json.colors,function() {
        options += '<option value="' + $(this).attr('num') + '">' + $(this).attr('color') + '</option>';
      }); 
      $('#selectColor').html(options);    
    }, "json");    
		start();		
  });
</script>   
</head> 
<body>
<div class="ui-widget">
    <div>
        <select id="selectColor"></select>
    </div>
    <div id="imageView" class="imageView" style="width:850px; height:300px; border:1px solid black;">
        <div id="currentData" class="currentData"></div>
    </div>
</div>  
</body>
</html>



<?php
if (version_compare(phpversion(), "5.3.0", ">=") == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);
header("Content-Type: text/html; charset=utf-8");
$random_data = mt_rand(100, 10000);
$random_left = mt_rand(20, 600);
$random_top = mt_rand(20, 200);
$randomData = array(array('random_data'=> $random_data, 'left' => $random_left, 'top' => $random_top));
$colors = array(array('num' => 1, 'color' => 'red'), array('num' => 2, 'color' => 'orange'), array('num' => 3, 'color' => 'yellow'), array('num' => 4, 'color' => 'green'), array('num' => 5, 'color' => 'cyan'), array('num' => 6, 'color' => 'blue'), array('num' => 7, 'color' => 'violet'));
if ($_POST[selectColor]) {
	$numbers = $_POST[selectColor] - 1;
  $colors = array($colors[$numbers]) ;
} 
$selects = array(
    "randomData"  => $randomData,
    "colors"      	 => $colors
);
echo json_encode($selects);
?>


В чем я ошибся в коде не пойму, т.к. опыт работы с javascript, jquery еще небольшой.
Заранее благодарю и всех вам благ!!!

Последний раз редактировалось Bakhit, 07.09.2015 в 12:54.
Ответить с цитированием
  #2 (permalink)  
Старый 07.09.2015, 18:38
Аватар для KupueIIIKo
Профессор
Отправить личное сообщение для KupueIIIKo Посмотреть профиль Найти все сообщения от KupueIIIKo
 
Регистрация: 04.10.2011
Сообщений: 357

Добавить append() или appendTo();
Очистить html() или remove().
Ответить с цитированием
  #3 (permalink)  
Старый 08.09.2015, 06:35
Новичок на форуме
Отправить личное сообщение для Bakhit Посмотреть профиль Найти все сообщения от Bakhit
 
Регистрация: 23.08.2013
Сообщений: 5

Сообщение от KupueIIIKo Посмотреть сообщение
Добавить append() или appendTo();
Очистить html() или remove().
Так в 26 строке HTML кода

$('<div style="position:relative; left:' + $(this).attr('left') + 'px; top:' + $(this).attr('top') + 'px; color:' + colors + ';">' + 'Число с сервера: ' + $(this).attr('random_data') + '</div>').appendTo('#currentData');
применяется appendTo и именно этот код и выполняет вывод на экран

Заметил следующее:
если после 20 оператора HTML поставить
alert (data.selectColor);

выводятся все раннее помеченные select номера строки

Последний раз редактировалось Bakhit, 08.09.2015 в 06:46.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При нажатии на кнопку появляется другой текст ami_moor Общие вопросы Javascript 3 12.06.2015 16:56
Сохранение цвета рамки DIV при нажатии, и сброс при нажатии на другой DIV этого класа Webtest Элементы интерфейса 3 29.06.2014 22:13
Почему скрипт отрабатывает в IE только при первом входе на сайт? tygeddar Элементы интерфейса 3 20.09.2012 01:37