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.
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
So I'm trying to use ajax to put content into a div, and trying to have it change all internal links before it adds the content so that they will use the funciton and load with ajax instead of navigating to another page. My function is supposed to get the data with ajax, change the href and onclick attributes of the link, then put it into the div... However, all it's doing is changing the href and not adding an onclick attribute at all. Here's what I was using so far:
function loadHTML(url, destination) {
$.get(url, function(data){
html = $(data);
$('a', html).each(function(){
if ( $.isUrlInternal( this.href )){
this.onclick = loadHTML(this.href,"forum_frame"); // I've tried using both a string and just putting the function here, neither seem to work.
this.href = "javascript:void(0)";
}
});
$(destination).html(html);
});
};
Also, I'm using jquery-urlinternal. Just thought that was relevant.
You can get the effect you want with less effort by doing this on your destination element ahead of time:
$(destination).on("click", "A", function(e) {
if ($.isUrlInternal(this.href)) {
e.preventDefault();
loadHTML(this.href, "forum_frame");
}
});
Now any <a> that ends up inside the destination container will be handled automatically, even content added in the future by DOM manipulations.
When setting a function to onclick through js it will not show on the markup as an attribute. However in this case it is not working because the function is not being set correctly. Easy approach to make it work,
....
var theHref=this.href;
this.onclick = function(){loadHTML(theHref,"forum_frame");}
....
simple demo http://jsbin.com/culoviro/1/edit
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://...");
});
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.');
}
});
});
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');
});