Search code examples
jqueryajaxrandombloggerreloading

How to prevent reloading after clicking on a link?

I'm using a script to use AJAX on my blogger (https://github.com/swook/jquery-ajaxify-plugin) so users can listen music via the music player without interruption while they're navigating through differents pages.

Everything works except the random button. I'd like to AJAX-ify the random button.

The problem is when I click on the link, the page reloads.

You can check the problem here: http://www.julienlussiez.com/p/test_20.html

Here's the script: 

<script>
<!--
/*
Random link button- By JavaScript Kit (http://javascriptkit.com)
Over 300+ free scripts!
This credit MUST stay intact for use
*/

//specify random links below. You can have as many as you want

var randomlinks=new Array()

randomlinks[0]="http://www.julienlussiez.com/2013/01/le-repos-du-fou_21.html"
randomlinks[1]="http://www.julienlussiez.com/2012/11/dissonance-3.html"
randomlinks[2]="http://www.julienlussiez.com/2012/10/renaitre.html"
randomlinks[3]="http://www.julienlussiez.com/2013/01/defaillance.html"
randomlinks[4]="http://www.julienlussiez.com/2012/08/fragile-2012.html"

function randomlink(){
window.location=randomlinks[Math.floor(Math.random()*randomlinks.length)]
}

//-->
</script>
<form>
<p><input type="button" name="B1" value="Aléatoire" onclick="randomlink(); return false;" /></p> </form>

Thanks! It would be very nice if you'd have some clues!

Solution

  • When you use window.location="http://www.google.com/", for instance, it will change the current web page being viewed to Google's homepage. You will need to either load your content in an iFrame or via AJAX to stop your page from reloading. You can also look into providing a popout player for your music and whenever your user switches pages, the music will continue to play.

    According to Ajaxify's documentation, to load a page via AJAX, you need to call this function:

    $.Ajaxify.loadURL('/path/to/page.html');

    Try replacing the window.location code with the $.Ajaxify.loadURL('/path/to/page.html'); in your sample code and see if that makes a difference.

    Something like this:

    function randomlink(){
$.Ajaxify.loadURL(randomlinks[Math.floor(Math.random()*randomlinks.length)]);
}