За последние 24 часа нас посетили 17334 программиста и 1194 робота. Сейчас ищут 1363 программиста ...

Не обновляется страница после ajax

Тема в разделе "JavaScript и AJAX", создана пользователем shtrih, 5 окт 2019.

  1. shtrih

    shtrih Активный пользователь

    С нами с:
    10 дек 2015
    Сообщения:
    60
    Симпатии:
    3
    Добрый вечер!

    Есть такая проблема.

    Форма html, в которой есть поля select, количество которых высчитывается из базы и соответственно отображается.

    На этой форме есть кнопка , которая вызывает ajax, который в свою очередь передаёт данный url, где меняется количество полей select. После получения ответа происходит
    window.location = "view_z?id="+result.id;

    По логике вещей, вся страница должна обновится и все компоненты select должны показаться.

    По факту получается, что элементы новые, то показываются, то нет ( приходиться обновлять страницу вручную, если не показались.).

    В чём может быть проблема?

    Код (Javascript):
    1.         function AjaxFormR1(result_id,form_id,url)
    2.         {
    3.                   jQuery.ajax
    4.                   ({
    5.                       url:     url,
    6.                       type:     "POST",
    7.                       dataType: "html",
    8.                       data: jQuery("#"+form_id).serialize(),
    9.                       success: function(response)
    10.                        {
    11.  
    12.                             result = jQuery.parseJSON(response);
    13.                             if (result['type']==='err')
    14.                             {
    15.                                 alert("Ошибка в типе");
    16.                             }
    17.                             else
    18.                             {
    19.  
    20.                                 window.location = "view_zakaz?id="+result.id;
    21.                                
    22.                             }
    23.  
    24.                         },
    25.                         error: function(response)
    26.                         {
    27.                                  
    28.                                   alert("Ошибка выполнения");
    29.                         }
    30.  
    31.                   });
    32.         }

    На форме часть кода выглядит так

    PHP:
    1.  <div id="idhistory2" class="history">
    2.             <?php
    3.             $row = Array();
    4.             $row = $z->selAll(Array(0 => $id, 1 => '0'));
    5.             $i = 1;
    6.             if (!empty($row)) {
    7.  
    8.                 foreach ($row as $mas) {
    9.  
    10.  
    11.                     ?>
    12.                     <div class="form-group" style="background: #dcf1fa;">
    13.  
    14.                         <label for="inputstatus<?php echo $i; ?>">Статус:</label>
    15.                         <select name="status<?php echo $i; ?>" id="inputstatus<?php echo $i; ?>" list="character5"
    16.                                 placeholder="Статус" autocomplete="off"
    17.                                 class="form-control">
    18.  
    19.                             <option selected><?php echo $z->sel_status($mas["status_id"]); ?></option>
    20.                             <?php echo $z->option_status(); ?>
    21.  
    22.                     </div>
    23.                    
    24.                     <?php
    25.                     $i++;
    26.                 }
    27.             }
    28.             ?>
    29.         </div>
    30.        
     
  2. Roman __construct

    Roman __construct Активный пользователь

    С нами с:
    27 апр 2019
    Сообщения:
    1.270
    Симпатии:
    112
    Наверняка консоль в браузере какие-то ошибки выводит если то так то так - чего пишет-то?))
     
  3. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.794
    Симпатии:
    1.330
    Адрес:
    Лень
    синтаксис
     
  4. shtrih

    shtrih Активный пользователь

    С нами с:
    10 дек 2015
    Сообщения:
    60
    Симпатии:
    3
    Если были ошибки я бы написал. Но их к сожалению нет
    --- Добавлено ---
    А что не так?
     
  5. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.794
    Симпатии:
    1.330
    Адрес:
    Лень
  6. shtrih

    shtrih Активный пользователь

    С нами с:
    10 дек 2015
    Сообщения:
    60
    Симпатии:
    3
    жаль что ссылка сразу не на гуггл. Тогда бы я все проблемы решил. Если уж ссылка на документацию, то плиз на конкретный пункт
     
  7. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.794
    Симпатии:
    1.330
    Адрес:
    Лень
    o_O
    Код (Javascript):
    1. result.type
     
  8. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.114
    Симпатии:
    1.244
    Адрес:
    там-сям
    @MouseZver это вполне допустимо

    Screenshot 2019-10-07 at 16.30.06.png
     
  9. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.794
    Симпатии:
    1.330
    Адрес:
    Лень
    @artoodetoo, поражающий свет лучей убунты, повредили ясное мышление
     
  10. shtrih

    shtrih Активный пользователь

    С нами с:
    10 дек 2015
    Сообщения:
    60
    Симпатии:
    3
    это я изменил, но к сожалению ситуация не сдвинулась с мертвой точки. Что ещё можно попробовать?

    В js я не силён, как вы поняли. Может быть нужно использовать console.log , чтобы увидеть все тонкости или и так бы ошибки были?
     
  11. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.794
    Симпатии:
    1.330
    Адрес:
    Лень
    какие элементы ? после ajax скрипта происходят дальнейшие действия, а значит он тут не причем.
    Почему они не обновляются ?
    Кеш с браузера возможен ?
    Элементы чего ?
    --- Добавлено ---
    для рекомендации: советую лучше от корня сайта прописывать путь.
    /index.php?id=3
    --- Добавлено ---
    Так же могу предложить, на бесплатной основе, законектиться по TeamViewer для более действительной помощи. В лс по времени договориться мож.
     
  12. shtrih

    shtrih Активный пользователь

    С нами с:
    10 дек 2015
    Сообщения:
    60
    Симпатии:
    3
    Нашёл информацию, что "по location страница не обновляется. обновляется по reload". Если это так, то получается я не верно делал?
     
  13. MouseZver

    MouseZver Суперстар

    С нами с:
    1 апр 2013
    Сообщения:
    7.794
    Симпатии:
    1.330
    Адрес:
    Лень
  14. shtrih

    shtrih Активный пользователь

    С нами с:
    10 дек 2015
    Сообщения:
    60
    Симпатии:
    3
    Вечер добрый!

    Снова я решил вернуться к этой теме, так как и не достиг результата.

    Выяснил я, что проблема в том, что success ajax выполняется раньше, чем выполняется insert в базу. Не пойму, как сделать, чтобы обновление страницы было после удачного инсерта.

    То есть на странице выводиться количество записей echo $rez->num_rows; Но когда нажимаешь кнопку сохранить, количество записей не верное и чтобы получить верное, надо обновлять страницу вручную. Что я делаю не так? Всё сделал в тестовом режиме, чтобы разобраться.

    Это файл index.php.

    PHP:
    1. <?php
    2. include("db.php");
    3. ?>
    4.  
    5. <!DOCTYPE html>
    6. <html lang="en">
    7. <head>
    8.   <title>Просмотр </title>
    9.   <meta charset="utf-8">
    10.   <meta name="viewport" content="width=device-width, initial-scale=1">
    11.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    12.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    13.      <script type='text/javascript' src='https://code.jquery.com/jquery-3.0.0.min.js' ></script>
    14.     <script src='js/jquery.form.js' type='text/javascript'></script>
    15.     <script type='text/javascript'>
    16.     function AjaxFormRequest(result_id,form_id,url)
    17.     {
    18.  
    19.         $(function() {
    20.  
    21.             jQuery.ajax
    22.             ({
    23.                 url: url,
    24.                 type: "POST",
    25.                 dataType: "json",
    26.                 data: jQuery("#" + form_id).serialize(),
    27.                 success: function (response) {
    28.                     console.log(response);
    29.                     const result = jQuery.parseJSON(response);
    30.  
    31.                     location.reload();
    32.  
    33.  
    34.                 },
    35.                 error: function (response) {
    36.                     alert("Ошибка выполнения");
    37.                 }
    38.  
    39.             });
    40.         });
    41.     }
    42.     </script>
    43. </head>
    44.  
    45.  
    46.  
    47.         <a href="" id="save" onclick="AjaxFormRequest('idhistory', 'formview', 'https://test.ru/test555')"  > <img src="img/save2.jpg"  width="100" height="50" ></a>
    48.      <form id="formview" action="" enctype="multipart/form-data" target="_top" method="post" >
    49.             <input name="test" id="idins" type="hidden" value="123">
    50.          <?php
    51.              $sql="select * from test";
    52.              $rez=$mysqli->query($sql);
    53.  
    54.              echo $rez->num_rows;
    55.  
    56.  
    57.          ?>
    58.       </form>
    59.  
    60.  
    61.  
    62. </body>
    63. </html>
    А это файл https://test.ru/test555 на который ссылается аякс.
    PHP:
    1. <?php
    2. include("db.php");
    3.  
    4.         $sql="insert into `test` (dd) VALUES ('1')";
    5.         //$rez=$mysqli->query($sql);
    6.  
    7.  
    8.         if ($mysqli->query($sql) === True) {
    9.             $rez = array("id" =>111,"resp" =>"1");
    10.             echo json_encode($rez);
    11.             die();
    12.  
    13.         }
     
  15. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.264
    Симпатии:
    405
    @shtrih во первых ajax нужен чтобы не перезагружать страницу.
    Если ты хочешь получить новые данные, их надо вставить куда тебе надо.
    Вот код вставки в js:
    PHP:
    1. <form id="formview" action="" enctype="multipart/form-data" target="_top" method="post" >
    2.             <input name="test" id="idins" type="hidden" value="123">
    3.          <?php
    4.              $sql="select * from test";
    5.              $rez=$mysqli->query($sql);
    6.              echo '<div id="rows">'.$rez->num_rows.'</div>';
    7.          ?>
    8. </form>
    Код (Javascript):
    1. success: function (response) {
    2.   console.log(response);
    3.   let result = jQuery.parseJSON(response); // {"id" : 111,"resp" : "1"}
    4.   $("#rows").html(result.resp);
    5. }
    я хз где тебе там result.id нужен, сам вставишь
     
    #15 Artur_hopf, 21 окт 2019
    Последнее редактирование: 21 окт 2019
  16. shtrih

    shtrih Активный пользователь

    С нами с:
    10 дек 2015
    Сообщения:
    60
    Симпатии:
    3
    Да спасибо, так работает, но опять же, только в том случае, если $("#rows").html выполнится после того, как сделается insert, а если insert долгий, то данные на странице будут не актуальны.

    Например, так

    PHP:
    1. <?php
    2. include("db.php");
    3.  
    4.         $sql="insert into `test` (dd) VALUES ('1')";
    5.         //$rez=$mysqli->query($sql);
    6.  
    7.         sleep(5);
    8.         if ($mysqli->query($sql) === True) {
    9.             $rez = array("id" =>111,"resp" =>"1");
    10.             echo json_encode($rez);
    11.             die();
    12.  
    13.         }

    То есть эмитируем долгий инсерт с помощью sleep на 5 секунд. Как в это случае быть?
     
  17. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.264
    Симпатии:
    405
    Сделай лоадер, чтобы пользователь знал что данные не актуальны, на кой тебе вообще тут js. Не понимаю я логики работы твоего кода.
     
  18. shtrih

    shtrih Активный пользователь

    С нами с:
    10 дек 2015
    Сообщения:
    60
    Симпатии:
    3
    А как сделать, чтобы данные обновились, только выполнения всех инсертов?

    Лоадер это немного не то. Мне просто нужна пауза 1 секунду и после этого обновление
     
  19. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.264
    Симпатии:
    405
    Опиши словами что должно происходить, зачем это вообще все, зачем одна секунда. Что вообще твой код должен делать, на пальцах.
     
  20. shtrih

    shtrih Активный пользователь

    С нами с:
    10 дек 2015
    Сообщения:
    60
    Симпатии:
    3
    Одна секунда, так как не успеваете записаться insert.
    Например,
    При нажатии кнопки Сохранить, в базу добавляется несколько строк, например имена Василий, Сергей, Дмитрий. И их статусы Работает, Не работает, Отпуск. И тут же, когда аякс возвращает, что всё ок, выполняется select.
    И выводиться Input поля с именами всех людей и их статусами.

    Но так как insert может длится немного дольше, то когда аякс сделает $("#rows").html на странице будут не верные сведения
     
  21. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.264
    Симпатии:
    405
    Чушь, аякс вернет значения только когда сделает твой insert, никак не раньше.
     
  22. artoodetoo

    artoodetoo Суперстар
    Команда форума Модератор

    С нами с:
    11 июн 2010
    Сообщения:
    11.114
    Симпатии:
    1.244
    Адрес:
    там-сям
    @shtrih блок success выполняется только после успешного завершения http запроса. а он завершится только после выполнения insert - здесь всё последовательно, а не параллельно.
     
  23. shtrih

    shtrih Активный пользователь

    С нами с:
    10 дек 2015
    Сообщения:
    60
    Симпатии:
    3
    Так я привёл пример со sleep. То есть я делаю слип 5 секунд, а success всё равно выполняется сразу
     
  24. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.264
    Симпатии:
    405
    @shtrih а я тебе еще раз говорю херня, создай 2 этих файла и тести:
    HTML:
    1. <!doctype html>
    2. <html lang="en">
    3.     <meta charset="utf-8">
    4.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    5.     <title>node</title>
    6. </head>
    7. <form method="post">
    8.     <input type="text" class="form-control" name="name">
    9.     <button type="submit" class="btn btn-primary">Отправить</button>
    10. </form>
    11. <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    12. $( "form" ).submit(function( e ) {
    13.     e.preventDefault();
    14.     $.post( 'test_2.php', $(this).serialize(), function( data ){
    15.       console.log(data);
    16.     });
    17. });
    18. </body>
    19. </html>
    PHP:
    1. <?php
    2. $start = date('H:i:s');
    3.  
    4. sleep(5);
    5.  
    6. $end = date('H:i:s');
    7.  
    8. $rez = [ $start, $end ];
    9.  
    10. echo json_encode($rez);
    11. die();
    12. ?>
     
    #24 Artur_hopf, 22 окт 2019
    Последнее редактирование: 22 окт 2019