Consider the HTML :
<html>
<head>
Something...
</head>
<body>
<script>
$('#btnviewdetails').text('Save').button("refresh");
</script>
<button id='btnviewdetails' type='button'>SET</button>
</body>
</html>
When I hit the button , the JS code is not invoked . What am I doing wrong ?
Thanks
You need to bind an event handler on the button. The function will be invoked when the button is pressed.
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
Complete code :
<html>
<head>
<script src="jquery-2.1.0.min.js"></script>
Something...
</head>
<body>
<button id='btnviewdetails' type='button'>SET</button>
<script>
$('#btnviewdetails').bind('click', function() {
$(this).text('Save');
});
</script>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</head>
<body>
<h1 id="popup">dfdfs</h1>
</body>
</html>
i have a simple javascript which shows alert when the h1 id exits ,but i am not getting the alert message.code in jquery also can help.
Put your <script> tag at the end of the body:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Write your script after the element so that it runs after element is present. See the code:
<!DOCTYPE html>
<html>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Plunkr for the same is: "http://plnkr.co/edit/0fznytLHtKNuZNqFjd5G?p=preview"
Because, you're executing the script before document is completely loaded, the element #popup is not found.
Use DOMContentLoaded
Use DOMContentLoaded to check if the DOM is completely loaded.
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
if (document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
Using jQuery ready
Using jQuery, you can use ready method to check if DOM is ready.
$(document).ready(function() {
if ($("#popup").length) {
window.alert("hi");
}
});
Moving script to the end of body
You can move your script to the end of body.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
// Move it here
<script type="text/javascript">
if (document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
Your script is above the h1 element that you're trying to retrieve. Because of this, it is being run before the element actually exists.
Either move the script to the bottom of the page, or wrap it in a jQuery ready block. And consider moving it to an external file.
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
try this easy way. no need of jquery.
<html>
<head>
</head>
<body>
<h1 id="popup">dfdfs</h1>
<script type="text/javascript">
if(document.getElementById("popup")) {
window.alert("hi");
}
</script>
</body>
</html>
It is good practice to use the <script> tags in <body> because it improves the performance by loading it quicker.
And then use
<body>
<script>
$(function() {
if(document.getElementById("popup")) {
window.alert("hi");
}
});
</script>
</body>
Below code gives you solution
$(document).ready(function() {
if (document.getElementById("popup")) {
window.alert("hi");
}
});
So, I created a login page, and then the main home page. i didnot want people to get redirected to the main page after login so i used
$("#login").click(function(){
$.post("homepage.php",function(data){
var title = data.slice(data.indexOf("<title"),data.indexOf("</title>"));
$("html").html(data);
window.history.pushState(data,title,"/homepage.php");
});
});
and this works great but the bug is that in homepage.php i have
$("#something").click(function(){
$("#something-else").fadeToggle();
});
and it doesn't work, it throws an exception
VM8714:3 Uncaught TypeError: Cannot read property 'style' of undefined
But i checked, the click event fires, and i did the
$("#something").click(function(){
var display = document.getElementById("something-else").style.display;
if(display == "none") {
document.getElementById("something-else").style.display = "block";
}
else {
document.getElementById("something-else").style.display = "none";
}
});
and this worked. any ideas?
I tried to reproduce the scene based on the information that you have given, and it worked fine.
login.php:
<!DOCTYPE html>
<html>
<head>
<title>login.php</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#login").click(function(){
$.post("homepage.php",function(data){
var title = data.slice(data.indexOf("<title"),data.indexOf("</title>"));
$("html").html(data);
window.history.pushState(data,title,"/homepage.php");
});
});
});
</script>
</head>
<body>
<button type="button" id="login">Login</button>
</body>
</html>
homepage.php:
<!DOCTYPE html>
<html>
<head>
<title>homepage.php</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#something").click(function(){
$("#something-else").fadeToggle();
});
});
</script>
</head>
<body>
<p id="something-else">something-else</p>
<button type="button" id="something">something</button>
</body>
</html>
The verdict is the root of the problem lies somewhere else.
I want to call a function on my body load. I want to render my html page after getting the response from the function. For example:
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
}
</script>
</head>
<body onload="welcome()">
<p>hai</p>
</body>
I want the hai to be displayed after pressing ok in the alert box. Can anyone help me with this?
You could do something like this:
<head>
<script type="text/javascript">
alert("Welcome");
</script>
</head>
<body>
<p>hai</p>
</body>
This would alert before the body is loaded, then when you clicked 'ok' it would load the body.
You can do it that way:
<html>
<head></head>
<body onload="render()">
<script>
var content = '<h1>Hello, World!</h1>';
function render() {
var answer = confirm('Do you want to render the page?');
if (answer) {
document.body.innerHTML = content;
}
}
</script>
</body>
</html>
And a live demo.
try this
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
}
welcome();
</script>
</head>
<body>
<p>hai</p>
</body>
You could add a class to the body to make contents not visible and remove it after the function is called..
<html>
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
document.body.className = '';
}
</script>
<style type="text/css">
.invisible{visibility:hidden;}
</style>
</head>
<body onload="welcome()" class="invisible">
<p>hai</p>
</body>
</html>
Try this code,
<body onload="welcome()">
<p id='hi'></p>
<script type="text/javascript">
function welcome(){
alert("Welcome");
document.getElementById('hi').innerHTML='hi';
}
</script>
</body>
Kindly notify me I am explaining it well or not. I'm using .append() to repeat a div inside a page.
HTML
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append("<div class='Box'>I'm new box by prepend</div>");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<button id="num">Click Me</button>
/body>
</html>
This works good when I add a div repeatedly. But I like to call it externally like the below code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append($('#Box'));
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
/body>
</html>
Why is this not working?
Try using clone():
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$(".Box:first").clone().appendTo("#form");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
</body>
</html>
You have to create a new element before adding it.
Demo
try this
$(document).ready(function(){
$("#num").click(function () {
$(".Box").first().clone().appendTo("#form");
});
});
Try something like this:-
$("#parent_div").append('<div id="created_div"></div>');
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')"></span>
</body>
</html>
Here, I can't understand why it say always
[ReferenceError: view_more is not defined]
I got the same problem today.
My situation was like this:
.html file:
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div class="lc-form-holder">
<form action="#" method="post">
[...]
<span onclick="myFunction();">NEXT</span>
</form>
</div>
</body>
and .js file:
$(document).ready(function() {
function myFunction() {
console.log('click click');
}
});
When I clicked on <span> I got an error Uncaught ReferenceError: myFuncion is not defined.
But when I do this in .js file (no document.ready):
function myFunction() {
console.log('click click');
}
Everything work just fine.
I don't know is this helpful but I wanna share it if someone check this question in future.
Try this first
<body>
<span onClick="alert('1');"></span>
if the above code works then there must exists others javascript which are actually got error prior to execute your code.
<span onClick="view_more('1')">Test</span>
Add text and then click on text
Working at my end
This is my code --
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')">gfgf</span>
</body>
</html>
EDIT
try using this code --
<html>
<head>
<script type="text/javascript">
function view_more(pg_no)
{
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="javascript:view_more('1');">gfgf</span>
</body>
</html>