Cannot Generate emoji picker for dynamically generated form
Question
I have text-field and button. When the button is clicked, it should generate the text-field with emoji picker enabled. I can see the button but the emoji picker is not getting enabled.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.emojiFace.js"></script>
</head>
<body>
<form class="col-sm-12">
<div id="textfields">
<div id="entireText0">
<div class="form-row">
<div class="col-sm-10">
<div class="form-group">
<label for="textarea0">Question 1</label>
<!--<textarea class="form-control" id="textarea0" rows="2"></textarea>-->
<div class="containers">
<textarea rows="3" id="textarea0" class="form-control faceText" spellcheck="false"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br>
<button type="button" id="button0" class="btn btn-primary" onclick="addTextFields();">Add Questions</button>
</form>
<script>
$(function() {
$('.faceText').emojiInit({
fontSize: 20,
success: function(data) {},
error: function(data, msg) {}
});
});
textareaid = 0;
addButtonid = 0;
function addTextFields() {
textareaid++;
addButtonid++;
var objTo = document.getElementById('textfields');
var divtest = document.createElement("div");
divtest.innerHTML = "<div id='textfields'><div id='entireText" + addButtonid + "'> <div class='form-row'> <div class='col-sm-10'> <div class='form-group'> <label for='textarea" + addButtonid + "'>Question " + (addButtonid + 1) + "</label> <div class='containers'><textarea rows='3' id='textarea" + addButtonid + "' class='form-control faceText' spellcheck='false'></textarea></div></div></div></div></div></div>";
objTo.appendChild(divtest);
$('.faceText').emojiInit();
}
</script>
</body>
</html>
EmojiPicker code(jquery.emojiFace.js):
var option;
(function(c) {
var d = "ƒ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω α β γ δ ε ζ η θ ι κ λ μ ν ξ ο π ρ ς σ τ υ φ χ ψ ω ϑ ϒ ϖ • … ′ ″ ‾ ⁄ ℘ ℑ ℜ ™ ℵ ← → ↓ ↔ ↵ ⇐ ⇑ ⇒ ⇓ ⇔ ∀ ∂ ∃ ∅ ∇ ∈ ∉ ∋ ∏ ∑ − ∗ √ ∝ ∞ ∠ ∧ ∨ ∩ ∪ ∫ ∴ ∼ ≅ ≈ ≠ ≡ ≤ ≥ ⊂ ⊃ ⊄ ⊆ ⊇ ⊕ ⊗ ⊥ ⋅ ⌈ ⌉ ⌊ ⌋ 〈 〉 ◊ ♠ ♣ ♥ ♦".split(" ");
c.fn.emojiInit = function(b) {
option = c.extend({
targetId: "",
fontSize: 14,
faceList: d,
success: function(a) {},
error: function(a, b) {}
}, b);
option.targetId = c(this).attr("id");
b = c(this);
if (void 0 == b || 0 >= b.length) option.error(null, "target object is undefined");
else {
option.fontSize = 20 < option.fontSize ? 20 : option.fontSize;
option.fontSize = 14 > option.fontSize ? 14 : option.fontSize;
var a = "";
option.faceList.forEach(function(b) {
a += "<div onclick='insertAtCaret(\"" + option.targetId + '","' + b + "\",this)' style='font: normal normal normal 14px/1 FontAwesome;cursor: pointer;padding:3px;font-size:" + option.fontSize + "px;width: 20px;display: inline-block;text-align:center;'>" + b + "</div>";
});
b.css("width", "100%");
b.css("padding", "5px 30px 5px 5px");
b.css("box-sizing", "border-box");
b.css("resize", "vertical");
b.parent().css("position", "relative");
b.after("<div id='faceEnter' onclick='showFaceBlock()' style='padding: 5px;position: absolute;right: 0;top: 0;cursor: pointer;font: normal normal normal 14px/1 FontAwesome;'>+</div>");
b.after("<div id='faceBlock' style='background:rgb(216, 216, 216);border-radius: 12px;display: none;position: absolute;border: 1px solid #e2e2e2;padding: 5px;right: -150px;top: 25px;width: 300px;'>" + a + "</div>");
c(document).click(function() {
c("#faceBlock").hide();
});
c("#faceBlock").click(function(a) {
a.stopPropagation();
});
c("#faceEnter").click(function(a) {
a.stopPropagation();
})
}
}
})(jQuery);
function showFaceBlock() {
$("#faceBlock").show();
}
function insertAtCaret(c, d, b) {
try {
$("#faceBlock").hide();
var a = $("#" + c).get(0);
if (document.all && a.createTextRange && a.caretPos) {
var e = a.caretPos;
e.text = "" == e.text.charAt(e.text.length - 1) ? d + "" : d;
} else if (a.setSelectionRange) {
var f = a.selectionStart,
h = a.selectionEnd,
k = a.value.substring(0, f),
l = a.value.substring(h);
a.value = k + d + l;
a.focus();
var g = d.length;
a.setSelectionRange(f + g, f + g);
a.blur();
} else a.value += d;
option.success(b);
} catch (m) {
option.error(b, m);
}
};
I am using this emoji picker:
https://www.jqueryscript.net/text/Unicode-Emoji-Picker-jQuery-emojiFace.html
I can enable the emojipicker for first text-area. But, cannot do it when the text-area is dynamically generated. For instance, "Question 2" text-area is dynamically generated one.
Now, I can see something like this.
2 answers
solution1
0 2018-09-26 11:14:45
You have to loop through each html element with class faceText. Try this;
$('.faceText').each(function(i,v){
$(this).emojiInit({
fontSize: 20,
success: function(data) {},
error: function(data, msg) {}
});
});
Moved some scripts here and there, I didn't notice that addTextFields is being called when a button is clicked;
<script>
textareaid = 0;
addButtonid = 0;
function addTextFields() {
textareaid++;
addButtonid++;
var objTo = document.getElementById('textfields');
var divtest = document.createElement("div");
divtest.innerHTML = "<div id='textfields'><div id='entireText" + addButtonid + "'> <div class='form-row'> <div class='col-sm-10'> <div class='form-group'> <label for='textarea" + addButtonid + "'>Question " + (addButtonid + 1) + "</label> <div class='containers'><textarea rows='3' id='textarea" + addButtonid + "' class='form-control faceText' spellcheck='false'></textarea></div></div></div></div></div></div>";
objTo.appendChild(divtest);
$('.faceText').each(function(i,v){
if($(this).hasClass('done')){
$(this).emojiInit({
fontSize: 20,
success: function(data) {},
error: function(data, msg) {}
});
$(this).addClass('done');
}
});
}
</script>
solution2
0 2019-12-06 13:21:07
Here is your own jquery based emoji picker
<div id="con">
<!-- Component -->
<div class="emojiPicker">
<div class="emojis">
<div class="emojiFrame"><span class="emoji">😜</span></div>
<div class="emojiFrame"><span class="emoji">😁</span></div>
</div>
</div>
<!-- Sample text input -->
<div id="text">
<textarea id="target"></textarea>
</div>
</div>
Script
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".emojiFrame").click(function(){
// target, where emoji will be placed
var target = $("#target");
//emoji will be placed always at end of textbox
target.text(target.text() + $(this).text());
})
})
</script>
Style
<style>
/* page */
body{
box-sizing: border-box;
min-height: 100vh;
margin: 0;
background-color: rgb(202, 193, 193);
}
#con{
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
textarea {
resize: none;
margin-top: 10px;
box-sizing: content-box;
width: calc(100% - 6px);
border: 1px solid black;
}
/* component */
.emojiPicker{
/* 5 emojis in row */
/* width: 212px; */
/* 6 emojis in row */
/* width: 254px; */
/* 7 emojis in row */
width: 296px;
border: 1px solid #0d8cfc;
background-color: aliceblue;
-webkit-box-shadow: 1px 1px 5px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 5px -1px rgba(0,0,0,0.75);
box-shadow: 1px 1px 5px -1px rgba(0,0,0,0.75);
}.emojis{
width: 100%;
display: flex;
flex-wrap: wrap;
}.emojiFrame{
box-sizing: content-box;
user-select: none;
text-align: center;
cursor: pointer;
width: 30px;
font-size: 21px;
padding: 3px;
margin: 3px;
background-color: transparent;
transform: scale(0.9);
transition: background-color 0.2s, transform 0.1s;
}.emojiFrame:hover{
background-color: #0d8cfc;
}.emojiFrame:active{
background-color: #4babff;
transform: scale(0.95);
}
</style>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Clear the form/textarea after submit (emoji-picker with jquery)
Submitting a dynamically generated form
how to use date picker on dynamically generated objects
Dynamically generate a form (html)?
Submitting the dynamically generate form
Passing a dynamically generated form to a controller
POST form dynamically generated inputs
dynamically generated form not working properly
Not receiving dynamically generated form data
php processing a dynamically generated form
Related Tags