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
});
Related
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);
});
});
I replaced content from index.htm with content from project.htm. When you click on a#front it is linked on project.htm and it dynamically loads (replaces) the new content. But I have an issue with how to execute javascript that I'm loading with new content. To load script I used function getScript. Here is the function that I'm using to load new content and script:
$(document).ready(function() {
$('a#front').click(function() {
var toLoad = $(this).attr('href')+' #content';
$('#content').hide("drop", { direction: "left" }, "slow", loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad ,'',showNewContent())
}
function showNewContent() {
$('#content').show("drop", { direction: "right" }, "slow");
$.getScript('js/project.js');
}
return false;
});
});
Javascript that I loaded when I loaded new content only worked if I had alert at the top or this way. But when I try to load more complex content (insted just text I put div, headings etc) it doesnt work:
$.ajax({
success: function(data) {
$('a#link').click(function() {
$("p").css("color","white");
});
}
});
Can you help me with this or maybe you have some different solution?
I solve this problem and menaged to load content from new file and also javascript for that. Notice that in new file I need to have content wrapped into div with ID content and I load it into div in native document, with the same name - content.
Here is how I load new content and how I call new javascript files using getScript function:
$('a#front').click(function() {
var toLoad = $(this).attr('href')+' #content';
$('#content').hide("drop", { direction: "left" }, "slow", loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad ,'',showNewContent())
}
function showNewContent() {
$('#content').show("drop", { direction: "right" }, "slow");
$.getScript('js/project.js');
$.getScript('js/section.js');
$.getScript('js/carousel.js');
}
return false;
});
To force loaded javascript execution I used setTimeout function. For example this is how looks code inside carousel.js file which activate carousel:
$(document).ready(function($) {
setTimeout(function(){
//run carousel
$("#owl-example").owlCarousel();
}, 100); });
How it works you can see here
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;
});
});
});
});
});
In the code below, the if condition is working as I have checked with an alert but load function is not working.
My code:
$("a").click(function() {
hreff = $(this).attr('href');
if(hreff == "something" )
{
$("#dump").load("someurl");
}
});
$("a").click(function(e) {
e.preventDefault(); // prevent page reload
var hreff = $(this).attr('href');
if (hreff == "something") {
$("#dump").load("someurl");
}
});
the function load will load the response from an defined url, but you hasn't defined an url.
if $(this).attr('href') has an real url than you will never get them, becaus you check in your if for "something"
$("a").click(function() {
href = $(this).attr('href');
if (href.length >0) {
$("#dump").load(href, function() {
alert('Load was performed.');
});
}
});
This will work.
I want to make all links on the page unaccessible until the user clicks a button.
$('a').attr('href','#');
$("#button-yes").click(function(){
$('a').attr('href',function(){
$(this).attr('href');
});
});
How about just keeping track of state instead of rewriting all the hrefs?
var buttonClicked = false;
$('a').click(function(){
if(! buttonClicked) {
return false;
}
});
$("#button-yes").click(function(){
buttonClicked = true;
});
Have a var outside your function that says something like:
button_clicked = false;
Then use this to disable all links
$('a').click(function(){
if(!button_clicked){
return false;
}
});
Returning false will cause the link to do nothing.
The simplest example would be to hijack the click event of all links:
$('a').live('click.disable', function() {
return false;
});
$("#button-yes").click(function() {
$('a').die('click.disable');
});
(see this fiddle: http://jsfiddle.net/A6QPn/) but anyone can right-click the link and open it in new tab or something like that.
Another example would be to store the href attributes as data and restore them later:
$('a').each(function() {
var $this = $(this);
$this.data('href', $this.attr('href'));
$this.attr('href', '#');
});
$("#button-yes").click(function() {
$('a').each(function() {
var $this = $(this);
$this.attr('href', $this.data('href'));
});
});
(see this fiddle: http://jsfiddle.net/eQDdQ/) and here the links are just not working because they all point to '#' on the current page.
Another example would be to basically do the same but remove the href attribute altogether making the links look like normal text until the button is clicked:
$('a').each(function() {
var $this = $(this);
$this.data('href', $this.attr('href'));
$this.removeAttr('href');
});
$("#button-yes").click(function() {
$('a').each(function() {
var $this = $(this);
$this.attr('href', $this.data('href'));
});
});
(see this fiddle: http://jsfiddle.net/gmLTP/)
You need to stash the value of the href so that it can be recovered later. I'll stash the href value into the rel attribute.
$('a').each(function(){
$(this).attr('rel', $(this).attr('href')); //store the href values
$(this).attr('href', ''); //clear the href values
});
$("#button-yes").click(function(){
$('a').each(function(){
$(this).attr('href', $(this).attr('rel')); //recover the href values
});
});
This is a simple approach, but it leaves the address in the rel attribute. A clever user might find and use this to circumvent your button, so here's another approach as suggested by #rsp.
$('a').each(function(){
$(this).data('link', $(this).attr('href')); //store the href values
$(this).attr('href', ''); //clear the href values
});
$("#button-yes").click(function(){
$('a').each(function(){
$(this).attr('href', $(this).data('link')); //recover the href values
});
});
By storing the href using .data(), the link address is a little more obscure so users shouldn't be able to circumvent the button as easily (though disabling JavaScript will sidestep this completely).