Question

我使用此代码从数据库中调用名称，并尝试为每个名称创建一个新的Jquery对话框和按钮，其中每个按钮位于first_name下方，姓氏将显示在弹出对话框中。我是否接近或者这种方式甚至可能与我一样？

<!doctype html>
<html lang="en">
<head> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
</head>
<body>
<?php
     $server = 'localhost';
     $user = 'root';
     $pass = 'root';
     $db = 'OCVC';
     $connection = mysql_connect($server, $user, $pass) 
     or die ("Could not connect to server ... \n" . mysql_error ());
     mysql_select_db($db) 
     or die ("Could not connect to database ... \n" . mysql_error ());
     $result = mysql_query("SELECT * FROM members") 
             or die(mysql_error());  
    while($row = mysql_fetch_array( $result )) { 
            $id = $row['id'];               
            $name = $row['first_name'];

            echo $row['first_name'];
            echo '<div id="'.$row['first_name'].'" title="Basic dialog">';
            echo $row['last_name'];
            echo '</div>';
            echo '<button id="'.$row['id'].'">Open Dialog</button>';
    }       
?>
 <script>

var name = "<?php echo $name; ?>";
var id = "<?php echo $id; ?>";
$(function() {
$( "#" + name ).dialog({
autoOpen: false,
show: {
effect: "",
duration: 0
},
hide: {
effect: "",
duration: 0
}
});
$( "#" + id ).click(function() {
$( "#" + name ).dialog( "open" );
});
});
</script>
</body>
</html>

Answer 1

        echo '<div class="popups" id="'.$row['first_name'].'" title="Basic dialog">';
        echo $row['last_name'];
        echo '</div>';
        echo '<button class="showLastname" data-for="'.$row['first_name'].'">Show Last Name</button>';

和jquery

$('.popups').hide();
$(document).on('click','.showLastname',function(){
    var id=$(this).data('for');
    $('#'+id).dialog({
          show: {
              effect: "",
              duration: 0
              },
          hide: {
          effect: "",
          duration: 0
          }
    });
});

每个数据库行的jQuery对话框

1 个答案: