如何AJAX-ify Blogger上的随机按钮？

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.

我正在使用脚本在我的博客上使用AJAX(https://github.com/swook/jquery-ajaxify-plugin),这样用户可以在浏览不同的页面时通过音乐播放器不间断地收听音乐。

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

一切都有效,除了随机按钮。我想AJAX-ify随机按钮。

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

问题是当我点击链接时,页面重新加载。

You can check the different problems here: http://www.julienlussiez.com/p/test_20.html (There're 3 random buttons with different script)

您可以在这里查看不同的问题:http://www.julienlussiez.com/p/test_20.html(有3个不同脚本的随机按钮)

Test #1: I have this [I tried many things on this code but nothing seems to work]:

测试#1:我有这个[我在这段代码上尝试了很多东西,但似乎没有任何工作]:

     <div id="myLuckyPost"><a href="#random" onclick="feelingLucky();return false;" title="Aléatoire">Aléatoire</a></div>
<div id='head'></div>

<script type='text/javascript'>
//<![CDATA[
function showLucky(root){
    var feed = root.feed;
    var entries = feed.entry || [];
    var entry = feed.entry[0];
      for (var j = 0; j < entry.link.length; ++j) {
       if (entry.link[j].rel == "alternate") {
       window.location = entry.link[j].href;
       }
      }
   }

function fetchLuck(luck){
    script = document.createElement('script');
    script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
    script.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(script);
   }
function readLucky(root){
    var feed = root.feed;
    var total = parseInt(feed.openSearch$totalResults.$t,10);
    var luckyNumber = Math.floor(Math.random()*total);
    luckyNumber++;
    fetchLuck(luckyNumber);
    }

function feelingLucky(e){
    var script = document.createElement('script'); 
    script.type = 'text/javascript';
    script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
    document.getElementsByTagName('head')[0].appendChild(script);
    if(e && e.stopPropagation) {
        e.stopPropagation();
    } else {
        e = window.event;
        e.cancelBubble = true;
    }

    return false;
}
//]]>
</script>

Test #2 : With an other script for randomizing articles. The problem is still the same.

测试#2:使用其他脚本随机化文章。问题仍然存在。

<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>

Test #3 : With an other script for randomizing articles. The problem is still the same.

测试#3:使用其他脚本随机化文章。问题仍然存在。

<script>
/* Simple Random Posts function for Blogger
 * Copyright 2012 Yu-Jie Lin
 * Licensed under the MIT License
 */
function blogger_random_post(){
  // You can replace the value with your blog ID
  var blogID = $('#blogID').val();
  // for example:
  //  blogID = "4586487713356156869";
  var BLOGGER_POSTS_API = "http://www.julienlussiez.com/feeds/posts/summary";
  // appending necessary parameters
  BLOGGER_POSTS_API += "?alt=json-in-script&max-results=1&callback=?";
  // replacing blogID with value
  BLOGGER_POSTS_API = BLOGGER_POSTS_API.replace('blogID', blogID.toString());
  $('#btn-blogger-random').text('Tossing dice...');
  // retrieving posts count
  $.getJSON(BLOGGER_POSTS_API, function(data){
    var posts_count = parseInt(data.feed.openSearch$totalResults.$t);
    // index is 1-based
    var index = Math.floor(Math.random() * posts_count) + 1;
    // retrieving post link
    $.getJSON(BLOGGER_POSTS_API + '&start-index=' + index, function(data){
      $.each(data.feed.entry[0].link, function(idx, link){
        if (link.rel == 'alternate')
          // redirecting
          document.location.href = link.href;
      });
    });
  });
}
$(function(){
  $('#btn-blogger-random').click(blogger_random_post);
});
</script>
<label>Blog ID <input id="blogID" value="4586487713356156869"/></label>
<button id="btn-blogger-random">I'm Feeling Lucky &raquo;</button>  

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

谢谢!如果你有一些线索,那将是非常好的!

2 个解决方案

#1

You have to stopPropagation.

你必须停止传播。

For that, you can add return false; to the end of the function.

为此,您可以添加return false;到功能结束。

See How to stop propagation

请参见如何停止传播

And if it doesn't work, you can add

如果它不起作用,你可以添加

// event is the Event object
if (event.preventDefault) {
  event.preventDefault();
}
event.returnValue = false;

See Alsacreation (in french ^^)

见Alsacreation(法文^^)

The event is an object you must pass to the caller...

该事件是您必须传递给调用者的对象...

<div id="myLuckyPost"><a href="#random" onclick="feelingLucky(event)" title="">BD Aléatoire</a></div>

function feelingLucky(event){
  //now you can use event.stopPropagation...

}

You also can retrieve this object by using window.event, but it's not cross browser! See Other topic on Javascript Event object

您也可以使用window.event检索此对象,但它不是跨浏览器!请参阅有关Javascript事件对象的其他主题

#2

Just change your existing feelingLucky function to

只需将现有的feelingLucky功能更改为

function feelingLucky(e){
    var script = document.createElement('script'); 
    script.type = 'text/javascript';
    script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
    document.getElementsByTagName('head')[0].appendChild(script);
    if(e && e.stopPropagation) {
        e.stopPropagation();
    } else {
        e = window.event;
        e.cancelBubble = true;
    }

    return false;
}

If it doesn't work, youre problem is in the '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky' page or in the ajaxify.js

如果它不起作用,你的问题出现在'/ feeds / posts / summary?max-results = 0&alt = json-in-script&callback = readLucky'页面或ajaxify.js中

IDEA

You can try to change your <a> to another element like <span>.

您可以尝试将更改为之类的其他元素。