За последние 24 часа нас посетили 20280 программистов и 1096 роботов. Сейчас ищут 339 программистов ...

Перезагрузка страницы после отправки формы или нажатию sumbit

Тема в разделе "PHP для новичков", создана пользователем WaleraPP, 25 сен 2017.

  1. WaleraPP

    WaleraPP Новичок

    С нами с:
    25 сен 2017
    Сообщения:
    11
    Симпатии:
    0
    Есть index.php который выводит таблицу и на нем расположена кнопка "sumbit" которая отправляет форму в delete.php и удаляет строки отмеченные с помощью "checkbox".Проблема в том что после отправки страница не обновляется , если нажать обновить в браузере "обновить" удаленные строки исчезают но при этому выделенные "checkbox" остаются. Помогает только перезагрузка страницы (и "checkbox" сбрасываются и строки исчезают). Как правильно сделать перезагрузку ?
    PHP:
    1. <head>
    2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    3. <title>Документ без названия</title>
    4.  
    5.  
    6.  
    7. <script type="text/javascript" src="http://yandex.st/jquery/2.1.0/jquery.min.js"></script>
    8. <script type="text/javascript" language="javascript">
    9.     function call() {
    10.       var msg   = $('#forms').serialize();
    11.         $.ajax({
    12.           type: 'POST',
    13.           url: 'delete.php', // Если обработчик лежит не рядом с формой, то здесь следует указать полный путь до него. Например http://example.com
    14.           data: msg,
    15.           success: function(data) {
    16.             $('#results').html(data);
    17.           },
    18.           error:  function(xhr, str){
    19.                 alert('Возникла ошибка: ' + xhr.responseCode);
    20.             }
    21.              
    22.         });
    23.     }
    24.     function add() {  
    25.   location.reload();
    26. }
    27. </script>
    28.  
    29.  
    30.  
    31. <?php
    32.  
    33. // Подключение login.php
    34. require_once 'login.php';
    35.  
    36. // Соединение с базой данных
    37. $db_server = mysqli_connect($db_hostname, $db_username, $db_password);
    38. if (!$db_server) die("Невозможно подключиться к MySQL: " . mysqli_error());
    39.  
    40. mysqli_query($db_server,"SET NAMES utf8");
    41.  
    42. //Выбор базы данных
    43. mysqli_select_db($db_server, $db_database)
    44. or die ("Невозможно выбрать базу данных: " . mysqli_error());
    45.  
    46. // Сам запрос SQL
    47.  
    48. $query = "SELECT id,ip_addr,namepc,pass, passadm FROM vlc ORDER BY ip_addr ";
    49.  
    50.  
    51. // Выводим таблицу на экран
    52. $result = mysqli_query($db_server, $query);
    53.  
    54. echo '<table border="1">';
    55. echo '<thead>';
    56.   echo '<tr>';
    57. echo '<th>ID</th>';
    58.   echo '<th>IP</th>';
    59.   echo '<th>Имя ПК</th>';
    60.   echo '<th>Пароль</th>';
    61.   echo '<th>Пароль администратора</th>';
    62.   echo '</tr>';
    63.   echo '</thead>';
    64.   echo '<tbody>';
    65.  
    66.  
    67.  
    68. ?><form method="POST" id="forms" action="javascript:void(null);" onsubmit="call()"><?php
    69. echo '<input  type="submit" action="index.php" name="submitForm" value="Удалить отмеченные" />';
    70. while($data = mysqli_fetch_array($result))
    71. {
    72.     echo '<tr>';
    73.     echo '<td>' . $data['id'] . '</td>';
    74.     echo '<td>' . long2ip ($data['ip_addr']) . '</td>';
    75.     echo '<td>' . $data['namepc'] . '</td>';
    76.     echo '<td>' . $data['pass'] . '</td>';
    77.     echo '<td>' . $data['passadm'] . '</td>';
    78.     echo "<td width='10px'><input type='checkbox' name='check[]' value=". $data['id'] ."></td>";
    79.     echo '</tr>';
    80. }
    81. ?></form><?php
    82. ?>



    Код (Text):
    1.  
    2.  
    3. <?php
    4.  
    5. require_once 'login.php';
    6. $db_server = mysqli_connect($db_hostname, $db_username, $db_password);
    7. if (!$db_server) { echo "Текст ошибки error: " . mysqli_connect_error() . PHP_EOL; exit; }
    8. mysqli_select_db($db_server, $db_database);
    9. foreach ($_POST['check'] as $item)
    10. {
    11. $query = "DELETE FROM vlc WHERE id = $item";
    12. $result = mysqli_query($db_server, $query);
    13.  
    14. }
    15.  
    16.  
    17.  
    18. ?>
     
  2. acso

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

    С нами с:
    15 апр 2010
    Сообщения:
    150
    Симпатии:
    25
    Адрес:
    Одесса
    Ну так скажите браузеру, что, после получения ответа от аякса, всем чекбоксам с "галочками" нужно их убрать:
    Код (Javascript):
    1. success: function(data) {
    2.   $('#results').html(data);
    3.   $('#forms input:checkbox:checked').attr('checked', false);
    4. },
    И замените <form method="POST" id="forms" action="javascript:void(null);" onsubmit="call()"> на <form id="forms" method="post" onsubmit="call(); return false"> - так покрасившей будет)
     
    #2 acso, 25 сен 2017
    Последнее редактирование: 25 сен 2017
  3. WaleraPP

    WaleraPP Новичок

    С нами с:
    25 сен 2017
    Сообщения:
    11
    Симпатии:
    0
    Не подскажите в какую часть именно это нужно будет вставить ? А то котелок совсем перестал варить
     
  4. acso

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

    С нами с:
    15 апр 2010
    Сообщения:
    150
    Симпатии:
    25
    Адрес:
    Одесса
    В Ваш success добавьте мою строчку.
     
  5. WaleraPP

    WaleraPP Новичок

    С нами с:
    25 сен 2017
    Сообщения:
    11
    Симпатии:
    0
    Код (Javascript):
    1.  function call() {
    2.       var msg   = $('#forms').serialize();
    3.         $.ajax({
    4.           type: 'POST',
    5.           url: 'delete.php', // Если обработчик лежит не рядом с формой, то здесь следует указать полный путь до него. Например http://example.com
    6.           data: msg,
    7.           success: function(data) {
    8.             $('#results').html(data);
    9.             $('#forms input:checkbox:checked').attr('checked', false);  
    10.           },
    11.           error:  function(xhr, str){
    12.                 alert('Возникла ошибка: ' + xhr.responseCode);
    13.             }
    14.              
    15.         });
    16.     }
    17.     function add() {  
    18.   location.reload();
    19. }
    20. </script>
    Вставил вот так. Не помогло, checkbox остаются на месте
     
  6. acso

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

    С нами с:
    15 апр 2010
    Сообщения:
    150
    Симпатии:
    25
    Адрес:
    Одесса
    onsubmit="call(); return false"
     
  7. WaleraPP

    WaleraPP Новичок

    С нами с:
    25 сен 2017
    Сообщения:
    11
    Симпатии:
    0
    Неа, воз и ныне там. А можно как то сказать браузеру, что, после получения ответа от аякса перезагрузить страницу ?
     
  8. acso

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

    С нами с:
    15 апр 2010
    Сообщения:
    150
    Симпатии:
    25
    Адрес:
    Одесса
    Код (Javascript):
    1. // ...
    2. document.location.reload();
    --- Добавлено ---
    Посмотрите сюда, накидал тест: http://acso.com.ua/test/chk_boxes.php
    Все работает.
    --- Добавлено ---
    Это писец! А где у Вас элемент с id="results"?
     
  9. WaleraPP

    WaleraPP Новичок

    С нами с:
    25 сен 2017
    Сообщения:
    11
    Симпатии:
    0
    Прошу прощения, а можно для тех кто в танке чуть подробнее ?
     
  10. acso

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

    С нами с:
    15 апр 2010
    Сообщения:
    150
    Симпатии:
    25
    Адрес:
    Одесса
    Ок. Вот тут:
    Код (Javascript):
    1. success: function(data) {
    2.   $('#results').html(data);
    3.   $('#forms input:checkbox:checked').attr('checked', false);
    4. },
    в случае удачи аякс отдает Вам результаты работы скрипта delete.php, которые Вы пытаетесь скормить несуществующему на странице элементу. Нужно добавить на страницу что-то типа этого: <div id="results"></div>
    Следующий момент:
    HTML:
    1. <script type="text/javascript" src="http://yandex.st/jquery/2.1.0/jquery.min.js"></script>
    2. // я бы заменил на
    3. <script src="http://code.jquery.com/jquery-latest.js"></script>
    4. // или на
    5. <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
    А вообще включите консоль (в хроме это комбинация Ctrl-Shift-i) и смотрите, что происходит на странице, в т.ч. ошибки js. Например, можно после получения данных аяксом прописать console.log(data) и увидеть полученный результат в консоли.
     
  11. WaleraPP

    WaleraPP Новичок

    С нами с:
    25 сен 2017
    Сообщения:
    11
    Симпатии:
    0
    Если я верно понял, то ...$('#results').html(data) - это штука выводит результат работы скрипта (тобишь моя таблица с уже удаленными строками) ? И мне нужно где нибудь в конце скрипта добавить блок div куда этот результат и записывается ?
     
  12. acso

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

    С нами с:
    15 апр 2010
    Сообщения:
    150
    Симпатии:
    25
    Адрес:
    Одесса
    Никакая таблица не возвращается, по крайней мере я этого не увидел в скрипте delete.php. Короче, если я правильно понимаю, попробуйте так:
    Код (Javascript):
    1. success: function(data) {
    2.   document.location.reload();
    3. },
    перед function call() { напишите:
    Код (Javascript):
    1. $(document).ready(function(){
    2.   $('#forms input:checkbox:checked').attr('checked', false);
    3. });
    В итоге, после успешного аякса, страница будет перезагружена. При загрузке страницы мы говорим браузеру, что все чекбоксы с "галочками" должны эти "галочки" убрать.
    Также для формы нужно указать
    HTML:
    1. <form method="POST" id="forms" onsubmit="call(); return false" autocomplete="off">
     
    WaleraPP нравится это.
  13. WaleraPP

    WaleraPP Новичок

    С нами с:
    25 сен 2017
    Сообщения:
    11
    Симпатии:
    0
    Спасибо большое, заработала хреновина.
    Имеет вот такой вид у меня
    Код (Javascript):
    1. <script src="http://code.jquery.com/jquery-latest.js"></script>
    2. <script type="text/javascript" language="javascript">
    3.          $(document).ready(function(){
    4.          $('#forms input:checkbox:checked').attr('checked', false);
    5. });
    6.     function call() {
    7.       var msg   = $('#forms').serialize();
    8.         $.ajax({
    9.           type: 'POST',
    10.           url: 'delete.php',
    11.           data: msg,
    12.           success: function(data) {
    13.             document.location.reload();
    14.           },
    15.           error:  function(xhr, str){
    16.                 alert('Возникла ошибка: ' + xhr.responseCode);
    17.             }
    18.            
    19.         });
    20.     }
    21. </script>