Забыли пароль?
Запросите новый здесь.

Автор темы: Kanaletto
ID темы: 2131
Информация:
Тема содержит 9 сообщения, была просмотрена 6949 раз.
Просмотр темы
PHP-Fusion Russia » Веб-разработка » Javascript, ajax, jquery
 Распечатать тему
Не работает ajax.
Kanaletto
Всем привет!
При работе с ajax возникла следующая проблема:

Есть график который формируется с помощью библиотеки flot. Данные этого графика содержатся в теге <script type="text/javascript" id="graph-data">, сам этот тег находится не в <HEAD>, а в <BODY>. А настройки графика (весь его код) находятся в следующем теге <script type="text/javascript"> т.е. :
Скачать исходники  Код
<body>
        <script type="text/javascript" id="graph-data">
            var all_data = [{ data: [
             .
             .
             .
             ], color: '#fff'}];
        </script>
        <script type="text/javascript">
            $(document).ready(function(){

              var plot_conf = {
                 series: {
                   lines: {
                     show: true,
                     lineWidth: 2
                   },
                   points:{
                     show: true,
                     radius: 5,
                     fillColor: '#000'
                   }
                 },
                 grid: {
                        color: '#000',
                        borderColor: 'transparent',
                        borderWidth: 10,
                        hoverable: true
                 },
                 xaxis: {
                   mode: "time",
                   color: '#fff'
                 },
                 yaxis: {
                  color: '#fff'
                 }
     
                 .
                 .
                 .
                };
        </script>
</body>




Я хочу с помощью ajax отправить запрос в файл формирующий массив данных для графика. Чтобы он выдал мне другие данные и заново сформировался график.

Вот как описываю ajax:
Скачать исходники  Код
$(function() {
        $("#graph-go").click(function(){

        $("#imgLoad_1").show();
        $("#graph").hide();

        var data_low   = $("#date-low").val();
        var data_heigh = $("#date-heigh").val();

        $.ajax({
               url: "functions/functions-graph.php",
               type: "GET",
               data: ({data_low: data_low, data_heigh: data_heigh}),
               cache: false,
               success: function(response){
                   if(response == 0){ 
                      alert("ERROR");
                      $("#imgLoad_1").hide();
                   } else {
                      $("#graph-data").append(response);
                      $("#imgLoad_1").hide();
                   }
                }
             });
         });
     });




Но после отправки запроса ничего не работает(ранее сформированный график просто исчезает), в чем ошибка?

P.S. Новичек в jquey:)
 
Polarfox
Данные неполные, если это не угадайка на 30к рублев я б не стал угадывать.
Вот это что
var data_low = $("#date-low").val();
var data_heigh = $("#date-heigh").val();

Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
 
Kanaletto
PolarFox написал:

Данные неполные, если это не угадайка на 30к рублев я б не стал угадывать.
Вот это что
var data_low = $("#date-low"ad.val();
var data_heigh = $("#date-heigh"ad.val();


А как должно быть?
 
Polarfox
полный код страницы?
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
 
Kanaletto
Основной файл:

Скачать исходники  Код

<html>
<head>
        <script type="text/javascript">
          $(document).ready(function(){

     $(function() {
        $("#graph-go").click(function(){

        $("#imgLoad_1").show();
        $("#graph").hide();
        $("#graph-data").empty();

        var data_low   = $("#date-low").val();
        var data_heigh = $("#date-heigh").val();

        $.ajax({
               url: "functions/functions-graph.php",
               type: "GET",
               data: ({data_low: data_low, data_heigh: data_heigh}),
               cache: false,
               success: function(response){
                   if(response == 0){ 
                      alert("ERROR");
                      $("#imgLoad_1").hide();
                   } else {
                      $("#graph-data").append(response);
                      $("#imgLoad_1").hide();
                   }
                }
             });
         });
     });
          });
        </script>
<body>
      <div id="graph-background">
        <script type="text/javascript" id="graph-data">
<?
      include('functions/functions-graph.php');
?>
        </script>
        <script type="text/javascript">
            $(document).ready(function(){

              var plot_conf = {
                 series: {
                   lines: {
                     show: true,
                     lineWidth: 2
                   },
                   points:{
                     show: true,
                     radius: 5,
                     fillColor: '#000'
                   }
                 },
                 grid: {
                        color: '#000',
                        borderColor: 'transparent',
                        borderWidth: 10,
                        hoverable: true
                 },
                 xaxis: {
                   mode: "time",
                   color: '#fff'
                 },
                 yaxis: {
                  color: '#fff'
                 }
                };

              for(var j = 0; j < all_data.length; ++j) {
               for(var i = 0; i < all_data[j].data.length; ++i)
                 all_data[j].data[i][0] = Date.parse(all_data[j].data[i][0]);
              }

              function showTooltip(x, y, contents) {
                  $('<div id="graph-tooltip">' + contents + '</div>').css({
                      top: y - 16,
                      left: x + 20
                  }).appendTo('body').fadeIn();
              }
             
              var previousPoint = null;
             
              $('#graph').bind('plothover', function (event, pos, item) {
                  if (item) {
                      if (previousPoint != item.dataIndex) {
                          previousPoint = item.dataIndex;
                          $('#graph-tooltip').remove();
                          var x = new Date(item.datapoint[0]),
                              y = item.datapoint[1];
                              z = x.getMonth() + 1;
                              showTooltip(item.pageX, item.pageY, 'Данные1: ' + y  + '<br> Дата: ' + x.getDate() + '.' + z + '.' + x.getFullYear());
                      }
                  } else {
                      $('#graph-tooltip').remove();
                      previousPoint = null;
                  }
              });
           
              $.plot($("#graph"), all_data, plot_conf);
            });
        </script>

             <div id="graph"></div>
             <img src="Images/icons/loading.GIF" id="imgLoad_1" style="margin-top:10px;">


             <div id="graph-panel">
              <p>Выбор интервала даты:</p>
              <input class="area-date" type="text" name="date-low" id="date-low">
              <input class="area-date" type="text" name="date-heigh" id="date-heigh">
              <input class="graph-go" type="submit" name="go" value="Ok" id="graph-go">
             </div>
</body>
</html>




Содержимое файла functions-graph.php:

Скачать исходники  Код

<?
    //// здесь формируется $data_graph_date и $data_graph_bank, в этой части кода все работает нормально
?>
  var all_data = [{ data: [
<?
  for ($i = 0; $i < $a+1; $i++) {
  echo '["'.$data_graph_date[$i].'",'.$data_graph_bank[$i].'],';
  }
?>
  ], color: '#fff'}];



 
Polarfox
А тут на самом деле варианта всего 2 - либо отправляешь не то, либо принимаешь не то.

Если скрипт получает данные (сервер) - значит отправка ок.
Если на клиенте проблема с получением - значит либо сервер рисует не то, либо на клиенте не проходит получение данных адекватно.

Я бы спросил отладчик (во всех браузерах, даже в осле), потому как по стандарту xml падает после первой же ошибки.
Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
 
Kanaletto
PolarFox написал:

А тут на самом деле варианта всего 2 - либо отправляешь не то, либо принимаешь не то.

Если скрипт получает данные (сервер) - значит отправка ок.
Если на клиенте проблема с получением - значит либо сервер рисует не то, либо на клиенте не проходит получение данных адекватно.

Я бы спросил отладчик (во всех браузерах, даже в осле), потому как по стандарту xml падает после первой же ошибки.


Ну я хочу просто обновить массив данных для графика и чтобы после того как пришел этот массив график просто обновился.

Когда обращаюсь к файлу functions-graph.php (в браузере) он выдает сам массив:
Скачать исходники  Код
var all_data = [{ data: [ ["2013/08/31",10000],["2013/09/01",10800], ], color: '#fff'}];


 
Rush
странный у тя жсон конечно
Скачать исходники  Код
[
   {
      "data":[
         [
            "2013/08/31",
            10000
         ],
         [
            "2013/09/01",
            10800
         ]
      ],
      "color":"#fff"
   }
]



http://jsonformat...ncept.com/

кому то не помешало бы прочитать документацию по жсу, документацию к плагину, ну и банальные вещи по пхп, чтобы жсон который забирается аяксом в броузер не отдавался) иначе не понимаю что тебе можно объяснить, если ты банально ф12 не можешь нажать

Объединено 31.03.2014 19:47:
http://htmlbook.r... тэг скрипт вообще не имеет атрибута id) сломал мозг короче
Изменил(а) Rush, 31.03.2014 17:47
 
Web
Polarfox
Оффтопик Rush, иногда к нему еще и стиль делают, но это мелочи когда проблема не в этом.

Всегда делайте backup перед изменениями | Указывайте свою версию в подписи/профиле. | Вся бесплатная тех. поддержка только на форуме
 

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум:
Похожие темы
Топ 5 пользователей форума
Zaxap Zaxap (1,090)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)   SchreiBear SchreiBear (625)