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
 

 

  • 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);
        });
    });

     

  • 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...

  • 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();
    });
  • 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

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