Converting function from jQuery to Mootools

Question

we have this bit of code to refresh a DIV we have, including a file to request data. The current function works just fine but we want mootools migration.

JS Code:

<script>
jQuery.noConflict();
(function(jQuery) {
    jQuery(function() {
        jQuery(document).ready(function() {
            // First initial refresh onLoad
            jQuery(".wall_actions").fadeOut("fast").load("auto-refresh.php").fadeIn("fast");
            // Use now with Interval - 10 seconds
            var refreshId = setInterval(function() {
                jQuery(".wall_actions").fadeOut("fast").load('auto-refresh.php').fadeIn("fast");
            }, 5000);

            jQuery.ajaxSetup({
                cache: false
            });

        });
    });
})(jQuery);
</script>

<div class="wall_actions">
<!-- other code -->
</div>

We've tried to migrate using this method with no success.

<script language="javascript">
var request = new Request({
    url: 'auto-refresh.php',
    method: 'get',
    update: 'refresh-me',
    onComplete: function(response) {
        $('.wall_actions').set('html',response);
    }
})

var doRefresh = function() {
    request.send();
};

doRefresh.periodical(5000);
</script>

auto-refresh.php

<?php
$page = "auto-refresh";
include "header.php";

$actions_array = $actions->actions_display(0, $setting['setting_actions_actionsperuser']);
$smarty->assign_by_ref('actions', $actions_array);
include "footer.php";
?>

How can we use the jQuery function to make the request but with MooTools?

Answer 1

You were close, actually you just missed the $$.

The $ is a ID selector, you should use document.getElements('.wall_actions') or $$('.wall_actions'); instead of one dollar in $('.wall_actions').set('html',response);.

---

If you want to have the fade out/in, you could try this:

var request = new Request({
    url: 'auto-refresh.php',
    method: 'get',
    update: 'refresh-me',
    onComplete: function (response) {
        el.set('tween', {
            onComplete: function () {
                el.set('html', response ).fade('in')
            }
        });
        el.fade('out');
    }
})

var doRefresh = function () {
    request.send();
};

window.addEvent('domready', function () {
    el = $$('.wall_actions');
    doRefresh.periodical(5000);
});

I don't know your html, but check out this Fiddle.
(btw, double check that your php does echo something)