Question

I have some code where I have a button that I’d like to create a dialog. This dialog will have a textarea in it with some populated data that will be highlighted. I can create the dialog and textarea I’m just not sure how to put the data into the text area and how to highlight it.

<button id="axis-details" onclick="apikey('<?php echo $result_cameras[$i]["camera_hash"]; ?>');">API Key</button>

function apikey(camerahash)
{
var $key = "http://myhost.com/notify.php/" +camerahash;
return $key;
}

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

$('#axis-details').click(function() {
    $dialog.dialog('open');
    // prevent the default action, e.g., following a link
    return false;
});
});

The behavior I want is when someone clicks the button a jquery ui dialog appears. That is easy enough. In the dialog I want a textarea, also easy. The part I can’t figure out is that I want to put a constructed url inside that textarea (the $key variable). Plus that url needs to be highlighted. I can’t figure out how to put that url inside the textarea and how to highlight it.

Thanks in advance.

Answer 1

Which mess we have here! hehehehe

So, first, why you don’t use .append(html) with each part of the html for the dialog? Second, when you want to concatenate strings in javascript, you must use + operator. And third, to prevent the defaul event action, use .preventDefault()

Well, a quick fix in your code and we got this:

$(document).ready(function() {
  var camerahash = '<?php echo $result_cameras[$i]["camera_hash"]; ?>';
  var $dialog = $('<div></div>');
  $dialog.append('<p>Please copy this key for setup:</p>')
         .append('<p><textarea id="textbox">' + apikey(camerahash) + '</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: 'Axis API Key'
  });

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

Now, highlight texts inside textareas, or set any css properties, is not possible… To do it you’ll need an HTML element that accepts HTML content instead TEXT content, like a div, but it will not be editable. So, what you’ll really need is a textarea and a div to have an editable area with a preview area :]