mixing php with jquery - php

Question

I build a table up of cameras using php. So upon entry I have a query that pulls all the data I need (this is Joomla, hence the weird functions):
$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();
I then look through to create a table with the data I need (this is abbreviated):
<?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
}
?>
I'd like to create a jquery ui dialog with a textarea and a url filled in. The dialog is easy:
$(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: setup</p>');
$dialog.dialog({
autoOpen: false,
title: 'API Key'
});
$('#axis-details').click(function(e) {
e.preventDefault();
$dialog.dialog('open');
});
});
The url is this:
"http://myhost.com/notify.php/" +'<?php echo $result_cameras[$i]["camera_hash"]; ?>';
The problem is how can I put that url in the jquery code (where it says "ENTER URL HERE")? I obviously can't use:
<?php echo $result_cameras[$i]["camera_hash"]; ?>
because that is only resolved in the PHP code where I loop to build an html table. Any suggestions are appreciated.

Answer 1

Foolowing will create dialog "on the fly"
First you have to use class instead of ID for your "axis_details" button. ID's must be unique in a page.
You aready have url in your data-has attribute in TR
$('.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: setup</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: setup</p>');
....
....
$(".axis-details").on("click", function()
{
var url = $(this).data("url");
$("#dialog-container").find(".url-container").val(url);
$dialog.dialog('open');
});
if you didn't, you have to append the dialog div to the document (i'm not sure)

Answer 3

First in your PHP file:
echo '<input type="hidden" value="'.$result_cameras[$i]["camera_hash"].'" class="cameraHash" />';
Then you need to modify your jQuery code so the appends happen the way you intend.
$(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: setup</p>');
$dialog.dialog({
autoOpen: false,
title: 'API Key'
});
The above function grabs each value of .cameraHash. It appends the same textarea (which I modified because the ID isn't unique in your post, so I used the 'index' of the links to represent the textbox. so that it's cohesive with the values) and inside of it uses the value of the cameraHash found at that specific index.