Is there any way to stop the page from loading the next page when someone clicks on a <a>
tag instead i want it to give the href value so for example "www.google.com" and then do a jquery .load()
which is like this
$(".window").load(hrefvalue);
i know i could just change all the href values to fire up a javascript function but that takes a bit of time so im just looking for the easiest way.
so i want it to do
stop the page loading the next part on a <a href click.
get the href value e.g http://www.google.com.
and then do a jquery (.load() or $.ajax()) call for the href page.
This should get you started:
$(document).on('click', 'a', function(event) {
event.preventDefault(); // Now the link doesn't do anything
var href = this.href; // The link's URL is in this variable
});
could do something like
$(document).on('click', '*[href]', function(e) {
// Whatever you're trying to do
e.preventDefault();
return false;
});
$(document).on('click','a[href]',function(){
var href = $(this).attr('href');
$.ajax(href,function(data){
$(your_container).html(data);
//data is the HTML returned
//note that ajax is bound to the
//same origin policy
//any request outside your domain won't work
})
return false;
});
...
And after then you can write your script for this anchor.
This should do it:
$("a").click(function(event) {
event.preventDefault();
var href = $(this).attr("href");
$.ajax({
url: href,
success: function(data) {
alert('Load was performed.');
}
});
});
Related
I just have a little question about syntax....
If I want to pass my url in a variable "test" But, I need to select only the data inside the html tag article... what can I do? this doesn't work:
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
var test = $(this).attr('href');
$('.window').load(test).find("article"); //this does'nt work, please help
});
});
You can pass an optional jQuery selector to the load function (separated by a space from the URL) to load a page fragment.
$(document).ready(function() {
$('a').click(function(e) {
e.preventDefault();
var test = $(this).attr('href');
$('.window').load(test + ' article');
});
});
You can find this feature in the jQuery .load() documentation
On my website I have multiple href's and I need to add a delay between when they are clicked and when they load. As there are hundreds of hrefs I cant have a separate js function for each one.
The two ways I have researched were, passing the contents of the href to javascript as a variable, such as:
example1
example2
example3
<script>
var href = ### CONTENTS OF SELECTED HREF ###
$(function() {
$("a").on("click", function(event) {
event.preventDefault();
setTimeout(function(){window.location.href = href;}, 1000);
});
});
Is it possible to do so using CSS?
No, that is not doable using CSS (Cascading Style Sheets, No way). You would need to use Javascript.
But yes, you do not need to write different functions for every a, just fetch the href inside the click callback and then redirect the user accordingly.
$(function() {
$("a").on("click", function(event) {
event.preventDefault();
var href = this.href;
setTimeout(function(){
window.location = href;
}, 1000);
});
});
I want to disable the a link from refreshing the page (i.e. going to the href link). But I want to the url to be modified, as per the href value.
Currently, I am trying this
$('.advertPP').click(function() {
event.preventDefault();
location.href = link.attr("href");
});
HTML Link
Link
Since both are on the same page, so I don't want the page to be refreshed but i want the url to be modified as in the href value.
Your code is full of(logical) errors.
$('.advertPP').click(function(event) {
event.preventDefault();
location.href = this.href; //or $(this).attr("href"), is the same thing, jQuery is not needed in this case
});
Maybe you want your page to change contents without refreshing, so you need AJAX, here is an example:
$('.advertPP').click(function(event) {
event.preventDefault();
$.ajax({
url: this.href,
success: function(data) {
//if the loaded page is a full html page, replace the HTML with the data you requested
$("body").html(data); //make sure your data has only body contents, either you can replace the full HTML even if it is a bad practice $("html").html(data);
}
});
});
Check whether document.URL and $(this).attr('href') are same then set new url and return false.
If both are different them redirect to the page.
$('a').click(function() {
var currentUrl = document.URL
if ($(this).attr('href') == currentUrl) {
$(this).attr('href', 'http://www.google.com');
return false;
}
})
I noticed that you are not passing event object to your function. You should pass the object like this:
$('.advertPP').click(function(event) {
//^^^^^ pass the event object
event.preventDefault();
$(this).attr("href", "http://...");
});
I am using sammy javascript framework. Problem is when I click over below anchor browser take me on top of page .... How can I prevent this....
Here is html anchor
Duplicate
and here is JS sammy listner
this.get('#/duplicate/:id', function(context) {
chartName=this.params['id'];
for(i=0;i<chartJSONS.length;i++){
if(chartJSONS[i].chart.renderTo==chartName){
var obj = jQuery.extend(true, {}, chartJSONS[i]);
var dupChart=obj.chart.renderTo+"_duplicate";
obj.chart.renderTo=dupChart;
chartJSONS[chartJSONS.length++]=obj;
}
}
$('#chart').html('');
createCharts();
return false;
});
Any help is highly appreciated...
you need to cancel the navigation after the click event.
because the # navigates your browser to top of the page.
something like:
$('.allDuplicates').click(function(){
return false;
});
or use something else than
<a>
use for example div and you're ok.
You need to do something like this:
$('a').click(function(e){
e.preventDefault();
window.location.hash = $(this).attr('href');
});
I suggest you to add a class to every a element you want to handle like this:
Duplicate
$('.myclass').click(function(e){
e.preventDefault();
window.location.hash = $(this).attr('href');
});
After load content to page using
div.load('page.php');
I need get all of links from page to change them. So I wrote this:
div.load('page.php', function() {
links = $('a');
alert(links.length);
for(i=0 ; i<links.length ; i++
{
link = $('a:nth-child('+(i+1)+')');
alert(link.attr('href'));
}
});
The result of this code is:
- first alert() returned correct links quantity, but it's not a DOM objects, so I can't change href attribute using it: links[i].attr('href', 'changed')
and I have to getting links in loop one by one, but this method returned only first link from page.php and all of links from site which will not changed.
Have someone any idea how do it?
You can do like:
div.load('page.php', function() {
$('a').each(function(index){
alert($(this).attr('href'));
});
});
You can change their href like:
div.load('page.php', function() {
$('a').each(function(index){
$(this).attr('href', 'whatever');
});
});
If you need to modify all the links only in the content that was loaded, use a context, like this:
div.load('page.php', function(data) {
$('a', data).attr('href', '#');
});
//or, if they're interdependently changed, something like this...
div.load('page.php', function(data) {
$('a', data).attr('href', function(i, href) {
return href + "?tracking=1"; //append ?tracking=1
});
});
This finds all <a>, but only inside the response that came back for page.php, so only the anchors that you just loaded. The format is $(selector, context), if you leave context off, it's document, so something like $('a') is really $(document).find('a'), giving it a context other than document, you're saying $(data).find('a'), getting only the links you want.