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) ... :-P

Ajax update

by matt_sawyers, Tuesday, May 21, 2013, 03:58 (4314 days ago) @ kiwii
edited by matt_sawyers, Tuesday, May 21, 2013, 04:16

AWESOME!! I used the "read.png" image & inverted it to make my "check.png" In case someone was interested :)
Here is the image I used: [image]

I realize the the image above is effectively hidden. Due to the white background of the forums, you can't see it. But if you right-click in the area just to the right on the colon (":") you should be able to "save image as..."

Ajax update

by frankynov, Friday, May 31, 2013, 15:58 (4303 days ago) @ kiwii

Working perfectly ! Thank you very much !
Maybe add a commit on the git ? ;-)

RSS Feed of thread
powered by my little forum