I'm trying to load a HTML file into a div section, but the load() method doesn't seem to work as when I click the link, the html file opens in a new tab instead of loading into the div tag.
The script:
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
$('#main-content').load($(this).attr("href"));
return false;
});
});
</script>
The 'a' tag:
<li>ABOUT</li>
Where I want my html file to be loaded:
<div class="col-sm-9 blog-main" id="main-content">
...
</div>
How do I make the load() method work?
I'm using Chrome on Windows.
That's the default behavior of a tag. Instead of setting the html.file to be loaded in href attribute, its better to keep it in custom attribute.
ABOUT
And in JavaScript,
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$('#main-content').load($(this).attr("data-page"));
return false;
});
});
</script>
Plunker sample
You can use preventDefault to stop default action of the event to triggered.
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(event){
event.preventDefault();
$('#main-content').load($(this).attr("href"));
return false;
});
});
</script>
try
about.html ensure that the file is in the root of the project
<li>ABOUT</li>
<div class="col-sm-9 blog-main" id="main-content"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(event){
event.preventDefault();
$('#main-content').load($(this).attr("href"));
return false;
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('a').click(function(){
$('#main-content').load($(this).attr("href") + ' #elementSelectorThatYouWantToLoad');
return false;
});
});
</script>
You have to specify an DOM element that you want to load like,
$('#main-content').load($(this).attr('about.html #body');
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
Do anyone has similar experience? I would like to load an external file into current page by using .load("...") function. After loading, how can I trigger the click on an image in the <div id="tab-3-list">?
The script
$("#tab-3-list img.coupon_list").on("click", function (e) {}
doesn't function. If I embed the content of list.html into the current body, the above script works.
<html lang="en" class="ui-mobile">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
</head>
<section id="home" data-role="page">
<article data-role="content">
<div id="home-content"></div>
</article>
<!-- content -->
</section>
<!-- home -->
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html");
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
</script>
</body>
</html>
External file list.html
<div id="tab-3-list">
<div class="ui-grid-a">
<div class="ui-block-a">
<img id="c01" class="coupon_list" src="/images/coupon/c01.png">
</div>
</div>
<!-- /ui-grid-a -->
</div>
<!-- /tab-3-list -->
Try to use event-delegation at this context since you are loading the DOM elements at runtime,
$("#home-content").on("click","#tab-3-list img.coupon_list",function (e) {
e.preventDefault();
alert(this.id);
});
try this..
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html", function(){
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
});
</script>
load uses ajax and thus takes sometime to load data from external page. When you are attaching click event to img.coupon_list, it's not even present in DOM ( in page ).
Try this,
$("#home-content").load("list.html", function () {
$("#tab-3-list img.coupon_list").on("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
This is attaching click only when data from load is returned and added to the DOM.
Use event delegation - .on(), and to trigger click event use .trigger()
$(document).ready(function() {
$("#home-content").load("list.html",
function(){
$('#tab-3-list img.coupon_list').trigger('click');
});
$("#home-content").on("click","#tab-3-list img.coupon_list", function (e) {
e.preventDefault();
window.alert(this.id);
});
});
-just put event in live mode , it's work after reload :
<script type="text/javascript">
$(document).ready(function() {
$("#home-content").load("list.html");
$("#home-content").one("load",function(){
// everytime an image finishes loading
}).each(function () {
if (this.complete) {
// manually trigger load event in
// event of a cache pull
$(this).trigger("click");
}
});
$("#home-content #tab-3-list img.coupon_list").live("click", function (e) {
e.preventDefault();
window.alert(this.id);
});
}); </script>
I put it all in one page and it should work and is not working:
<html>
<head> <link href="css_js/styles.css" rel="stylesheet" type="text/css">
<script language="JavaScript1.2" src="css_js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="css_js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" type="text/javascript">
function popup() {
alert('test');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
popup.html('<p>Where is pancakes house?</p>');
popup.show('fast');
}
$('button').click(popup);
</script>
</head>
<body>
<div class='newpopup'></div>
<button>popup</button>
</body>
</html>
I want to make a simple popup / dialog with Jquery but it is not working at all. What is wrong with it?
Call the function on document.ready
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
OR
$(function(){
$('button').click(function(){
popup();
});
})
You should run your function in jQuery style:
$('button').click(function() {
popup();
return false; //optional
}
Are you sure the src reference is valid when you're including jquery? I've got your code working fine on this jsfiddle using the Google-hosted versions of JQuery and JQuery-ui.
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>