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');
});
Related
So I'm using .load() to load a view into an element - and when I'm done with it I do an .innerHTML = '' to get rid of it.
But if I do it more than once (i.e. close and open the element) - the form is definitely gone in between and reloaded, but when I submit it submits duplicates.
Here is the code:
$('a.comments').click(function(e){
e.preventDefault();
// $('.overlaybackground').addClass('open');
Component.Overlay.toggleOverlay();
$('#commentcontainer').load($(this).attr('href'), function(){
Component.Forms.init(page, {});
});
});
$('.overlaybackground').click(function(e){
if(e.target.className == 'overlaybackground open'){
e.preventDefault();
Component.Overlay.toggleOverlay();
// $('.overlaybackground').remove('*:not(#commentcontainer)');
document.getElementById('commentcontainer').innerHTML = '';
}
});
Not sure of the specific scenario. But if you only want to toggle the visual, simply toggle the CSS property display of the form instead of removing it from the DOM:
display:none<--> display:block
Try the following:
$('#commentcontainer').empty()
I'm using the following script with jQuery to have a fade transition when navigating between pages:
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(200);
$("a").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(200, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
It works fine when only using links to navigate between pages, but when using the back button on the browser, the page returned to is blank.
How can I get pages to be properly displayed when navigating to them via the back button?
Using the back button returns you to the state of the previous page right before you left it (in this case, completely faded out), at least that's how I understand it. Feel free to correct me if I'm wrong though.
In any case, I think repainting the DOM would solve your problem (taken from Coderwall):
$.fn.redraw = function(){
$(document).each(function(){
var redraw = this.offsetHeight;
});
};
And to call the function: $(document).redraw();
How about try using delegate
$("a").on('click', function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(200, redirectPage);
});
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.