Я выполняю поиск в реальном времени, а затем нажимаю кнопку, страница обновляется, как мне предотвратить это?

ProgramBox

Я выполняю поиск в реальном времени, а затем нажимаю кнопку, страница обновляется, как мне предотвратить это?

Post author:admin
Запись опубликована:12 ноября, 2022
Post category:Вопросы по программированию

#javascript #php #ajax

#javascript #php #аякс

Вопрос:

Я работаю над страницей, где я могу искать имя или фамилию и активно фильтровать (эта часть работает отлично). Как только я найду соответствующую запись, мне нужно будет иметь возможность выполнить действие, используя одну из четырех кнопок, связанных с записью. Все это должно работать без обновления страницы (поэтому я использую ajax). если я не выполняю поиск и не нажимаю одну из четырех кнопок, это работает отлично, и я получаю предупреждение в верхней части страницы без какого-либо обновления, НО когда я выполняю поиск и пытаюсь, страница обновляется, и поэтому я не получаю предупреждение в верхней части страницы, и мой поиск очищается. Я уже подавал другие заявки, и никто мне вообще не помог, так что я очень надеюсь, что на этот раз кто-нибудь сможет помочь.

Я попробовал решения, перечисленные ниже:

Тип = Кнопка: для каждой из кнопок — кнопка вообще не работает в опции поиска
В приведенном выше примере я попытался включить действие отправки в javascript — оно по-прежнему не работает
e.stopPropagation(): страница все еще обновляется
использование $_SESSION[‘msg’]: не отображает предупреждение для параметра без поиска и обновляет страницу для параметра поиска, поэтому мой поиск по-прежнему очищен

Мой код выглядит следующим образом:

Страница поиска

 <?php
include("includes/header.php");
if (isset($_GET['event_id'])) {
    $event_id = $_GET['event_id'];
    $event = new Event($con, $userLoggedIn);
    $eventname = $event->getEventName($event_id);
    $table = $event->getTableName($event_id);
    $guest = new Guest($con, $userLoggedIn);
    // echo "<script>console.log(" . $eventname . ")</script>";
}

$stmt = $con->prepare("SELECT * FROM " . $table);
$stmt->execute();
$result = $stmt->get_result();

?>

<div class="flex-container">
    <div class="stats_details column">
        **... code not related to the question**

    </div>

    <div class="main_column column">
        <?php
        if (isset($_SESSION['msg'])) {
            echo  $_SESSION['msg'];
            unset($_SESSION['msg']);
        } ?>
        <div id="message"></div>
        <hr>
        <div class="form-inline">
            <label for="search" class="font-weight-bold lead text-dark">Search Record amp;nbsp; </label>
            <input type="text" name="search" id="search_text" class="form-control form-control-lg rounded-0 border-primary" placeholder="Search...">
        </div>
        <hr>
        <div class="cards-list" id="table-data">
            <?php while ($row = $result->fetch_assoc()) { ?>
                <div class="card m-2">
                    <div class="card-header <?= $row['checkin_guests'] > 0 ? 'success' : 'deep_blue'; ?> text-muted">
                        Guests: <?= $row['total_guests']; ?> | Checkedin: <?= $row['checkin_guests']; ?>
                    </div>
                    <div class="card-body">
                        <div class="card-title h3"><i class="fas fa-user"></i>amp;nbsp;<?= $row['first_name']; ?> <?= $row['last_name']; ?></div>
                        <p class="card-text"><i class="fa fa-building" aria-hidden="true"></i> amp;nbsp;<?= $row['company']; ?></p>
                        <p class="card-text"><i class="fa fa-at" aria-hidden="true"></i> amp;nbsp;<?= $row['email']; ?></p>
                        <p class="card-text"><i class="fa fa-phone" aria-hidden="true"></i> amp;nbsp;<?= $row['phone']; ?></p>
                    </div>
                    <div class="card-footer default text-muted">
                        <form action="" method="POST" class="action_buttons">
                            <input type="hidden" class="gid" value="<?= $row['id']; ?>">
                            <button class="btn success checkin" data-toggle="tooltip" data-placement="top" title="Checkin"><i class="fas fa-user-check" aria-hidden="true"></i></button>
                            <button class="btn warning" data-toggle="tooltip" data-placement="top" title="Checkout" name="Checkout"><i class="fas fa-user-times" aria-hidden="true"></i></button>
                            <button class="btn info" data-toggle="tooltip" data-placement="top" title="Edit" name="Edit"><i class="fas fa-user-edit" aria-hidden="true"></i></button>
                            <button class="btn danger" data-toggle="tooltip" data-placement="top" title="Cancel" name="Cancel"><i class="fas fa-user-slash" aria-hidden="true"></i></button>
                        </form>
                    </div>
                </div>
            <?php
            }
            ?>
        </div>

    </div>
