Passing variable to javascript function with symbols like colon, semicolon, etc

Question

Currently I am stock on this scenario on my current function.

Basically, this ajax call will generate list of emoticons, however I want that when a user clicks on a smiley image, the smiley code will be added to message textbox.

Like for example, when user clicks on smiling image, the :-) code will be added to the message box. My question is, Is it possible to pass the code :-) to a function?

On my current codes, addText(' + key + ') is not working. The value of key is :-). Error says Uncaught SyntaxError: Unexpected token : And when the value is ;) the error is Uncaught SyntaxError: Unexpected token ; I also have :lol: etc. codes similar to that. Any help will be much appreciated.

$.ajax({
    type: "POST",
    async: true,
    cache: false,
    dataType: "json",
    url: "./assets/php/scripts.php",
    data: {command: 'get-smileys'},
    success: function (data) {
        $("#smileys").empty();
        $("#smileys").append("<br>");
        var div_obj = document.createElement("ul");
        $(div_obj).addClass('list-inline');
        $.each(data, function(key, value) {
            $(div_obj).append('<li><div class="col-xs-1 col-sm-1 col-lg-1" style="width:110px; height:80px" align="center"><img src="assets/img/smileys/' + value[0] + '" title="' + value[1] + '" onclick="addText(' + key + ');"><br>' + key + '</div></li>')
            $("#smileys").append($(div_obj)); 
        });
        $("#smileys-flag").text('1');
        $("#loader-chat").hide();
    }
});

And here's the function in adding text part:

function addText(text){
    var fullMessage = $("#message").val();
    $("#message").val(fullMessage + text);
}

@Pekka I tried to add `""` to my code `addText("' + key + '")` and the error now is `Uncaught SyntaxError: Unexpected token }` — LeViNcE, Sep 29 '15 at 03:27

Arun P Johny · Accepted Answer · 2015-09-29T03:26:38.320

4

The problem is you need to pass them as string literals as given below.

'" onclick="addText(\'' + key + '\');"><br>'

But a better solution will be to use a jQuery event handler instead of a inline one like

$(div_obj).append('<li><div class="col-xs-1 col-sm-1 col-lg-1" style="width:110px; height:80px" align="center"><img class="smileys" src="assets/img/smileys/' + value[0] + '" title="' + value[1] + '" data-smiley="' + key + '"><br>' + key + '</div></li>')

then

jQuery(function ($) {
    $("#smileys").on('click', '.smileys', function () {
        addText($(this).data('smiley'))
    });
})

edited Sep 29 '15 at 03:26

answered Sep 29 '15 at 03:22

Arun P Johny

384,651
66
527
531

thanks for this, your first solution works perfect! I updated my definition above, how can I apply jQuery event handler on my updated definition? I don't know much about jQuery event handler – LeViNcE Sep 29 '15 at 03:41
@LeViNcE just make the changes suggested in the second part of the answer... update the each loop content as given above – Arun P Johny Sep 29 '15 at 03:44
Hooray!!! codes are working properly, Thank you very much! By the way if you mind, how can I insert those codes on cursor location? every time I click on smiley, codes are appended on the last part of text, I want to put it on cursor location? Is it possible? thanks – LeViNcE Sep 29 '15 at 03:50
cursor location on textbox, my current codes is even the cursor location is at the start of textbox when I click the smileys, the code `;-)` example is inserted at the last part appending the current texts – LeViNcE Sep 29 '15 at 03:59
1

@LeViNcE have a look at http://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery or http://stackoverflow.com/questions/11076975/insert-text-into-textarea-at-cursor-position-javascript – Arun P Johny Sep 29 '15 at 04:09

score 0 · Answer 2 · answered Sep 29 '15 at 03:25

You need to pass your args as string literals. Then when you are decoding it you can just get the substring you want.

For example:

function takeSmiley(smiley) {
  return smiley.substr(1, smiley.length - 2) // Return lol for :lol:
}

takeSmiley(":lol:");

Passing variable to javascript function with symbols like colon, semicolon, etc

2 Answers2