How to make AJAX calls

I'm trying to make an AJAX call in elgg, but I've been unsuccessful so far. What could I be doing wrong, or what am I missing?

Thank you all in advance.

Elgg version 2.1.1

start.php

// in myplugin_init()
elgg_register_ajax_view('forms/myplugin/add');

default/forms/myplugin/add.php

<div>Successful AJAX call</div>

default/object/my_ajax_plugin.php

<div class="myplugin-form-container">JQ Here</div>

<script type = "text/javascript" language = "javascript">

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

    ajax.form('myplugin/add').done(function (output, statusText, jqXHR) {
        if (jqXHR.AjaxData.status == -1) {
            return;
        }
            $('.myplugin-form-container').html(output);
    });

</script>
  • You would need to use the elgg.get() function in your JS.

    elgg.get('ajax/form/myplugin/add, {
        success: function (output) {
            $('.myplugin-form-container').html(output);
        }
    });

    See for reference: http://learn.elgg.org/en/2.0/guides/ajax.html#fetching-forms

  • Hi @Cim. Thanks for the response. Could you be aware of a good working example that I could study? Any AJAX implementation would be great, including calling views.

  • Your use of the elgg/Ajax API is correct, but this must occur in an AMD module. See http://learn.elgg.org/en/2.x/guides/javascript.html

  • Like what Steve said, you'll need to put the code in an AMD module (js/myplugin/somescript.js). Then to call that module, use elgg_require_js('myplugin/somescript') somewhere in your php file. Say put it in start.php as an example.

    Somewhere in your plugin, you'll need to add a button to trigger the Ajax call.

    <a href="#" id="myplugin-button">Fetch form</a>

    This is how your AMD module somescript.js should look like:

    define(['require', 'jquery', 'elgg'], function(require, $, elgg) {
        $('#myplugin-button').on('click', function(e) {
            e.preventDefault();
            elgg.get('ajax/form/myplugin/add', {
                success: function (output) {
                    $('.myplugin-form-container').append(output);
                }
            });
        });
    });

  • Thank you so much guys for the help so far. I'm still a bit confused on something small.

    In start myplugin_init()

    $get_link = 'mod/myplugin/views/default/js/get_link.js';
    elgg_register_js('get_link', $get_link);
    elgg_load_js('get_link');
    
    elgg_register_ajax_view('myplugin/get_link');


    Where exactly am I supposed to call elgg_require_js('myplugin/somescript')? And is a module treated as a view, so that I'm then supposed to have it somewhere in views/default?

  • You don't need to register the JS, Elgg automatically does that for you when you put it in the right folder. You need to put your script in this folder:

    mod/myplugin/views/default/js/myplugin/script.js

    Then in your start.php file or where ever you want to call the module, use the function:

    elgg_require_js('myplugin/script');

  • Since 2.0, AMD modules no longer need to reside in the /js folder. All JavaScript views are automatically registered as AMD modules can be called with elgg_require_js();

    You can require the module in your init function, but that's not recommended unless you want your script loaded on each page request. Ideally, you would keep all your logic tied together. Require the module from the view that renders the HTML element that triggers an ajax request:

    In /views/default/myplugin/button.php

    echo elgg_view('output/url', [
      'text' => 'Load form',
      'href' => '#',
      'class' => 'myplugin-load-form-trigger',
    ]);
    
    echo elgg_format_element('div', [
      'id' => 'myplugin-form-container',
    ]);
    
    elgg_require_js('myplugin/get_form');
    

    In /views/default/myplugin/get_form.js

    define(function(require) {
       var $ = require('jquery');
       $(document).on('click', '.myplugin-load-form-trigger', function(e) {
          e.preventDefault();
          
          // add your ajax call here
       });
    });
  • Well it looks like I'm outdated lol.

Beginning Developers

Beginning Developers

This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking