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://...");
});
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
I have multiple buttons with the class myButton. Each button has a value which is send to a server on click. The target URL of the button does look like this:
http://mysite/test/test.html?cid=15
After I click on the button, the following GET parameter should be added to the URL and then the button should be submitted:
mySessionVar=1
So the new URL should look like this:
http://mysite/test/test.html?cHash=d009eb3f9f4e1020435b96a8f7251ad5&mySessionVar=1
Why I have to inject it?
I am working with fluid. AFAIK it is not possible to manipulate fluid tags with JavaScript. However, I need to add a sessionStorage item value to the fluid tags arguments attribute.
My fluid code:
<f:link.action controller="Download" action="download" arguments="{cid: category.uid}" class="myButton">Download</f:link.action>
So my attempt is to append my sessionStorage item as GET parameter to the target URL of the button and then send it, e.g.:
$(".myButton").on
(
"click",
function(event)
{
//First prevent the default event
event.preventDefault();
...inject the sessionStorage item as GET parameter to the target URL of the button, then do whatever the button would do normally...
//Go to new URL
window.location.replace(NEW URL);
}
);
Is this possible?
EDIT: This is how the rendered HTML of the buttons looks like:
<a class="myButton" href="/de/mysite/test/test.html?tx_mydownloads_myfilelist%5Bcid%5D=15&&tx_mydownloads_myfilelist%5Baction%5D=download&tx_mydownloads_myfilelist%5Bcontroller%5D=Download&cHash=d009eb3f9f4e1020435b96a8f7150ad5">Download</a>
EDIT: I have another idea, maybe I could just read the target URL somehow, then add my new GET param to it and then load that URL with window.location.replace?
You can indeed just use the href from the button and use it to feed window.location.href, like so:
$('.myButton').on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href'),
queryString = 'mySessionVar='+sessionStorage.getItem("myItem"),
newHref;
if (href.indexOf('?') !== -1) {
newHref = href + '&' + queryString;
} else {
newHref = href + '?' + queryString;
}
window.location.href = newHref;
});
This also handles the case when there is no previous query string present on the link and appends it with ? instead of &, but that part can be omitted if that won't happen in your app.
The following snippet should be enough to add your mySessionVar=1 parameter to the href attribute:
$('.myButton').on('click', function(e) {
$(this).attr('href', $(this).attr('href') + "&mySessionVar="+ sessionStorage.getItem('myVar');
});
You don't have to prevent the default, because your click handler function is called before the default event handler (who does roughly speaking: read the href attribute and load it).
You can use .serialize function in jquery which is simple and modern function to get all the selected buttons/filters into a url param format with amberson simple. I can't explain more clear than what is said in Jquery website. Please refer the link below to find how to use the function. https://api.jquery.com/serialize/#serialize
I saw something really different, and I have no idea how to do it.
The site Rdio.com when you click in any link, the url change totally (not #).
But the div in the bottom of the page (that is playing the song) do not reload.
How they do this?
you can do this with an ajax load and then you mainipulate the browser history.
like so:
/*clickhandler Hauptmenü*/
$('#main-nav a').on('click', function(e){
var href = $(this).attr('href'),
title = $(this).text();
loadContent(href,title);
/*manipulate Browser history */
history.pushState({path: href, titel: title}, $(this).attr('href'), 'http://www.example.com/'+$(this).attr('href'));
e.preventDefault();
});
window.addEventListener('popstate', function(e){
loadContent(e.state.path, e.state.titel);
}, false);
function loadContent(href,title){
var href = href,
container = $('#main-cont');
container.fadeOut(100, function(){
container.load( href +' #main-cont', function(){
container.fadeIn(200);
$('title').replaceWith('<title>' + title + '</title>');
});
});
};
I hope this answers your question.
This is done with JavaScript's new history object, using the pushState and popState methods. See also http://diveintohtml5.info/history.html
Correct me if I'm wrong - considering that I havent been to their site - but I believe that they would be using an Iframe of some sorts - considering that they would have to reload that div if they did otherwise
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.');
}
});
});
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.