将php与jquery混合

时间:2012-03-08 19:20:26

标签: php jquery jquery-ui

我使用php构建了一个相机表。因此,在输入时,我有一个查询,提取我需要的所有数据(这是Joomla,因此奇怪的功能):

$query_camera_name = "SELECT camera_name, camera_status, camera_quality, email_notice, camera_hash, camera_type, camera_sensitivity, camera_user, camera_pass, camera_ip, camera_port FROM #__cameras WHERE user_id=".$user->id." AND camera_status!='DELETED'";
$db->setQuery($query_camera_name);
//get number of cameras so we can build the table accordingly
$db->query();
$num_rows = $db->getNumRows();
// We can use array names with loadAssocList.
$result_cameras = $db->loadAssocList();

然后我查看创建一个包含我需要的数据的表(这是缩写):

<?php
for($i=0;$i<$num_rows;$i++)
{
   ?>
...         
<tbody>
<tr data-hash="<?php echo $result_cameras[$i]["camera_hash"]; ?>">
<td>
    <?php echo $result_cameras[$i]["camera_type"]; ?>
</td>
<td>
    <?php echo $result_cameras[$i]["camera_name"]; ?>
</td>
...
<td>
   <button id="axis-details" onclick="apikey('<?php echo $result_cameras[$i]["camera_hash"]; ?>');">API Key</button>
</td>
...
<?php
}
?>

我想创建一个带有textarea和url的jquery ui对话框。对话框很简单:

$(document).ready(function() {
var $dialog = $('<div></div>');
$dialog.append('Please copy this key for camera setup: ')
   .append('<p><textarea id=\"textbox\">'+ENTER URL HERE+'</textarea></p>') 
   .append('<p>For more information see: <a href=\"http://www.myhost.com/forum/2-quickstart-docs\">setup</a></p>');
$dialog.dialog({
  autoOpen: false,
  title: 'API Key'
});

$('#axis-details').click(function(e) {
  e.preventDefault();
  $dialog.dialog('open');
});

});

网址是这样的:

"http://myhost.com/notify.php/" +'<?php echo $result_cameras[$i]["camera_hash"]; ?>';

问题是如何将该url放在jquery代码中(其中显示“ENTER URL HERE”)?我显然不能使用:

<?php echo $result_cameras[$i]["camera_hash"]; ?>

因为这只能在我循环构建html表的PHP代码中解决。任何建议都表示赞赏。

3 个答案:

答案 0 :(得分:2)

Foolowing将“动态”创建对话框

首先,您必须为“axis_details”按钮使用class而不是ID。 ID必须在页面中是唯一的。

你在TR

中的data-has属性中有url
    $('.axis-details').click(function(e) {
        e.preventDefault();
        var url = $(this).closest('tr').data('hash');

        var $dialog = $('<div></div>');
        $dialog.append('Please copy this key for camera setup: ').append('<p><textarea id=\"textbox\">' + url + '</textarea></p>').append('<p>For more information see: <a href=\"http://www.myhost.com/forum/2-quickstart-docs\">setup</a></p>');
        $dialog.dialog({

            title: 'API Key',
            close: function() {
                $(this).remove();
            }
        });

    })

答案 1 :(得分:1)

....
<button class="axis-details" data-url="<?php echo $result_cameras[$i]["camera_hash"] ?>">API Key</button>
....

....
var $dialog = $('<div id="dialog-container"></div>');
$dialog.append('Please copy this key for camera setup: ')
   .append('<p><textarea class="url-container"></textarea></p>') 
   .append('<p>For more information see: <a href="http://www.myhost.com/forum/2-quickstart-docs">setup</a></p>');
....

....
$(".axis-details").on("click", function()
{
    var url = $(this).data("url");

    $("#dialog-container").find(".url-container").val(url);
    $dialog.dialog('open');
});

如果你没有,你必须将对话框div附加到文档(我不确定)

答案 2 :(得分:1)

首先在PHP文件中:

echo '<input type="hidden" value="'.$result_cameras[$i]["camera_hash"].'" class="cameraHash" />';

然后你需要修改你的jQuery代码,以便按照你想要的方式发生追加。

$(document).ready(function() {
  var $dialog = $('<div></div>');
  $dialog.append('Please copy this key for camera setup: ');
  //new code to count each instance found
  var eachLink = $(".cameraHash").val();
  $.each(eachLink, function(index,value){
    $dialog.append('<p><textarea id=\"textbox-'+index+'\">http://myhost.com/notify.php/'+value+'</textarea></p>')   
  });
  //end new code, but change the next .append to $dialog.append
 $dialog.append('<p>For more information see: <a href=\"http://www.myhost.com/forum/2-quickstart-docs\">setup</a></p>');
  $dialog.dialog({
    autoOpen: false,
    title: 'API Key'
});

以上函数获取.cameraHash的每个值。它附加了相同的textarea(我修改了因为ID在你的帖子中不是唯一的,所以我使用了链接的'index'来表示文本框。所以它与值紧密结合)并且它内部使用了值在该特定索引处找到的cameraHash。