时间戳

首页 > 解决方案 > 在livetable php中重复JS警报

javascript - 在livetable php中重复JS警报

问题描述

我在一个项目中有一个问题，然后：

我有一个代码 php，它使用 mysql 数据生成一个实时表。在右侧，我有一个执行 php 脚本的按钮，以将电子邮件发送到表中相应行中写入的地址。如果我的搜索结果超过 1 行，它会显示这些行，但是如果我单击与我要发送电子邮件的人相对应的按钮，一个 js 脚本会为表中显示的每个人显示一个警报（正确）

这里的php代码：

$output = '';

if(isset($_POST["query"]))
{
    $search = mysqli_real_escape_string($connect, $_POST["query"]);
    $query = "
    SELECT * FROM mytable 
    WHERE Last_Name LIKE '%".$search."%'
    OR First_Name LIKE '%".$search."%'
    OR Number LIKE '%".$search."%' 
    OR Gmail LIKE '%".$search."%' 
    OR Year LIKE '%".$search."%'
    OR Class LIKE '%".$search."%'
    OR Password LIKE '%".$search."%'
    OR School LIKE '%".$search."%'
    ORDER BY Last_Name LIMIT 200";
}
else
{
    $query = "
    SELECT * FROM mytable ORDER BY Last_Name limit 0";
}

$result = mysqli_query($connect, $query);
$rowcount=mysqli_num_rows($result);

if(mysqli_num_rows($result) > 0)
{
    $output .= '<div class="table-responsive well-lg">
                    <table class="table table-hover table-striped table-bordered">
                        <tr>
                            <th class="text-center">Last Name</th>
                            <th class="text-center">First Name</th>
                            <th class="text-center">Student Nr.</th>
                            <th class="text-center">School Email</th>
                            <th class="text-center">Year</th>
                            <th class="text-center">Class</th>
                            <th class="text-center">Password</th>
                            <!--<th class="text-center">Doc.</th>-->
                            <th class="text-center">E-Mail</th>


                        </tr>';
    while($row = mysqli_fetch_array($result))
    {
        $output .= '
            <tr>
                <td class="text-center">'.utf8_encode($row["Last_Name"]).'</td>
                <td class="text-center">'.utf8_encode($row["First_Name"]).'</td>
                <td class="text-center">'.utf8_encode($row["Number"]).'</td>
                <td class="text-center">'.utf8_encode($row["Gmail"]).'</td>
                <td class="text-center">'.utf8_encode($row["Year"]).'</td>
                <td class="text-center">'.utf8_encode($row["Class"]).'</td>
                <td class="text-center">'.utf8_encode($row["Password"]).'</td>



                <!--<td class="text-center" style="width: 60px"><a href="document.php?firstname='.utf8_encode($row["First_Name"]).'&amp;lastname='.utf8_encode($row["Last_Name"]).'&amp;number='.$row["Number"].'&amp;gmail='.$row["Gmail"].'&amp;password='.$row["Password"].'"><img src="images/document.png" width=18px"></a>
                </td>-->
                <td class="text-center" style="width: 60px">
<a class="ajax confirmation" href="mail_'.$row["School"].'.php?firstname='.utf8_encode($row["First_Name"]).'&amp;lastname='.utf8_encode($row["Last_Name"]).'&amp;number='.$row["Number"].'&amp;gmail='.$row["Gmail"].'&amp;password='.$row["Password"].'"><img src="images/gmail_icon.png" width=24px"></a>
                </td>



<script type="text/javascript">
    $(\'.confirmation\').on(\'click\', function () {
        return confirm(\'You are sending the password to ' .$row["Gmail"]. '. Are you sure?\');
    });
</script>






            </tr>


        ';
    }
    echo $output;

在 livetable 中管理输出的 js：

$(document).ready(function(){
    load_data();
    function load_data(query)
    {
        $.ajax({
            url:"fetch.php",
            method:"post",
            data:{query:query},
            success:function(data)
            {
                $('#result').html(data);
            }
        });
    }

    $('#search_text').keyup(function(){
        var search = $(this).val();
        if(search != '')
        {
            load_data(search);
        }
        else
        {
            load_data();            
        }
    });

这是管理警报的代码：

<script>
    $(document).on("click", ".ajax", function(e){
        e.preventDefault();
        var href = $(this).attr('href');
        $.ajax({
            type: "GET",
            dataType : "html",
            url: href,
            success: function (data){
                alert(data);
            }
        });
    });

</script>

如何避免在显示的每一行显示警报并允许仅针对我单击的行显示警报？

请帮助我...谢谢大家... P。

标签： javascriptphpmysql

解决方案

您好 Pablo，欢迎来到 Stack Overflow！

更新的答案：

刚刚在您的代码中发现错误：

while($row = mysqli_fetch_array($result))
{
    $output .= '
    ...
    <script type="text/javascript">
      $(\'.confirmation\').on(\'click\', function () {
        return confirm(\'You are sending the password to ' .$row["Gmail"]. '. Are you sure?\');
      });
    </script>
    ...
'
}

您在循环中定义它，因此创建多个事件侦听器（在您的测试中，2 个条目创建了 2 个侦听器）。弹出窗口中显示的邮件地址基于当前$row['Gmail']条目，这就是为什么您会看到两个不同的邮件地址。脚本块的位置也无效，因为它当前位于结束标记</td>和结束</tr>标记之间。

修改代码以拥有一个侦听器，并提供确认对话框中显示的邮件地址作为“data-”属性。

更改的 PHP 代码：

<td class="text-center" style="width: 60px">
  <a class="ajax confirmation" 
    data-mail='.$row["Gmail"].' 
    href="mail_'.$row["School"].'.php?firstname='.utf8_encode($row["First_Name"]).'&amp;lastname='.utf8_encode($row["Last_Name"]).'&amp;number='.$row["Number"].'&amp;gmail='.$row["Gmail"].'&amp;password='
    .$row["Password"].'">
    <img src="images/gmail_icon.png" width=24px">
  </a>
</td>

JS代码：

完全删除循环中定义的现有侦听器。此侦听器将管理您的警报：

$(document).on("click", ".confirmation", function(e){
    e.preventDefault();
    var mail= $(this).data("mail");
    if (confirm("You are sending the password to " + mail +". Are you sure?")) {
        var href = $(this).attr('href');
        $.ajax({
            type: "GET",
            dataType : "html",
            url: href,
            success: function (data){
                alert(data);
            }
        });

    }
});

更新 2：

正如您指出的那样，有一些东西会导致您的代码中出现循环，并不断显示确认信息。我看不出是什么原因造成的，但这是另一个应该万无一失的替代方案：

在您的 PHP中，将其更改为：

<td class="text-center" style="width: 60px">
  <a onclick="sendMail(\''.$row["Gmail"].'\',\'mail_'.$row["School"].'.php?firstname='.utf8_encode($row["First_Name"]).'&amp;lastname='.utf8_encode($row["Last_Name"]).'&amp;number='.$row["Number"].
    '&amp;gmail='.$row["Gmail"].'&amp;password='.$row["Password"].'\')">
    <img src="images/gmail_icon.png" width="24px">
  </a>
</td>

连同这个JS 函数：

function sendMail(mail, href)
{
    if (confirm("You are sending the password to " + mail +". Are you sure?")) {
        $.ajax({
            type: "GET",
            dataType : "html",
            url: href,
            success: function (data){
                alert(data);
            }
        });

    }
}

推荐阅读