javascriptphphtmlajaxelgg

How do I call HTML via AJAX - Elgg?


I'm trying to call a view in Elgg via AJAX, but nothing works after >>HERE<<

$('.glyphicon-zoom-in').click(function(event) {

    $( '.full-image-view' ).css( "color", "red" ).append('<div>Hope this works</div>');

    // >>HERE<<

    var Ajax = require('elgg/Ajax');
    var ajax = new Ajax();

    ajax.view('albums/inline_full_image_view', {
        data: {
                guid: 123 // querystring
            },
        }).done(function (output, statusText, jqXHR) {
            if (jqXHR.AjaxData.status == -1) {
                return;
            }
            $('.full-image-view').append(output);
        });
    });

Output : Hope this works

What could I be getting wrong?

Thank you all in advance.

UPDATE

inline_full_image_view.php

<?php

    echo 'Hello World';

Solution

  • Elgg uses requirejs. Try this:

    requirejs(["elgg/Ajax"], function(Ajax) {
        var ajax = new Ajax();
        //rest of your code!!
    });
    

    Otherwise, using native JS.

    var xhr = new XMLHttpRequest();
    xhr.open('GET', encodeURI('albums/inline_full_image_view'));
    xhr.onload = function() {
        if (xhr.status === 200) {
            alert('User\'s name is ' + xhr.responseText);
        }
        else {
            alert('Request failed.  Returned status of ' + xhr.status);
        }
    };
    xhr.send();