I have the following html in page:
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
function hideIt() {
$(this).hide("slow");
return true;
}
</script>
</head>
<body>
<div onclick="hideIt();">
hello world
</div>
</body>
When I click on the div, it results in the following JavaScript error:
Line: 53
Error: 'this[...].style' is null or not an object
Any solutions?
There are no definition to this object in that scope.
Use selectors instead:
<div class="ready_to_hide">
hello world
</div>
$('.ready_to_hide').click(function(){
$(this).hide();
});
this refers to the current object. For your code to work you have to pass a reference to the div element by passing this inside the function call.
The main advantage of using jQuery is to separate markup and script. So you won't write event handlers inside the markup. You can write event handlers only after the DOM is ready.
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(function(){
$("#divToHide").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div id="divToHide">
hello world
</div>
</body>
A detailed reading on Unobtrusive JavaScript
This should fix it
<div onclick="hideIt(this);">
and
function hideIt(o) {
$(o).hide("slow");
return true;
}
$(this) will only be your DIV if you bind the event with jQuery:
$('#myDiv').click(hideIt);
The way you're doing it, you need to pass a reference to the object:
<div onclick="hideIt(this);">
and use that in your function:
function hideIt(obj) {
$(obj).hide("slow");
return true;
}
Try this:
<script>
function hideIt(item) {
$(item).hide("slow");
return true;
}
</script>
<div onclick="hideIt(this);">
hello world
</div>
Related
I'm trying to change the text of h2 , when the user clicks a button.
Javascript :
$("#GoButton").click(function() {
$("#myDiv").html("Hello World");
});
and the html :
GO
I have tried to switch links so jQuery will load first (that solved another problem).
Still can't find what im doing wrong.
Also tried :
$("#GoButton").click(function() {
$("#myDiv").innerHtml("Hello World");
});
You need ensure if DOM is loaded already using $(function(){.. }); and prevent default behaviour of link using e.preventDefault()
$(function(){
$("#GoButton").click(function(e) {
e.preventDefault();
$("#myDiv").html("Hello World");
});
});
Demo
Your javascript (binding a function on the click) may be executed too early, like in this example : http://jsfiddle.net/ug7f0te1/
Try binding events after the DOM is fully loaded:
$(function(){
$("#GoButton").click(function() {
$("#myDiv").html("Hello World");
});
});
This should work for you
$("#myDiv").html("Hello World");
here is the code http://jsfiddle.net/utkarshk/h0vmmdn8/
HTML:
<div id="mydiv">fd</div>
<h2 id="mydiv1">4343</h2>
GO
JS.
$("#GoButton").click(function() {
$("#mydiv1").html("Hello World");
$("#mydiv").html("Hello World");
});
Might be clearer if you post all your HTML. From a guess, here's something which does what I think you want:
<html>
<body>
<div id="myDiv">
<h2 id="myHeader">Click Go</h2>
<p>GO</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("#GoButton").click(function() {
$("#myHeader").html("Hello World");
});
});
</script>
</body>
</html>
if you just want to change text than you can make use of text() not of html() method
$("#myDiv").text("Hello World");
Update
this is working you need to do proper setting for this in jquery : http://jsfiddle.net/0oc53fdd/5/
<!DOCTYPE html>
<html>
<script type="text/javascript">
function here()
{
//alert(document.getElementById("myHeader").innerHTML);
document.getElementById("myHeader").innerHTML = "Hello World";
}
</script>
</head>
<body>
<div id="myDiv">
<h2 id="myHeader">Header</h2>
<button id="GoButton" onclick="here();">GO</button>
</div>
</body>
</html>
Hope you can get something from it.
With the following piece of code:
<html>
<head>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$j = JQuery.noConflict();
function test() {
$j("#li1").on(
"click",
function() {$j.ajax({
url : "user/create_user_view",
success : function(result) {
$j("#div1").html(result);
}
});
});
}//test()
$j(function(){
test();
});
</script>
</head>
<body>
<ul>
<li id="li1">li1</li>
<li id="li2">li2</li>
</ul>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>
Actually the result of ajax call is a html file which is indeed a form,
I want to register events to the added elements of .html file,
I know about $("parent-selector").on("event","child-selector",callback(){
// code here
});
How to register js events to elements added dynamically through ajax in div1?
Update:
My question is using $("parent-selector").on("event","child-selector",callback(){
// code here
});
will register events only to direct children of #div1 or its descendents too?
You can easyli attach eventhandlers to dynamic elements, you have to write it a little bit diffrent:
$('body').on('click', '.myDynamicElement', function(ev) {
// Do your stuff in here...
});
Take a look into this Demo, Cheers Jan
I want to alert something in the onclick event of a div .
This is my code:
<script type="text/javascript">
document.getElementById('new_div').click(function() {
alert(1);
});
</script>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
But when loading the page it displays an error:
document.getElementById("new_div") is null
What is the problem in my code?
Edit: This should be a better solution, I'm a bit rusty in JavaScript.
You need to load your JavaScript event handlers after the page is loaded. The simplest way is making your code load when the document finishes loading and the window casts an onload-event.
<script type="JavaScript">
window.onload = function(){
document.getElementById('new_div').onclick = function() {
alert("Good morning, you are very beautiful today!");
}
}
</script>
you defined that div after your javascript code, so when you add your handler the div doesn't exist yet
reverse your code like so
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
<script type="text/javascript">
console.log(document.getElementById('new_div'))
</script>
to correctly attach an event use addEventListener (and attachEvent for IE<9)
or simply use document.getElementById('new_div').onclick = ... (but not recommended since you remove any previous defined handler, if any)
The new_div is not yet loaded when your javascript executes.
Try something like this:
$(document).ready(function()
{
$('#new_div').click(function()
{
alert(1);
});
});
Edit
I assume you use jQuery because you use .click(function() {
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function clicked(item) {
alert($(item).attr("id"));
}
</script>
<div onclick="clicked(this);" id="test">test</div>
I think you jquery solves your problem beautifully.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#new_div').click(function() {
alert(1);
});
});
</script>
your HTML stays the same
try this
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$("#new_div").click(function(){
alert(1);
});
});
</script>
</head>
<body>
<div id="new_div" style="border:1px solid;">
Clicked Me......
</div>
</body>
</html>
I have the following code
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div class="full-details-box" name="full_details_box" id="full-details-box"></div>
<hr />
<script type='text/javascript'>
function show_3136(){
document.full_details_box.style.display='block';
}
show_3136();
</script>
</body>
</html>
I get the error: window.document.full_details_box is undefined
I get the error for the line:
document.full_details_box.style.display='block';
But I do have a <div> element with the name full_details_box, so why the error?
Don't use the name attribute for divs. It doesn't even exist. Use the id, and:
document.getElementById('full-details-box')...
function show_3136(){
document.getElementById('full_details_box').style.display='block';
}
To access this element, use getElementById
function show_3136() {
document.getElementById("full-details-box").style.display = "block";
}
You could do a
document.getElementById("full-details-box").style.display='block';
Just to add to your confusion - you may have been thinking about form fields
All of these will work on a form field (the first only if you wrap the field in form tags)
<html>
<head>
<script type='text/javascript'>
function showFormField(){
document.forms[0].full_details_boxName.style.display='block';
// or document.forms[0].elements["full_details_boxName"].style.display='block';
}
function showNamedField(){
document.getElementsByName("full_details_boxName")[0].style.display='block';
}
function showFieldById(){
document.getElementsById("full_details_boxID").style.display='block';
}
function showFieldByClassName(){ // does not work in all IE browsers
document.getElementsByClassName("full_details_boxCLASS")[0].style.display='block';
}
</script>
</head>
<body>
<form>
<input class="full-details-boxCLASS" name="full_details_boxName" id="full-details-boxID"/>
</form>
</body>
</html>
for a DIV you will use ID or CLASS, but not name
HTML:
<div id="full-details-box">
Just some test content
</div>
<hr />
CSS:
div#full-details-box {
display:none;
}
JS:
function show_3136(){
document.getElementById("full-details-box").style.display = "block";
}
show_3136();
For a working example, see jsFiddle
As a jquery-beginner, i should bind a javascript object into my jquery functions, like:
<div title="StackOverflow" onclick="javascript:action(this)">Content</div>
and in action i will handle the "this" :
function action(instance){
example=instance.attr("title");
}
but the "instance" is not a jquery object so i can't work with it. The syntax
example=$(instance).attr("title");
doesn't help me either.
I'd be glad of any suggestions
If you're using jQuery then you should completely separate the definition of your HTML and associated JavaScript. For example
HTML:
<div id="soDiv" title="StackOverflow">Content</div>
JavaScript:
$(document).ready(function() {
$('#soDiv').click(function() {
var example = $(this).attr('title');
...
});
});
this should work...
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
function action(instance){
example=$(instance).attr("title");
alert(example);
}
</script>
</head>
<body>
<a id="test" title="StackOverflow" onclick="javascript:action(this)" href="#">Content</a>
</body>
</html>
// HTML file
<div title="StackOverflow" id="stackoverflow">Content</div>
// JS File
document.getElementById("stackoverflow").addEventListener("click", function () {
var example = this.getAttribute("title");
});
Seperations of concerns
HTML:
<div title="StackOverflow" id="stack">Content</div>
Javascript (with jQuery):
$('#stack').click(function(){
alert(this.title);
});