0

以下是我当前的代码 TechHunter。当我单击是按钮时，没有任何反应，弹出窗口看起来也没有使用 CSS 格式化。

<?php do { ?>
<div data-userid="<?php echo $row_users['id']; ?>" class="userTableBody">
    <div id="idRow"><?php echo $row_users['id']; ?></div>
    <div id="usernameRow"><?php echo $row_users['username']; ?></div>
    <div id="useremailRow"><a href="mailto:someone@example.com"><?php echo $row_users['email']; ?></a></div>
    <div id="actionRow"><a href="#" class="toPopupButton actionButton">Delete</a></div>
</div> 
<?php } while ($row_users = mysql_fetch_assoc($users)); ?>

<div id="dialog-confirm" title="Delete user?">
    <p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Are you sure you want to delete this user?</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js"> </script>
<script type="text/javascript" src="../include/js/script.js"></script>

这是我在 jsfiddle.net 上从您的示例中获取的 script.js 中的 JQuery 代码位置

$(function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height:250,
      modal: true,
      autoOpen:false,
      buttons: {
        "Yes": function() {
            var $this = $(this);
            $.ajax({
                url:'http://www.example.com/action/deleteUser.php?id='+$( this ).data('userid'),
                success:function(){$this.dialog( "close" )}
            });

        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });

    $( ".toPopupButton" ).click(function() {
        var userid = $(this).parentsUntil('.userTableBody').parent().data('userid');
        console.log(userid);
      $( "#dialog-confirm" ).data('userid',userid).dialog( "open" );
    });
  });

我在这里错过了什么吗？

4

2 回答 2

1

它永远不会起作用，因为您在 php 循环中生成了多个具有相同 ID 的元素。将所有内容转换为基于类或 userId 的元素 ID。

<?php do { ?>
        <div data-userid="<?php echo $row_users['id']; ?>" class="userTableBody">
            <div class="idRow"><?php echo $row_users['id']; ?></div>
            <div class="usernameRow"><?php echo $row_users['username']; ?></div>
            <div class="useremailRow"><a href="mailto:someone@example.com"><?php echo $row_users['email']; ?></a></div>

            <div class="actionRow"><a href="#" class="toPopupButton actionButton">Delete</a></div>
        </div> 


            <!-- Popup window -->
        <div class="toPopup"> 
            <div class="close"></div>
            <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
            <div class="popup_content">
            <p>Are you sure you want to delete this user?</p>
            <a href="action/deleteUser.php?id=<?php echo $row_users['id']; ?>">Yes</a>


            </div> <!--your content end-->
        </div> <!--toPopup end-->

    <?php } while ($row_users = mysql_fetch_assoc($users)); ?>

但我也建议使用 jQueryUI Dialog 即时生成弹出窗口，这将使您的代码更简洁。在这里小提琴：

http://jsfiddle.net/techunter/LtcUX/

于 2013-05-24T14:08:07.240 回答
0

有很多元素匹配这个选择器：

$("#toPopup").fadeIn(0500);

您需要指定要显示的内容。

你可以这样做：

在您的点击处理程序中，更改

loadPopup(); // function show popup

至

loadPopup($(this)); // function show popup

并将 loadPopup() 更改为如下内容：

function loadPopup($elem) { 
        if(popupStatus == 0) { // if value is 0, show popup
            closeloading(); // fadeout loading
            $elem.closest('.userTableBody').next("#toPopup").fadeIn(0500); // fadein popup div
            $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
            $("#backgroundPopup").fadeIn(0001); 
            popupStatus = 1; // and set value to 1
        }   
    }

不过，我建议您稍微重构一下您的代码。为了符合标准，元素 ID 应该是唯一的。您可以向它们添加类以选择它们。

于 2013-05-24T14:02:18.787 回答