jqueryとphpを混合する

Question

私は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 
} 
?> 

私はテキストエリアとで満たされた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'); 
}); 

}）;

URLは次のとおりです。

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

問題は、私は（それが「HERE URLを入力してください」と言います）のjQueryコードでそのURLを置くことができる方法ですか？私は明らかに使用することはできません。

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

それが唯一のHTMLテーブルを構築するためのIループPHPコードで解決されているため。どんな提案も感謝しています。

Answer 1

Foolowingはあなたの「axis_details」ボタンの代わりにIDのクラスを使用する必要が

まず「オンザフライ」ダイアログを作成します。 IDはページ内で一意でなければなりません。

あなたはareadyあなたの内のURL TR

データを取得し、あなたの `append`でそれを使用する

$('.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(); 
      } 
     }); 

    }) 

Answer 2

.... 
<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'); 
}); 

あなたがしなかった場合、あなたは文書（私はよく分からない）あなたのPHPファイル内

Answer 3

まずにダイアログのdivを追加する必要があります。

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の各値を取得します。それは同じテキストエリアを追加します（IDはあなたのポストで一意ではないので変更しました。そのため、リンクの 'インデックス'を使ってテキストボックスを表していますので、値と結びつくようになりました）その特定のインデックスで見つかったカメラハッシュの