Ajax update

by kiwii, Wednesday, May 15, 2013, 12:16 (4319 days ago)

Add an update button to refresh your feeds

in templates/home.phtml :

after line 29 <link rel="stylesheet" href="all.css" /> add this script :

<script type="text/javascript">
// Fonction effectuant la requête AJAX
function update_rss(){
var xhr = null;
document.getElementById("loader_update").innerHTML='<div style="margin-left: 15px;margin-right: 15px;margin-top: 10px;"><center><img src="public/images/ajax-loader-big.gif" height="16px"></center></div>';
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
}
else{// code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open('GET', 'your_url/update', true);

xhr.onreadystatechange = function() {
if(xhr.readyState == 4){
document.getElementById("loader_update").innerHTML='<div style="margin-left: 15px;margin-right: 15px;margin-top: 10px;"><center><img src="public/images/check.png" height="16px"></center></div>';
}
}

xhr.send(null);
}
</script>

you need to have a check.png in your "images" folder.
after go to the body, juste after <div id="nav-mark"><?PHP echo \F3::get('lang_markread')?></div> add this :

<div style="margin-left: 15px;margin-right: 15px;margin-top: 10px;"><button style="padding:10px;color: #d7d7d7;background: #3d6d69;font-weight: 600;font-size: 0.9em;text-align: center;-moz-border-radius: 2px;-webkit-border-radius: 2px;-khtml-border-radius: 2px;border-radius: 2px;cursor: pointer;-webkit-appearance:none;border:none;width:100%;size:18px;" type="button" onclick="update_rss()">Update</button><span style="color:#FFFFFF;" id="loader_update"></span></div>

before <ul id="nav-filter">.

you can now update your rss feed just by a click.
i work to reload the content div after the update. if you have an issue

(sorry for my bad english) ...