using jquery .html to call function

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.

How to do what? Please take your time to explain all this in detail. — Sparky
– Sparky, Commented Mar 8, 2012 at 3:36

Rafael Verger · Accepted Answer · 2012-03-08 16:50:57Z

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 :]

edited Mar 8, 2012 at 16:50

answered Mar 8, 2012 at 3:48

Rafael Verger

1,77113 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Over a year ago

Thanks, this almost works. My problem is now that is says camerahash is undefined. Am I doing the apikey function correctly?

Rafael Verger Over a year ago

camerahash must be a variable declared before you call the apikey function.. check the answer again..

Collectives™ on Stack Overflow

using jquery .html to call function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related