My question is little bit confuse. I created comment box to post comments in javascript. I am posting every comment using javascript by creating dynamically created elements, attributes and event handlers.
Javascript:
var commentSubmit = document.getElementById("commentSubmit"),
commentBox = document.getElementById("commentBox"),
deleteComment = document.getElementById("deleteComment"),
commentList = document.getElementById("commentList");
function getDataFromLocalStorage(){
var i = 0,
cArr = [],
cKey;
for (; cKey = window.localStorage.key(i); i++) {
var cObj = {};
cObj.cId = cKey;
cObj.cText = window.localStorage.getItem(cKey);
cArr.push(cObj);
}
return cArr;
}
function createElement(name,attr,events,html){
debugger;
var elem = document.createElement(name);
var elemText;
if(html){
for(var i=0;i<html.length;i++){
if(html[i].name == "text"){
elemText = document.createTextNode(html[i].value)
elem.appendChild(elemText);
}else{
elem.appendChild(html[i].value);
}
}
}
if(events){
for(var i=0;i<events.length;i++){
if(events[i]["customFunction"]){
elem.addEventListener(events[i].eventName,events[i]["customFunction"].bind(elem,events[i].eventParams.join(" ")),false);
}
}
}
for(var i=0;i<attr.length;i++){
elem.setAttribute(attr[i].name, attr[i].value);
}
return elem;
}
function deleteComment(cId){
localStorage.removeItem(cId);
loadComments();
}
function loadComments(){
var cComments = getDataFromLocalStorage(),
cTotal = cComments.length;
commentList.innerHTML = "";
if(cTotal){
for(var i=0;i<cTotal;i++){
var deleteCommentButton = createElement("BUTTON",
[
{name:"class",value:"deleteComment"},
{name:"id",value:"deleteComment"},
{name:"value",value:"X"}
],
[
{eventName:"onclick",eventParams:[cComments[i].cId],customFunction:"deleteComment"}
]
);
var commentWrapper = createElement("DIV",
[
{name:"class",value:"commentWrapper"},
{name:"id",value:cComments[i].cId}
],
[
{name:"text",value:cComments[i].cText},
{name:"html",value:deleteCommentButton}
]
);
/*var commentText = document.createTextNode(cComments[i].cText);
commentWrapper.setAttribute("class", "commentWrapper");
commentWrapper.setAttribute("id", cComments[i].cId);
commentWrapper.appendChild(commentText);*/
commentList.appendChild(commentWrapper);
}
}
}
loadComments();
commentSubmit.addEventListener("click", function(e){
var cKey = Date.now();
if(commentBox.value != ""){
localStorage.setItem(cKey,commentBox.value);
loadComments();
}
e.preventDefault();
return false;
}, false);
html:
<div class="commentForm">
<form>
<textarea rows=5 id=commentBox></textarea>
<button id=commentSubmit>Post</button>
</form>
</div>
<div id="commentList">
</div>
my question is
i want to attach deleteComment function to the dynamically created
element. here, i am sending the function name also dynamically. i was
unable to bind function.
here is jsfiddle
thanks in advance.
Don't set the listener to the function name. That's not how it works. Send the function itself:
{eventName:"onclick",eventParams:[cComments[i].cId],customFunction:deleteComment}
Also, depending on what exactly you want, joining the params may also not be what you REALLY want to do.
Additional answer:
Found a bug in your code:
{name:"id",value:"deleteComment"}
You're creating an HTML element (in this case a button) with the same name as a function. This causes the function to be deleted. This is a very weird feature that was introduced by IE that was copied by other browsers for compatibility with IE specific sites. Now it's part of the HTML5 specification :(
To fix this either rename your function or rename the element. See this edit for an example fix: http://jsfiddle.net/pcmyzhqu/10
Related
I am trying to convert a jquery function to vanila js.I don't know the implementation of that function I just want to convert jquery function to javascript . here is my jquery function.
jQuery('button.vjs-share-control').on('touchstart click', function(e) {
e.preventDefault();
if(e.type == "touchstart") {
var embedDiv = jQuery(this).closest('div.bcvideo');
var vid = videojs(embedDiv.data('bcobjid'));
var shareopts = {
"services": setSocialLinks.call(embedDiv)
};
// set share links
vid.social(shareopts);
jQuery('#w10close').removeClass('hidden');
} else if(e.type == "click") {
var embedDiv = jQuery(this).closest('div.bcvideo');
var vid = videojs(embedDiv.data('bcobjid'));
var shareopts = {
"services": setSocialLinks.call(embedDiv)
};
// set share links
vid.social(shareopts);
jQuery('#w10close').removeClass('hidden');
}
});
I covert this function to javascript but I am confused by closest and call function how to convert these jquery function to javascript.
Here is my javascript function (converted jquery function to javascript)
document.querySelector('button.vjs-share-control').addEventListener('touchstart click', function(e) {
e.preventDefault();
if(e.type == "touchstart") {
var embedDiv = document.querySelector(this).closest('div.bcvideo');
var vid = videojs(embedDiv.data('bcobjid'));
var shareopts = {
"services": setSocialLinks.call(embedDiv)
};
// set share links
vid.social(shareopts);
document.querySelector('#w10close').classList.remove('hidden');
} else if(e.type == "click") {
var embedDiv = document.querySelector(this).closest('div.bcvideo');
var vid = videojs(embedDiv.data('bcobjid'));
var shareopts = {
"services": setSocialLinks.call(embedDiv)
};
// set share links
vid.social(shareopts);
document.querySelector('#w10close').classList.remove('hidden');
}
});
is it a right converted function ?
The Element.closest( ) function can be used to get the closest parent which satisfies the query condition. For example, in the below code, I have the tag and a inside the body tag, I have the same class attached to both and the tags.
Please run the below code and read the comments to understand how Element.closest( ) works in this case:
const inputField = document.querySelector('.textbox');
//logging the inputField variable
console.log(inputField);
//This retuns the <h1> because that is the closest parent
//with 'inner-parent' class.
console.log(inputField.closest('.inner-parent'));
//This returns the 'div' element instead of the 'body'
//although both have the same class, that is because <div>
//is closer to input element than the <body>
console.log(inputField.closest('.outer-parent'));
<body class = 'outer-parent'>
<div class='outer-parent'>
<h1 class='inner-parent' >
<input type='text' class='textbox'>
</h1>
</div>
</body>
Also, please note, that the closest( ) function only works on parents, you cannot use it to find parents or siblings directly. However, you can query the parent to get the sibling element if needed.
I understand that onclick() in html with parenthesis calls automatically. But in my situation, I want to pass a parameter into the onclick function(specifically, the element clicked). So how do I manage this without having onclick fired when the page loads? In addition, the onclick method does not fire after its automatically firing upon loading. My code is below:
for (i = 0; i < returnPostPhotoSrcs().length; i++) {
// var photosArray=returnPhotoNames()
// var imgName=photosArray[i]
var imgSrcArray=returnPostPhotoSrcs();
var imgSrc=imgSrcArray[i]
var postNamesArray=returnPostNamesArray();
var postName=returnPostNamesArray[i]
var img=img_create(imgSrc,postName,'')
img.style.width=returnPostHeight();
img.style.height=returnPostWidth();
img.className="postImage";
img.onmousedown=playShout(img);
var postNamesArray=returnPostNames();
var innerSpan = document.createElement('span');
innerSpan.onmousedown=playShout(innerSpan); //problem line
var text = postNamesArray[i];
innerSpan.innerHTML = text; // clear existing, dont actually know what this does
var outerSpan = document.createElement('span');
outerSpan.className="text-content";
outerSpan.onmousedown=playShout(outerSpan); //another problem line, also doesnt call onclick
var li = document.createElement('li');
var imgSpacer=img_create('spacerSource',"spacer",'')
imgSpacer.style.width="25px";
imgSpacer.style.height=returnPostWidth();
li.appendChild(img)
outerSpan.appendChild(innerSpan)
li.appendChild(imgSpacer)
imgSpacer.style.opacity="0"
// if (i>0 && i<returnPostPhotoSrcs().length-1) {
// hackey
var imgSpacer=img_create('spacerSource',"spacer",'')
imgSpacer.style.width="25px";
imgSpacer.style.height=returnPostWidth();
li.appendChild(imgSpacer)
li.appendChild(outerSpan)
imgSpacer.style.opacity="0"
// }
var outerDiv = document.getElementById("postDivOuter");
outerDiv.appendChild(li)
}
Adding onto this you could also do:
img.onmousedown= function(e) { playShout(e) };
//for playshout
playshout = function(e) {
var element = e.target; //this contains the element that was clicked
};
The function fires because you are calling it. You need to use a closure
img.onmousedown= function() { playShout(img) };
As others have shown, you can create an anonymous function, or another option is to use .bind():
innerSpan.onmousedown = playShout.bind(null, innerSpan);
I am trying to remove an object and store it (in case a user wants to retrieve it later). I have tried storing the object in a variable like it says in the thread below:
How to I undo .detach()?
But the detach() does not remove the element from the DOM or store it. I am also not getting any error messages. Here is the code I am using to detach the element:
function MMtoggle(IDnum) {
var rowID = "row" + IDnum;
var jRow = '#' + rowID;
thisMMbtn = $(jRow).find(".addMMbtn");
var light = false;
var that = this;
if (light == false) {
thisMMbtn.bind("click",
function() {
var thisRow = $(this).closest(".txtContentRow");
var thisTxt = thisRow.find(".txtContent");
var cellStr = '<div class = "mmCell prep"></div>';
$(cellStr).appendTo(thisTxt);
$(this).unbind("click");
light = true;
}
);
}
else {
thisMMbtn.bind("click",
function() {
var thisRow = $(this).closest(".txtContentRow");
thisMM = thisRow.find(".mmCell");
SC[rowID].rcbin = thisMM.detach(); //here is where I detach the div and store it in an object
$(this).unbind("click");
light = false;
}
);
}
}
MMtoggle(g.num);
A fiddle of the problem is here: http://jsfiddle.net/pScJc/
(the button that detaches is the '+' button on the right. It is supposed to add a div and then detach it when clicked again.)
Looking at your code I don't think so you need detach for what you are trying to achieve.
Instead try this code.
thisMMbtn.bind("click",
function() {
var thisRow = $(this).closest(".txtContentRow");
var thisTxt = thisRow.find(".txtContent");
var $mmCell = thisTxt.find('.mmCell');
if($mmCell.length == 0){
$mmCell = $('<div class = "mmCell prep"></div>')
.appendTo(thisTxt).hide();
}
$mmCell.toggle();
//$(this).unbind("click");
}
);
Demo
Add multiple items to text-area with duplicate items.
I have one text-area which store data after clicked add data link.
How can i prevent add duplicate items to text-area?
JavaScript call DOM event:
var Dom = {
get: function(el) {
if (typeof el === 'string') {
return document.getElementById(el);
} else {
return el;
}
},
add: function(el, dest) {
var el = this.get(el);
var dest = this.get(dest);
dest.appendChild(el);
},
remove: function(el) {
var el = this.get(el);
el.parentNode.removeChild(el);
}
};
var Event = {
add: function() {
if (window.addEventListener) {
return function(el, type, fn) {
Dom.get(el).addEventListener(type, fn, false);
};
} else if (window.attachEvent) {
return function(el, type, fn) {
var f = function() {
fn.call(Dom.get(el), window.event);
};
Dom.get(el).attachEvent('on' + type, f);
};
}
}()
};
JQuery add data to textarea:
$("#lkaddlanguage").click(function(){
var totalstring;
var checkconstring = $("#contentlng").text();
var strLen = checkconstring.length;
myStr = checkconstring.slice(0,strLen-1);
//alert(myStr);
var checkedItemsArray = myStr.split(";");
var j = 0;
var checkdup=0;
totalstring=escape($("#textval").val()) ;
var i = 0;
var el = document.createElement('b');
el.innerHTML = totalstring +";";
Dom.add(el, 'txtdisplayval');
Event.add(el, 'click', function(e) {
Dom.remove(this);
});
});
HTML Display data
<input type="textbox" id="textval">
<a href="#lnk" id="lkaddlanguage" >Add Data</a>
<textarea readonly id="txtdisplayval" ></textarea>
This seems a very straightforward requirement to me, so I'm not quite clear where you're getting stuck. I have not tried too hard to figure out your existing code given that you are referencing elements not shown in your html ("contentlng"). Also, mixing your own DOM code with jQuery seems a bit pointless. You don't need jQuery at all, but having chosen to include it why then deliberate not use it?
Anyway, the following short function will keep a list of current items (using a JS object) and check each new item against that list. Double-clicking an item will remove it. I've put this in a document ready, but you can manage that as you see fit:
<script>
$(document).ready(function() {
var items = {};
$("#lkaddlanguage").click(function(){
var currentItem = $("#textval").val();
if (currentItem === "") {
alert("Please enter a value.");
} else if (items[currentItem]) {
alert("Value already exists.");
} else {
items[currentItem] = true;
$("#txtdisplayval").append("<span>" + currentItem + "; </span>");
}
// optionally set up for entry of next value:
$("#textval").val("").focus();
return false;
});
$("#txtdisplayval").on("dblclick", "span", function() {
delete items[this.innerHTML.split(";")[0]];
$(this).remove();
});
});
</script>
<input type="textbox" id="textval">
<a href="#lnk" id="lkaddlanguage" >Add Data</a><br>
<div id="txtdisplayval" ></div>
<style>
#txtdisplayval {
margin-top: 5px;
width : 200px;
height : 100px;
overflow-y : auto;
border : 1px solid black;
}
</style>
Note I'm using a div (styled to have a border and allow vertical scrolling) instead of a textarea.
As you can see I've coded it to display an alert for duplicate or empty items, but obviously you could remove that and just ignore duplicates (or substitute your own error handling). Also I thought it might be handy to clear the entry field and set focus back to it ready for entry of the next value, but of course you can remove that too.
Working demo: http://jsfiddle.net/LTsBR/1/
I'm confused.
The only variable that might have duplicates comes from:
var checkedItemsArray = myStr.split(";");
However, checkedItemsArray is not used for anything.
Incidentally, the escape method is deprecated in favour of encodeURIComopnent.
When setting the value of the textarea, do just that: assign to its value property, not to its innerHTML (it can't have markup inside it or any elements, only text nodes).
If you want to check that the members of checkedItemsArray are unique, and you don't mind if they are sorted, you can use a simple function like:
function unique(arr) {
arr.sort();
var i = arr.length;
while (i--) {
if (arr[i] == arr[i - 1]) {
arr.splice(i, 1);
}
}
return arr;
}
Orignal order can be maintained, but it's a bit more code.
I'm trying to convert a JavaScript function that ran off a click event to launch on page load and window resize. As you can see below, I commented out the section governing the click event and added the last line "window.onload," and manually added the class="resizerd" to the element it was working with.
The function isn't running at all. Chrome's Dev tools are showing "Uncaught TypeError: Cannot set property 'prevWidth' of undefined" Did I mess up the syntax somewhere? Any advice for how to launch this on load?
Thank you!
//var clicked = document.getElementById("buttonImportant")
var resizeeContainer = document.getElementById('video_container');
var resizee = resizeeContainer.getElementsByTagName('video')[0];
/*clicked.addEventListener('click',function(){
if( resizeeContainer.className.lastIndexOf("resizerd")>=0 ){
}
else
{
resizeeContainer.className="resizerd";
}*/
myResizerObject.prevWidth = resizee.offsetWidth;
myResizerObject.prevHeight = resizee.offsetHeight;
myResizerObject.Init();
//},false);
myResizerObject.prevWidth = resizee.offsetWidth;
myResizerObject.prevHeight = resizee.offsetHeight;
myResizerObject.Init();
var RESIZER = function(){
this.prevWidth = resizee.offsetWidth;
this.prevHeight = resizee.offsetHeight;
this.resizee = resizeeContainer.getElementsByTagName('video')[0];
this.resizeeContainer = resizee.parentNode;
this.resizeeStyle = this.resizee.style;
var ratio = this.resizee.offsetHeight/this.resizee.offsetWidth;
var that = this;
this.Init = function(){
if( that.resizeeContainer.className.lastIndexOf("resizerd")>=0 )
{
var resizeeContOffsetWidth = that.resizeeContainer.offsetWidth;
var resizeeOffsetWidth = that.resizee.offsetWidth;
var resizeeContOffsetHeight = that.resizeeContainer.offsetHeight;
var resizeeOffsetHeight = that.resizee.offsetHeight;
if(that.prevWidth!= resizeeContOffsetWidth)
{
that.prevWidth = resizeeContOffsetWidth;
var desired = resizeeContainer.offsetHeight/resizeeContainer.offsetWidth;
if(desired>ratio){
that.resizeeStyle.width=resizeeContOffsetWidth*desired+resizeeContOffsetWidth*desired+"px";
that.resizeeStyle.left = -1*(resizeeOffsetWidth-resizeeContOffsetWidth)/2+'px';
}
else{
that.resizeeStyle.cssText="width:100%;height:auto;position:fixed;";
}
}
if(that.prevHeight!=resizeeContOffsetHeight)
{
that.prevHeight = resizeeContOffsetHeight;
var desired = resizeeContOffsetHeight/resizeeContOffsetWidth;
if(desired>ratio){ console.log(ratio);
//that.resizeeStyle.top = '0px';
that.resizeeStyle.left = -1*(resizeeOffsetWidth-resizeeContOffsetWidth)/2+'px';
that.resizeeStyle.width = resizeeContOffsetHeight*desired+resizeeContOffsetHeight/desired+'px';
}
else
{
that.resizeeStyle.top = -1*(resizeeOffsetHeight-resizeeContOffsetHeight)/2+'px';
}
}
}
};
};
var myResizerObject = new RESIZER();
window.onresize = myResizerObject.Init;
window.onload = myResizerObject.Init;
Did you try to execute the function through the <body> tag?
Like:
<body onload="myfunction();">
Try calling the entire resize javascript function in the OnLoad="myfunction();" event of the Body of the page. I have done this to resize the page everytime it loads and it works just fine.
You have this line:
myResizerObject.prevWidth = resizee.offsetWidth;
That is probably giving the error. You've done nothing to declare myResizerObject so it cannot have a property prevWidth.
Somewhere down there you do
var myResizerObject = new RESIZER();
I suspect you want those lines in a more reasonable order :)
Such code should work just fine:
var myResizerObject = new RESIZER();
function UpdateResizerObject() {
var resizeeContainer = document.getElementById('video_container');
var resizee = resizeeContainer.getElementsByTagName('video')[0];
myResizerObject.prevWidth = resizee.offsetWidth;
myResizerObject.prevHeight = resizee.offsetHeight;
myResizerObject.Init();
}
window.onload = function() {
UpdateResizerObject();
};
window.onresize = function() {
UpdateResizerObject();
};
Have it after you define the RESIZER class though.
Your mistake was calling the object instance variable before creating it.
Edit: some basic debug.. add alerts to the function like this:
this.Init = function(){
alert("Init called.. container: " + that.resizeeContainer);
if (that.resizeeContainer)
alert("class: " + hat.resizeeContainer.className);
if( that.resizeeContainer.className.lastIndexOf("resizerd")>=0 )
{
...
}
}
And see what you get.