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.
Related
I saw this code sinppet in the SAP documantion:
https://help.sap.com/saphelp_nw74/helpdata/en/91/f1454b6f4d1014b6dd926db0e91070/content.htm
I tried to use it in this simple example below.
what I get is this error message in the console:
Uncaught TypeError: sap.ui.core.plugin.DeclarativeSupport.compile is not a function
how do I solve it?
<!Doctype HTML>
<html>
<title>Declarative Programming for SAPUI5 - sample01</title>
<script id='sap-ui-bootstrap'
type='text/javascript'
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-modules='sap.ui.core.plugin.DeclarativeSupport'
>
</script>
<script>
function addButton(){
console.log('addButton');
$("body").append('<div id="button"><div data-sap-ui-type="sap.ui.commons.Button" data-text="This button is added dynamically"></div></div>');
sap.ui.core.plugin.DeclarativeSupport.compile(document.getElementById("button"));
}
setTimeout(addButton,10);
</script>
</head>
</html>
Should work this way:
<!Doctype HTML>
<html>
<title>Declarative Programming for SAPUI5 - sample01</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-modules="sap.ui.core.plugin.DeclarativeSupport">
</script>
<script>
sap.ui.getCore().attachInit(function () {
$("body").append('<div id="button"><div data-sap-ui-type="sap.ui.commons.Button" data-text="This button is added dynamically"></div></div>');
sap.ui.core.DeclarativeSupport.compile(document.getElementById("button"));
});
</script>
</head>
</html>
Live example: https://jsbin.com/gegubuzuni/1/edit?html,output
<!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");
}
});
I'm working on a basic quiz Javascript game, but when I use
document.getElementById("demo").innerHTML = "text";
I get this error message:
Uncaught TypeError: Cannot set property 'innerHTML' of null
in the Chrome Console. I have no idea why this no longer works, it has worked for me in the past. However, if I open up a new
tag, the function runs and the code works. It's only when I run the function in the same
tag.
My code is below:
<!DOCTYPE html>
<html>
<head>
<title>Study Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function quiz() {
var rnd = Math.floor(Math.random() * 4);
document.getElementById("demo").innerHTML = rnd;
}
quiz(); //this one does not work
</script>
</head>
<body>
<p id="qarea"><p>
<p id="demo"></p>
<script>
quiz(); //this one does work
</script>
</body>
</html>
You forgot to include id in front of your ="demo" it should look like <p id="demo"> instead of
<p="demo"></p>
Second the reason the first call to quiz does not work is that your document has not loaded yet. you want to do this on pure js
<body onload="myFunction()">
Like this should work: http://jsfiddle.net/t8jnhmhg/1/ <p="demo" is wrong
It should be the following.
Where you would have to add the id attribute to the p tag.
<!DOCTYPE html>
<html>
<head>
<title>Study Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function quiz() {
var rnd = Math.floor(Math.random() * 4);
document.getElementById("demo").innerHTML = rnd;
}
quiz(); // Will not work here because there is no such
// element with ID "demo" at this point in the page load.
</script>
</head>
<body>
<p id = "qarea"><p>
<p id = "demo"></p>
<script>
document.addEventListener( "DOMContentLoaded", function(){
quiz(); // Will work here because the DOM is loaded at this point.
});
</script>
</body>
</html>
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>
<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>