</div>

</div>
<script type="text/javascript">
    $(document).ready(function() {
        var event = <?php echo $event_id; ?>;


        
        //live search
        $("#search_text").keyup(function() {
            var search = $(this).val();

            $.ajax({
                url: 'action.php',
                method: 'POST',
                data: {
                    query: search,
                    event: event
                },

                success: function(response) {
                    $("#table-data").html(response);
                }
            });
        });

        //checkin

        $(".checkin").click(function(e) {
            e.preventDefault();
            $("#message").html('');
            var $form = $(this).closest(".action_buttons");
            var gid = $form.find(".gid").val();

            $.ajax({
                url: 'action.php',
                method: 'POST',
                data: {
                    gid: gid,
                    checkin: 'checkin',
                    event: event
                },

                success: function(response) {
                    $("#message").html(response);
                    window.scrollTo(0, 0);
                    
                }
            });
        });

    });
</script>

</body>

</html>

action.php

 <?php
require 'config/config.php';
include("includes/classes/User.php");
include("includes/classes/Event.php");
include("includes/classes/Guest.php");

$userLoggedIn = $_SESSION['username'];
$event = new Event($con, $userLoggedIn);
$guest = new Guest($con, $userLoggedIn);


if (isset($_POST['query'])) {
  $output = '';
  $search = $_POST['query'];
  $event_id = $_POST['event'];
  $table = $event->getTableName($event_id);
  $_SESSION['search'] = $search;
  $stmt = mysqli_query($con, "SELECT * FROM `$table` WHERE first_name LIKE '%$search%' OR last_name LIKE '%$search%'");

  if (mysqli_num_rows($stmt) > 0) {
    while ($row = mysqli_fetch_assoc($stmt)) {
      $checked_class = $row['checkin_guests'] > 0 ? "success" : "deep_blue";
      $output .= '
                <div class="card m-2">
                  <div class="card-header ' . $checked_class  . ' text-muted">
                    Guests:' . $row['total_guests'] . ' | Checkedin: ' . $row['checkin_guests'] . '
                  </div>
                  <div class="card-body">
                    <div class="card-title h3"><i class="fas fa-user"></i>amp;nbsp;' . $row['first_name'] . ' ' . $row['last_name'] . '</div>
                    <p class="card-text"><i class="fa fa-building" aria-hidden="true"></i> amp;nbsp;' . $row['company'] . '</p>
                    <p class="card-text"><i class="fa fa-at" aria-hidden="true"></i> amp;nbsp;' . $row['email'] . '</p>
                    <p class="card-text"><i class="fa fa-phone" aria-hidden="true"></i> amp;nbsp;' . $row['phone'] . '</p>
                  </div>
                  <div class="card-footer default text-muted">
                    <form action="" method="POST" class="action_buttons">
                    <input type="hidden" class="gid" value="' . $row['id'] . '">
                    <button class="btn success checkin" data-toggle="tooltip" data-placement="top" title="Checkin"><i class="fas fa-user-check" aria-hidden="true"></i></button>
                    <button class="btn warning" data-toggle="tooltip" data-placement="top" title="Checkout"><i class="fas fa-user-times" aria-hidden="true"></i></button>
                    <button class="btn info" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fas fa-user-edit" aria-hidden="true"></i></button>
                    <button class="btn danger" data-toggle="tooltip" data-placement="top" title="Cancel"><i class="fas fa-user-slash" aria-hidden="true"></i></button>
                    </form>
                  </div>
                </div>
                ';
    }
    echo $output;
  } else {
    echo "<h3>No Records Found</h3>";
  }
}

