Calling function from Javascript string - javascript

$("#showloader").replaceWith("<span class='iconexclaim'><img src='images/backupiconexclaim.jpg' /></span><span class='retry-btn' onclick='abc()'>Retry</span>");
function abc() {
alert("abc");
}
The above code is replacing the html with selected element object, but when I click on retry it is showing function is not defined.

you need to bind the click on the span to the document, this code will help you on that.
$("#showloader").replaceWith("<span class='iconexclaim'><img src='images/backupiconexclaim.jpg' /></span><span class='retry-btn' >Retry</span>");
$(document)
.on(
'click',
'.retry-btn',
function() {
alert("I am here") ;
}) ;

If you wrap the abc() inside your head tag or on body load, it will work:
function abc() {
alert("hi");
$("#showloader").replaceWith("<span class='iconexclaim'><img src='images/backupiconexclaim.jpg' /></span><span class='retry-btn' onclick='abc()'>Retry</span>");
}
$(document).ready(function(){
abc();
});
FIDDLE

You need to put that function code block somewhere (above it) before you call .replaceWith or manipulate the dom.

Please Try like this :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("#showloader").replaceWith("<span class='iconexclaim'> <img src='images/backupiconexclaim.jpg' /></span><span class='retry-btn' onClick='abc()'>Retry</span>");
});
function abc(){
alert("abc");
}
</script>
</head>
<body>
<div id='showloader'>helloo world</div>
</body>
</html>

Related

How to pass click location to a function as parameter in JS? [duplicate]

so in my html i have this portion:
<body ondblclick="myfunc();">
<div id="id1">dasd</div>
<div id="id2">dasda</div>
</body>
and in javascript the function is :
function myfunc() {
do stuff here...
}
i want to know inside myfunc() on which element of the html body the doubleclick was made, because i don't want to triger myfunc() on every doubleclicked element
so how can i detect the id of the element doubleclicked?
<body ondblclick="myfunc(event);">
function myfunc(e) {
// e.target -> element that was clicked
}
make your HTML as
<body ondblclick="myfunc(event);">
and make myfunc as:
function myfunc(event) {
alert(event.target.id); //here you can get element id that is double clicked
event.stopPropagation();
}
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>ondblclick event example</title>
<script>
function initElement() {
var body = document.getElementById("bdy");
body.ondblclick = showAlert;
}
function showAlert(e){
alert(e.target.id);
}
window.onload = initElement;
</script>
</head>
<body id="bdy">
<div id="id1">dasd</div>
<div id="id2">dasda</div>
</body>
</html>
you can define different events with use of on or bind suppose..
$("#id").on("doubleClick",function () {} );
so it will know that its double click event..
or for javascript you can use like this
<body ondblclick="myfunc(event);">
function myfunc(event) {
do something..
}

The best way to run a function javascript in page load

please don't duplicate me with: $(document).ready equivalent without jQuery
My question have a little difference. I will explain about this.
I has been put all my function on ready funtion like this.
$(document).ready(function () {
$("#liLanguage").find("a").click(function () {
ChangLanguage(this);
});
// orther a lot of function here
LoadDataToGrid();
}
It's done well
But, yesterday my PM said: "you don't need put your code in the ready function, you can run without ready function, put in ready function is very crazy and stupid."
I has been read more topic about ready function and window.onload() function. But no where say that we can't run a function in ready funtion. What's wrong with my code when i put all function in ready funtion?.
This is better
$(document).ready(function () {
$("#liLanguage").find("a").click(function () {
ChangLanguage(this);
});
}
Or this is better( without ready function)
$("#liLanguage").find("a").click(function () {
ChangLanguage(this);
});
Usually, PMs don't have an engineering background and they like to talk like they do. Try to watch for that.
Now to answer your question, you can simply add your script in the bottom of the HTML instead of in the head. That way your script will load after the DOM is ready each is basically what document.ready does.
I think, you put in ready function will better because it's independent where you put your code. For example:
Example 1:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
Test();
});
function Test() {
$("#test").click(function (){
console.log(2);
})
}
</script>
</head>
<body>
<input type = "button" id ="test" value = "Test">
</body>
</html>
But it will not run if you put code like this.
Example 2:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
Test();
function Test() {
$("#test").click(function (){
console.log(2);
})
}
</script>
</head>
<body>
<input type = "button" id ="test" value = "Test">
</body>
</html>
It will run ok if you put your script after html.
Example 3:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type = "button" id ="test" value = "Test">
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
Test();
function Test() {
$("#test").click(function (){
console.log(2);
})
}
</script>
It's mean: with example 1 you can put javascript any where, you don't need to care about it.

function inside click() get executed after setting the element's click method

