I have a code but it for only a page. I want do it for all links.
$('.row').on("click",".nav_link",function(e){
e.preventDefault(); // cancel click
var page = $(this).attr('href');
$('.row').load(page);
});
Use Ajax to load the pages. You can do something like:
$(function(){
$(".nav_link").click(function(e){
e.preventDefault();
var url = $(this).attr("href");
var ajx = $.ajax({
url: url
});
ajx.done(function(d){
$(".row").html(d);
});
});
});
HTML:
Click Me
<div class="row"></div>
Fiddle
Related
I am trying to obtain the id of the container whose href element was clicked, using jQuery. I know this involves use of the parent() method, but I'm not sure how to put it all together.
Here is a snippet of the kind of HTML doc I will be processing:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="cntnr_1" class="container">
foo1
foo2
foo3
</div>
<div id="cntnr_2" class="container">
foobar1
foobar2
foobar3
</div>
<script type="text/javascript">
$().ready(function(){
//display the url of the clicked on link
//display the id of the container whose href was clicked on
});
</script>
</body>
</html>
The desired behavior (When a link [href] in a "container" is clicked) is as follows:
Display the link of the url clicked on (so I can submit an AJAX POST to the url)
Display the id of the container (so I can push the received data back to that id)
Can anyone help with how to obtain the parent container id and the url that was clicked?
[[Edit]]
I have posted the actual HTML code I am using here: http://jsfiddle.net/fpPRL/
$('.container a').click(function(e){
e.preventDefault();
var url = $(this).attr('href');
var container_id = $(this).parent().attr('id');
alert('the url is "'+ url +'" from the container #' + id);
});
UPDATE:
Since you tried it on a different html markup (and didn't work), here's a more universal solution (see it in action here : http://jsfiddle.net/fpPRL/1/):
$('.container a').click(function(e){
e.preventDefault();
var url = $(this).attr('href');
var container_id = $(this).parents('.page_container:first').attr('id');
alert('the url is "'+ url +'" from the container #' + id);
});
Try:
$(document).ready(function() {
$('a').click(function(){
alert('url:' + $(this).attr('href') + ', parent: ' + $(this).parent().attr('id'));
return false;
});
});
Here's the jsfiddle for it:
http://jsfiddle.net/zaPhe/3/
Sample
http://jsfiddle.net/
$('.container a').live('click',function() {
var id = $(this).parent('.container').attr('id');
alert( $(this).attr('href') + ' for ' + id );
});
try this
jQuery(document).ready(function() {
$("a").click(function() {
$this = $(this);
parendtID = $this.closest("div").attr("id");
thisHref = $this.attr("href");
alert(parentID + thisHref);
});
});
I want to know how can I change the content of a div (for example: <div id="MyDiv"></div>) when I click any link for an HTML file with PHP code?
Now, I tried to do this:
$(function(){
$("a").on("click", function () {
var href = $(this).attr('href');
$("#MyDiv").load(href);
});
});
But it replaces the content of the whole page.
Yeah, I need to prevent the default action, this will do what I want:
$(function(){
$("a").on("click", function () {
event.preventDefault();
var href = $(this).attr('href');
$("#MyDiv").load(href);
});
});
Its my button:
<div id="page-wrapper"></div>
$("#index2").click(function(){
$(document).ready(function() {
$('#page-wrapper').fadeOut('fast', function(){
$('#page-wrapper').load("index2.php", function(){
$('#page-wrapper').fadeIn('fast');
});
});
});
});
Its successfully work and no problem but this does not work if the page refreshes
And that's when you refresh the page on the www.domain.com/index.php#index2 page
Now how can i load again index2.php to #page-wrapper on refresh?
It would be better approach to use hashchange event to handle # anchor changes. Try like this;
$(window).on('hashchange', function() {
var hash = window.location.hash;
var loadUrl = hash.substr(1) + ".php";
$('#page-wrapper').fadeOut('fast', function(){
$('#page-wrapper').load(loadUrl, function(){
$('#page-wrapper').fadeIn('fast');
});
});
});
To fire hashchange event at first page load you can try;
$( document ).ready(function() {
if (window.location.hash) {
$(window).trigger('hashchange')
}
});
I've searched and serached and nothing really seems to answer what I'm looking for.
I'm pulling in html pages into a div. I finally got it to fadeout, load new href content, then fade in the new content. However, I can't get it to preventDefault on the link.
Here's my code. Any help is greatly appreciated!
$(document).ready(function() {
var url = $(this).attr("href");
$('#container').css('display', 'none');
$('#container').fadeIn(1000);
jQuery('a').click(function(e){
e.preventDefault();
$('a').removeClass('current');
$(this).addClass('current');
$("#container").fadeOut('1000',function(){
$('#container').load(url);
}).fadeIn('1000');
});
})
You need to call this fadeIn inside the load callback.
$(document).ready(function() {
var loading = false;
$('#container').css('display', 'none');
$('#container').fadeIn(1000);
$('a').click(function(e){
if(loading) return false;
e.preventDefault();
loading = true;
var url = $(this).attr("href"),
cont = $("#container"); //cache selector
$('a').removeClass('current');
$(this).addClass('current');
cont.fadeOut(1000, function(){
cont.load(url, function() {
cont.fadeIn(1000, function() {
loading = false;
});
});
});
});
});
This is a script that, when a link is clicked, will pull a page from somewhere
and insert it in a div in the current page. Pretty simple, yes, but being the
thick head I seem to be, I can't figure out how to implement it.
i.e. how can I formulate the link so that it will point the script to the page
I want to load in the div I want?
The script:
$(document).ready(function() {
// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#nav li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
});
});
The instructions specify the following:
We want to target the links within the navigation menu and run a function when they are clicked:
$('#nav li a').click(function() {
// function here
});
We need to define what page to get the data from when a link is clicked on:
var toLoad = $(this).attr('href')+' #content';
The loadContent function calls the requested page:
function loadContent() {
$('#content').load(toLoad,'',showNewContent)
}
It's very likely that the above is all that's needed to run the script as intended
but only if you know how to do it, which I don't.
PS: The tutorial all this comes from is here.
Basically intercept all link clicks and make an AJAX request instead... Remember to return false at the end of the click callback function.
$('a').click(function () {
var href = $(this).attr('href');
$.ajax({
url: href,
success: function (res) {
$(res).appendTo('#target'); // add the requested HTML to #target
}
});
return false; // important
});