if (isset($_POST['checkin'])) {
  $event_id = $_POST['event'];
  $table = $event->getTableName($event_id);
  $gid = $_POST['gid'];
  $result = $guest->checkin($event_id, $gid);
  /* $_SESSION['msg'] = '<div class="alert alert-success alert-dismissible mt-2">
      <button type="button" class="close" data-dismiss="alert">amp;times;</button>
      <strong>Guest ' . $gid . ' Checked In Successfully in ' . $table . ' response: ' . $count . '</strong>
      </div>'; */
  
  echo $result;
}

?>

Класс регистрации гостей

  public function checkin($event_id, $id) {
    $table= $this->event_obj->getTableName($event_id);
    $guest_list_query = mysqli_query($this->con, "SELECT checked, checkin_guests FROM " . $table ." WHERE `id`='$id'");
    //echo "<script>console.log(" . $table . ")</script>";
    $count = mysqli_num_rows($guest_list_query);
    //echo "<script>console.log(" . $count . ")</script>";
    /* $_SESSION['msg'] = '<div class="alert alert-success alert-dismissible mt-2">
    <button type="button" class="close" data-dismiss="alert">amp;times;</button>
    <strong>Guest ' . $id . ' Checked In Successfully in ' . $table . ' response: ' . $count . '</strong>
    </div>'; */
    echo '<div class="alert alert-success alert-dismissible mt-2">
    <button type="button" class="close" data-dismiss="alert">amp;times;</button>
    <strong>Guest ' . $id . ' Checked In Successfully in - response rows: ' . $count . '</strong>
    </div>';
  }

1. Чего именно вы хотите достичь? Если ваш пользователь перезагружает страницу, он перезагружает страницу — вы хотите заблокировать это?

2. вы имеете в виду $ («.checkin»).нажмите не работает после поиска фильтра?

3. @NicoHaase когда страница обновляется, это означает, что поле поиска очищено, и вам нужно начать поиск с нуля — также сообщение не отображается, поэтому пользователь не получает уведомления о том, какое действие было выполнено.

4. @RonnySulistio это не работает так, как я требую после фильтра поиска.

Ответ №1:

что я получаю из вашего объяснения, так это то, что $(«.checkin»).нажмите не работает после выполнения поиска, потому что javascript работает только один раз, когда вся страница загружена. когда вы выполните поиск, появится новая кнопка, и javascript не будет вызываться снова, чтобы проверить кнопку в onclick, вот почему ваша кнопка при нажатии не работает.

поэтому я предлагаю вам использовать решение no. 1 Тип = Кнопка: для каждой из кнопок скопируйте свой javascript $(«.checkin»).click, document ready и другие функции / включения, которые необходимо скопировать, чтобы заставить checkin click работать, чтобы action.php

пример: скопируйте это в action.php

 <script type="text/javascript">
    $(document).ready(function() {
        var event = <?php echo $event_id; ?>;

        //checkin

        $(".checkin").click(function(e) {
            e.preventDefault();
            $("#message").html('');
            var $form = $(this).closest(".action_buttons");
            var gid = $form.find(".gid").val();

            $.ajax({
                url: 'action.php',
                method: 'POST',
                data: {
                    gid: gid,
                    checkin: 'checkin',
                    event: event
                },

                success: function(response) {
                    $("#message").html(response);
                    window.scrollTo(0, 0);
                    
                }
            });
        });

    });
</script>

или

все еще используя решение № 1, введите кнопку, затем сделайте свой javascript onclick как функцию вне документа готовой, затем сделайте кнопку onClick (action.php и страница поиска) для вызова этой функции

 } -> end  document ready 
function checkinButton(){


        var $form = $(this).closest(".action_buttons");
        var gid = $form.find(".gid").val();

        $.ajax({
            url: 'action.php',
            method: 'POST',
            data: {
                gid: gid,
                checkin: 'checkin',
                event: event
            },

            success: function(response) {
                $("#message").html(response);
                window.scrollTo(0, 0);
                
            }
        });
}

Кнопка:

 <button onClick="checkinButton()" class="btn success checkin" data-toggle="tooltip" data-placement="top" title="Checkin"><i class="fas fa-user-check" aria-hidden="true"></i></button>

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

как создать базу данных sqlite в исправленном месте

Модель работает на ноутбуке jupyter, но выходит из строя при импорте на Android

Выберите строки, содержащие одинаковые значения