<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<script>
function show1(){
$("#btn").click(show2());
window.alert("1st show");
}
function show2(){
$("#btn").click(show3());
window.alert("2nd show");
}
function show3(){
window.alert("3rd show");
}
</script>
<button id="btn" onclick="show1()">Show</button>
</body>
</html>
I dont understand the behavior of the code above. After setting the $("#btn").click(show2());, the function is executed even though I din't clicked the button. Why?
Since these are callbacks, you need to follow this
$("#btn").click(show2);
or this
$("#btn").click(function(){ show2(); });
Otherwise, if you use show2(), you will invoke the function because it will not be a reference to the function.
You need to pass a function reference as the event handler, in your case you are invoking the handle function and is passing the value returned by it as the handler
$("#btn").click(show2);//no () at the end
Demo: Fiddle
Try like this
function show1(){
$("#btn").click(show2);
window.alert("1st show");
}
function show2(){
window.alert("2nd show");
}
Try to catch event by using .on
function show1(){
$("#btn").on("click",show2);
window.alert("1st show");
}
function show2(){
window.alert("2nd show");
}

Declare function inside the body tag leads to "Function not defined"

I render a java script function inside the body tag of my html. After the java script there is a button which calls this function which is declared by the onclick attribute.
<script type="text/javascript">
function f(caller){
console.log('test');
}
</script>
<button onclick="f(this)" type="button">A button</button>
The problem is that it says "ReferenceError: f is not defined". What am I doing wrong?
The following seems to work just fine:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script type="text/javascript">
function f(caller){
console.log('test');
}
</script>
<body>
<button onclick="f(this)" type="button">A button</button>
</body>
</html>
If you are receiving that error, it is probably from somewhere else other than the code you have provided.
Instead of finding the right location for the script within the body tag I would recommend to use the window.onload, function as well as binding the event yourself using addEventListener() inside the script tags within the head tags were it should be or even in an external .js file.
Give your button an id if you want to use getElementById() to select it, similar to this:
window.onload = function () {
var f = function(caller) {
console.log('test');
};
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
f(this);
});
};
DEMO - Using window.onload() and addEventListener()
My Problem was that I wrote
<script type="text/javascript" src="........." />
<script type="text/javascript">
function f(caller){
console.log('test');
}
</script>
but it should be with a </script> tag.
<script type="text/javascript" src="........." ></script>
<script type="text/javascript">
function f(caller){
console.log('test');
}
</script>

Trouble Understanding JQuery fundamentals

Can someone explain why in the below code, $(document).ready(function(){ $("#msgid").html(); }); must be called before I can append to the div with my appender function? If I get rid of that part, and press the button, nothing gets appended to the div, this doesn't make sense to me! I thought JQuery's .html() method just returned the HTML contents of the div, so in my below code it would return nothing, and therefore server no purpose.
CODE:
<script type="text/javascript">
$(document).ready(function(){
$("#msgid").html(); //WHY IS THIS CODE BLOCK NECESSARY?
});
function appender(){
$(document).ready(function(){
$("#msgid").append("appended with the appender() function<br />");
});
}
</script>
This is Hello World by HTML
<div id="msgid">
</div>
<input type="button" id="myButton" value="click me" onclick=appender() />
Thanks in advance!
<script type="text/javascript">
$(document).ready(function(){
$("#msgid").html(""); //This is to clear the html code that is inside #msgid
});
function appender(){
$("#msgid").append("appended with the appender() function<br />");
});
}
</script>
This is Hello World by HTML
<div id="msgid">
</div>
<input type="button" id="myButton" value="click me" onclick=appender() />
Hope that helps
You do not need to have the $(document).ready() inside your function. But also, one of the main benefits of jQuery is its event handling, which allows you to stop using the onclick, onmouseoiver attributes in html.
Try:
$(document).ready(function(){
$("#msgid").click(function() {
//This function will be performed whenever the element with id msgid is clicked
$("#msgid").append("appended by an anonymous function attached to the click event of this element");
})
});
OR
$(document).ready(function(){
$("#msgid").click('appender');
});
function appender()
{
$("#msgid").append("appended with the appender() function<br />");
}
Both will achieve the same end, but naming a function saves repeating code as always.
You can greatly simplify your code this way.
$(function() {
$('#myButton').click(function() {
$("#msgid").append("appended with the appender() function<br />");
return false;
});
});
To do what you want , you can do as below
<script type="text/javascript">
$(document).ready(function(){
$("#msgid").html(''); //WHY IS THIS CODE BLOCK NECESSARY? to empty the contents of the div
$("#msgid").click(function() {
appender();
}); // end of click function
}); // end of document.ready
The below functions behaves like a global function and you can call it from anywhere.
function appender(){
$("#msgid").append("appended with the appender() function<br />");
}

Categories