Ajax call on onclik event ?? : Elgg.org

Ajax call on onclik event ??

Hi everyone .

How can I perform an ajax call based on onclick event ?

My action is named portfolio and it looks as followed.

<?php

elgg_ajax_gatekeeper();

$arg1 = (string)get_input('arg1'); 
$arg2 = (string)get_input('arg2');  
system_message('We did it!');

My js file is named submission.js and it looks as followed.

function ajaxPortfolio {

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

    var ajax = new Ajax();

    ajax.action('portfolio', {

         data: {

               arg1: 1,

               arg2: 2

       },

     }).done(function (output, statusText, jqXHR) {

       if (jqXHR.AjaxData.status == -1) {

       return;

   }

alert(output.sum);

alert(output.product);

});

}

My view is named portfolio.php and it looks as followed

<?php

$formbody = '';

$formbody .= '<br><br><strong>' .elgg_echo('pessek_profile:certification:listening'). '</strong><br><br>';

$formbody .= elgg_view_field(array(

            '#type' => 'text',

   '#label' => elgg_echo('pessek_profile:portfolio:title'),

   '#help' => elgg_view_icon('help') . elgg_echo('pessek_profile:portfolio:title:help'),

   'required' => true,

   'name' => 'portfolio',

   'value' => $portfolio->thetitle,

   'class' => 'pessek-portfolio-title',

));

$formbody .= elgg_view_field(array(

            '#type' => 'url',

   '#label' => elgg_echo('pessek_profile:portfolio:link'),

   '#help' => elgg_view_icon('help') . elgg_echo('pessek_profile:portfolio:link:help'),

   'name' => 'portfoliolink',

   'value' => $portfolio->links,

   'class' => 'pessek-portfolio-link',

));

$formbody .= elgg_view('input/submit', [

'name' => elgg_echo('save'),

'value' => elgg_echo('save'),

'onclick' => 'ajaxPortfolio()',

]);


$form = elgg_view('input/form', [

'body' => $formbody,

//'action' => '',

//'action' => 'action/pessek_profile/portfolio/add',

]);

echo elgg_view_module('inline', $form_title, $form, ['class' => 'mvn', 'id' => 'custom_fields_category_form']);

When I click on SAVE button My form is submitted and my ajax function is not call.

Could someone help me to know what I did wrong ??

Best regard

Nikolai Shcherbin 1744 days ago

Add class for form:

$form = elgg_view('input/form', [

   'body' => $formbody,

   'class' => 'custom-form',

]);

submission.js

$('.custom-form').submit(function() {
    var Ajax = require('elgg/Ajax');
    var ajax = new Ajax();
    ajax.action('portfolio', {
        data: {
            arg1: 1,
            arg2: 2
       },
    }).done(function (output, statusText, jqXHR) {
       if (jqXHR.AjaxData.status == -1) {
       return;
    }
    alert(output.sum);
    alert(output.product);
    });
});

- Hermand Pessek@rheman
Hermand Pessek 1744 days ago
- 0 likes
Thanks a lot... I don't know what's wrong . I did what you told but even now the ajax function is not call... The form is only submitted...

Nikolai Shcherbin 1744 days ago

What is:

output.sum

ooutput.product

Check errors with DevTools/Firebug in Chrome/Firefox

Also you can check how your form action works easy with this:

$(document).on('submit', '.custom-form', function(event) {
    var form = $(this);
    var data = form.serialize();
            
    elgg.action('portfolio', {
        data: data,
        beforeSend: function () {
           form.find('[type="submit"]').addClass('elgg-state-disabled');
        },
        success: function(json) {
            form.find('[type="submit"]').removeClass('elgg-state-disabled');
        },
    });
    event.preventDefault();
});

- Hermand Pessek@rheman
Hermand Pessek 1743 days ago
- 0 likes
Hi thanks a lot for your advice. The following function works and I will check what's wrong which the first one that I provided.
Best regard

Ajax call on onclik event ??

Beginning Developers

Navigation

Contact

Legal