how can i attach an event to a class - javascript

I had link and it automatically has a binding with jquery modal window which when i click, it opens the popup, i want to attach another event to it but it is just ignoring my code
i have this in my code just to see if i can execute the command or not, once it does, i want to call a coldfusion function to run
<script type="text/javascript" defer async>
$(document).on('click',".info",function() {
alert("hello");
});
</script>
if i get an hello,
then i am going to do this
<script type="text/javascript" defer async>
$(document).on('click',".info",function() {
<cfoutput>#runmyfunction()#</cfoutput>
});
</script>

Instead of calling another onClick, why not call the function within the existing onClick?
<script type="text/javascript" defer async>
$(document).on('click',".info",function() {
alert("hello");
otherClickFunction();
});
function otherClickFunction() {
<cfoutput>#runmyfunction()#</cfoutput>
}
</script>

Related

Textarea keypress not working

My code won't work. It's supposed to alert whenever a user presses a key while focused inside of a textbox element!
$("#yourcode").keyup(function() {
alert("I found Hogwarts.");
});
You need to wait until the DOM is ready before adding the keyup handler. This can be achieved by calling .ready() after using $() to get a DOM reference to the document (i.e. $(document)). Also make sure you load jQuery before you load the script:
JS:
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#yourcode").keyup(function() {
alert("I found Hogwarts.");
});
});
</script>
HTML:
<textarea id="yourcode"></textarea>
Here is a working example (also available in this jsFiddle):
$(document).ready(function(){
$("#yourcode").keyup(function() {
alert("I found Hogwarts.");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="yourcode"></textarea>

addEventListener() not responding

I have written a small program to pop up an alert on click of a button using an addEventListener() . PFB the code below:
html file
<html>
<head>
<title>name alert</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<input id="p" type="button" value="alert">
</body>
</html>
javascript file
document.getElementById("p").addEventListener("click",greet,true);
function greet(){
alert("hello there !");
}
I dont get a pop up screen this way both the files are in the same folder btw.
test.js loads and executes before the DOM is loaded. So, at that point #p returns null. Try listening to onload event, and add click event.
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("p").addEventListener("click",greet,true);
});
// global scope
function greet(){
alert("hello there !");
}
<input id="p" type="button" value="alert">
try to move your
<script type="text/javascript" src="test.js"></script>
just before
</body>
You need to put the addEventListener inside a function that is called on the load event. As the page is being created it will run the javascript as it comes to it. If it hasn't created the HTML yet, when the addEventListener runs it won't find the 'p' element and it will give you an error.
You can also move the javascript to be after the html, but it's more organized to put it in something like this:
<script type="text/javascript">
window.addEventListener('load', 'function(){pageload()}', false)
function pageload()
{
document.getElementById("p").addEventListener("click",greet,true);
}
</script>

Dissect my jQuery - can't use keyup function to insert number of characters into another textarea

I'm trying to figure out why my jQuery isn't working. I've got jQuery linked to, and then after that, I try to bind to the textarea content. I've used name=content and name=#content both.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$('input[name=content]').bind('keyup',function(){
$('#desctag').val($(this).length)
});
</script>
Why isn't it working?
Code is now:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name=#content]').bind('keyup',function(){
$('#desctag').val($(this).length)
})})
</script>
You need to put it in a document.ready function so it executes when the DOM is ready.
$(document).ready(function() {
$('input[name=content]').bind('keyup',function(){
$('#desctag').val($(this).length);
});
});

How to run JavaScript code before page load?

I have working in asp.net web application. Here I need to run JavaScript before page load.
I have tried:
<body oninit="funinit();" onprerender="funRender();" onload="funload();">
</body>
<script type="text/javascript" language="javascript">
function funinit() {
alert("funinit");
}
function funload() {
alert("funload");
}
function funRender() {
alert("funRender");
}
</script>
here only funload() is working.
You can use window.onpaint for such purpose like :
<script type="text/javascript">
function preloadFunc()
{
alert("PreLoad");
}
window.onpaint = preloadFunc();
</script>
I hope it helps you....
Just inline it?
<script type='text/javascript'>
alert("funload");
</script>
Or put it in a function and call it immediately. Try to put it to the topmost of your page, however since the DOM isnt loaded yet you cant get any other elements.
What is it you want to do?
just insert a <script> tag wherever inside the body you want it to run. it will be executed as soon as the parser reads it, as long as it doesn't reference an element not yet created
try to put your script in head section of the page:
<head>
<script type="text/javascript" language="javascript">
alert("funinit");
alert("funRender");
</script>
</head>
Why not Use the ClientScriptManager.RegisterClientScriptBlock Method
http://msdn.microsoft.com/en-us/library/btf44dc9.aspx

Call a function in javascript on all onclick events

I want to call a function in javascript. I want to call this function on click of every events or at least on click of all the onclick events in the document.
Please let me know how to do this.
<html>
<head>
<script type="text/javascript" language="JavaScript">
<!--
document.onclick = myClickHandler;
function myClickHandler() {
alert("The document was clicked!");
}
-->
</script>
</head>
<body>
click anywhere within this document.
this will fire the handler too!
</body>
</html>

Categories