Javascript On Click Syntax Error? - javascript

I have a line of javascript which calls a function called "divClicked". But the targeted div is dynamically generated, so I think I need to use an on click function instead. What is wrong with my syntax?
Original line which doesn't work due to dynamically generated content.
$(".js-contentEditable").click(divClicked);
New Line with syntax error
$("#generator").on("click", ".js-contentEditable", function(divClicked);

Well, it certainly is a syntax error, but you're close:
$("#generator").on("click", ".js-contentEditable", divClicked);
When you've already got a defined function and you can reference it by name, then you can pass it to another function just with the name. You only need the function keyword when you're defining a new function. (It occurs to me that when I say, "a new function", I mean a function that didn't exist before. I do not mean a function intended to be used with new; that keyword has nothing to do with the problem at hand here. Don't be confused please :)

Related

VBA IE call a javascript containing 'this' keyword

I am attempting to call a javascript function on a webpage that contains the 'this' keyword which is referring to the <input> textbox on the webpage. The function looks like this:
functiondostuff('hdnAttribute',this,'Key')
Using
js = "functiondostuff('hdnAttribute',this,'Key')"
Call IE.Document.parentWindow.execScript(js)
doesn't throw an error but does not produce the results of the function since this cannot be identified.
Stepping through the website this = [object DispHTMLInputElement] instead of the element name while the function is running. Anyone have any ideas?
Good Morning,
Adding more to this issue. There seems to be two problems, 1st is setting the window.event, functiondostuff begins with: if (window.event && window.event.keyCode == 13), when the function is called it exits out immediately due to the event being null. Is there a way to pass the event as 13 to the website? The second issue is submitting the "this" HTMLInputObject.
Does anyone know a method to fire the 'onkeypress' event? I am at the point of trying sendkeys to avoid calling the function but have not been able to get them to work with IE. Thanks for any suggestions!
Key point is context. If you have this HTML
<input onclick="functiondostuff('hdnAttribute',this,'Key')">
then the browser can infer context from the user interaction and set this for you correctly.
From within VBA that's a slightly different matter and you have to define context manually.
How about this:
Dim js As Variant
js = Array( _
"var input = document.getElementById('yourElementsId');", _
"functiondostuff('hdnAttribute',input,'Key');" _
)
Call IE.Document.parentWindow.execScript(Join(js, vbNewLine))
This way you get to define context yourself.
document.getElementById was just for the sake of the example. If your element has no ID, use any other method (like DOM traversal, document.querySelectorAll, document.getElementsByTagName + a loop, ...) to get a reference to the desired element.

about javascript event handler, it works weird

I am a beginner in javascript. and have no experience in programming, at all.
So I'd like you to be generous to beginner.
And here is my question.
I'm trying to code javascript unobtrusively.
So I put in all of my js codes into external js file. for example : test.js
and deleted these codes. to do unobtrusive js coding. for example :
and I tried to use these 2 methods :
variable.onclick=test(arg1, arg2);
variable.addEventListener('click',test(arg1, arg2),true);
but these triggers didn't work.
to put it delicately, function test(arg1, arg2) worked right after dom loding finished. regardless of activating 'click' trigger.
So I spent several hours solving this problem, and finally got a solution. this is it.
variable.onclick = function(){
variable.addEventListener('click',test('arg1','arg2'),true);
}
I wanna know why first two methods didn't work, and why that solution works well.
I solved the problem, but don't know why, and how...
In JavaScript, when you reference a function by name and follow that reference by a parenthesized list of arguments, that means that you want to call the function, right then and there. Thus a statement like
variable.onclick=test(arg1, arg2);
will assign to the "onclick" property the value obtained by calling the "test" function. In other words that statement means
Please call the function "test" passing it "arg1" and "arg2", and assign whatever it returns to the "onclick" property of the object referenced by "variable".
An event handler must be a function, however, and your "test" handler probably returns either nothing, or something that's not a function. So it didn't work.
Your solution, however, is also incorrect. You're successfully assigning a function to the handler property, but your function is itself installing another event handler. There's no reason to do that here, and in general setting up event handlers from within other event handlers is a suspicious practice. All you need is:
variable.onclick = function() { test(arg1, arg2); };
variable.onclick requires a function declaration by design. In your case you could have just done
variable.onclick = function(){
test(arg1,arg2);
};
The way you did it won't work because you're not giving the click handler any instructions. The corrections I have made say that when the variable (the one with the click handler attached) is clicked trigger this function that will in turn trigger the test function.
Same thing goes for the second one
variable.addEventListener('click', function(){
test(arg1,arg2);
});
This works again because you are saying when this variable is clicked run the function that will trigger the test function.
Basically you are trying to assign the result of running a function, the test function as a task for the click handler to run. This won't work except maybe your test function returns a function that contains code that you want to run when the click event is triggered. Hope this helps.

appendChild returning Cannot read property 'containerDiv' of undefined

I am trying to add a div element to my top level div container, but for some reason I get an error.
Here's my code. It's a button, that once you click, is supposed to add a box on the screen.
To avoid the jQuery bug with this., I defined a variable on top of my class, called self
var self = this;
So this fixes the jQuery bug.
$(this.button).click(function() {
self.newContainer = new divGenerator();
self.containerDiv.parentNode.appendChild(self.newContainer.divContainer);
});
What's really weird is that when I print out
console.log("self.newContainer: "+self.newContainer.containerDiv);
I get "self.newContainer: [object HTMLDivElement]" as the result. And an HTMLDivElement is exactly what I need, right? It's a node, and appendChild() needs a node element. So everythign seems right. But it's not. Why?
It seems to me (and I may be reading this wrong, you'd have to post the internals of divGenerator for me to be certain) that your problem is simply a naming error... a typo if you will. In the following line:
self.containerDiv.parentNode.appendChild(self.newContainer.divContainer);
I notice that you are calling divContainer rather than containerDiv on self.newContainer. Unless you also have a property defined as divContainer, I'm guessing you just need to change the name of your property call to be containerDiv, as is the case in the rest of your code.
Sidebar: I noticed that you mention
To avoid the jQuery bug with this, I defined a variable on top of my class, called self
To the best of my knowledge, there is no such "error" in jQuery. Rather, you are experiencing confusion regarding the usage of this, which is as a keyword referencing the current function context (i.e. the object within which you are currently operating).
Your solution is, in fact, a common idiom within JavaScript, allowing you to refer to an enclosing context by means of a variable assigned to this in the outer scope. I recommend reading this article to clarify your understanding of the this construct and how it can and should be used.

Assignement of a variable inside a concatenation

I have a global variable var num_tab=1;, a function that creates a link a href :
function Addsomething()
{
$("#tout").html("<a style=\""+"margin-left:-20px;"+"\" onClick=\"eval(num_tab=2)\" href=\""+"#tab1"+"\" data-toggle=\""+"tab"+"\">SELECT</a>");
Bla,Bla..
$("#champ1").append('<li id=\"1\" class="champ" onclick="insertAtCaret("sousTab'+num_tab+'");" value=\"1\">1</li>');
}
What i want to do is to create a href that when clicked changes the value of the variable num_tab, but if you can see the href is inside a jquery html(), which makes me confused about how to assign a value to the variable. I almost tried everything: onClick=\"num_tab=2\",onClick=\""+num_tab+"=2\"
Actually i tried something: when i write onclick='num_tab=2;alert("+num_tab+");' i still get the initial value of num_tab, seems it's more like a problem of local and global variable and i can't figure out it yet.
Please don't use eval(). It's insecure and not the appropriate tool for this job. Just assign a function to the onclick:
$("#tout").html("<a onclick='set_num_tab(2)'">); //fill out the rest of this line
function set_num_tab(value) {
num_tab = value;
}
That should give you an idea of how to do it. btw there's no reason you can't use single quotes around an onclick like that.
Alternately, this would work:
$("#tout").html("<a onclick='num_tab=2'">);
But that's pretty messy. I try to avoid inline JavaScript.

Javascript override problem class xml

Not sure what is the problem , this the second post looking for the answer.. but this time with a with the example .
What i'm doing : I 'm implementing a gallery that is getting a xml, and then build me using some javascript code. the problem i tried to call twice gallery.init like :
$(document).ready(function(){
galleryXML.init({
id: "#gallery1"
});
galleryXML.init({
id: "#gallery"
});
})
I expected to have one in #gallery1 other in #gallery. Can someone tell me what the problem(it only happen when i had the loadXml() , so probably something with asynchronous call not sure )?
I think your problem can be that you are using the same variable _P for (what you expect to be) 2 different instances of the galleryXML.
The _P variable is created and initialized when the javascript code is parsed, because of the () after the var galleryXML = function() {...}.
So I guess your problem is going to be solved if you just put the variable inside the init of galleryXML. You can see the code here: jsfiddle.net/rpNab/3/ (notice that now each li is inside each gallery, instead of both li in the last gallery)
EDIT: And I realize that now with my modification the galleryXML module seems ugly (because it only has one method and no variables), so I made a minor refactoring in order to have more methods inside that class, but the methods now must receive the parameter because the class itself continue to be "static", but the parameters can make it act for different contexts. Hope it helps: jsfiddle.net/rpNab/4/

Categories