При выборке данных с использованием 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 еще небольшой. Заранее благодарю и всех вам благ!!! |
Добавить append() или appendTo();
Очистить html() или remove(). |
Цитата:
$('<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 номера строки |
Часовой пояс GMT +3, время: 08:12. |