Triggering my JavaScript on Ajax.module events (success, error ... )

Events happening in the community are now at Drupal community events on www.drupal.org.
kaspar's picture

Hi,

I'm trying to trigger my JS function to be executed after successful form post in order to update some arbitrary container on page with the data.

I saw that there is "updaters" array in JSON response but I'm not sure how to fill it with data. Should I do that in the form definition array, or somewhere else. Do I maybe take wrong approach to this? I feel like I'm missing something :)

Is there maybe a link to detailed tutorial on using Ajax.module where I could get into more details?

Thanks for help,
Ivan

Comments

You can pass custom

pgorecki's picture

You can pass custom information to javascript via hook_submit of your ajax form.

In your module:

function mymodule_myform_submit(&$form, &$form_state) {
  // submission code
  $form['#ajax']['some_data'] = 'some_value';
}

In your javascript plugin:

Drupal.Ajax.plugins.mymodule = function(hook, args) {
  if (hook === 'message') {
    alert(args.data.options.some_data);
  }
}

I'm not sure if this is the right way, but it worked for me.

Sorry about asking a

ManyNancy's picture

Sorry about asking a somewhat different question. But what is the // submission code?

I want to create a custom message on post success.

<?php
Drupal
.Ajax.plugins.mymodule = function(hook, args) {
  if (
hook === 'message') {
   
alert('post success!');
  }
}
?>

I just need to know what the submission code should be.

Thanks!

"// submission code" is your

pgorecki's picture

"// submission code" is your PHP code, which is executed when your form is submitted (i.e. form data saved to a database). Simply add

$form['#ajax']['form_submitted'] = 1;

at the end of your form submit function (I assume that you are writing your own module).

You wrote:

<?php
Drupal
.Ajax.plugins.mymodule = function(hook, args) {
  if (
hook === 'message') {
   
alert('post success!');
  }
}
?>

This function should be written a javascript, not in PHP. Your module should include this file in hook_preprocess_page (see plugins\thickbox dir of the ajax module to see how it is done).

Your javascript file should look like this:

Drupal.Ajax.plugins.mymodule = function(hook, args) {
  if (hook === 'message' && args.data.options.form_submitted!=undefined) {
    alert('post success!');
  }

Thanks a lot! It worked when

ManyNancy's picture

Thanks a lot!

It worked when I had:
if (hook === 'message') {

in the js, but not when it was:
if (hook === 'message' && args.data.options.form_submitted!=undefined) {

Do you know why that is?

Thanks!

Edit: Do you also know how to return something if the saving fails? And how to change the loading... text to saving... ?

Thanks!

I guess the best way is to

pgorecki's picture

I guess the best way is to define all variables passed to javascript in the form constructor function (myform_form).

    $form['#ajax'] = array(
      'enabled' => TRUE,
      'form_submitted' => '',
      'another_variable' => 'default_value',
    );

If the saving fails (i.e. in myform_validate) then set a variable in a validate function:

if ($error_detected) {
  form_set_error(...);
  $form['#ajax']['form_submitted'] = 'no';
}

Set the variable in a similar way in your submit function (i.e. $form['#ajax']['form_submitted'] = 'yes' at the end of the function).

Then, your javascript should check for:

if (hook === 'message' && args.data.options.form_submitted==='yes') { alert('success'); }
else { alert('validation failed'); }

Debug your javascript with firebug if neccessary.

Module Needed

DeeZone's picture

Note that the "AJAX" http://drupal.org/project/ajax) module is required for "pgorecki"'s solution above to work.

Values stored in args.data.options not updating

kdyer's picture

Hi. I've been trying to update some values on a page after submission via the Ajax.module as described above. Using the snippets above as a reference, the value I am setting for 'form_submitted' in my module's validate function is not being updated on the page ( it's value remains a blank String). I'm using firebug to debug and watch the values on the page after returning and nothing has changed. Any help/thoughts are appreciated.

You must set notfunction

feromon's picture

You must set not
function mymodule_myform_submit($form, &$form_state) {}
but
function mymodule_myform_submit(&$form, &$form_state) {}

To force this method work.

And 1 more:

Don't know why but for me this works only this way

if (hook === 'message' && args.options.form_submitted==='yes') { }

not

if (hook === 'message' && args.data.options.form_submitted==='yes') { }

drupal 6

In my JavaScript I did this

msathesh's picture

In my JavaScript I did this instead of writing it in the module. All I wanted is to reset the form and I came across this other variable 'status' in the response loaded already. If the form has errors, it returns false, otherwise it returns true. Hope it helps someone.

Drupal.Ajax.plugins.contactformplus = function(hook, args) {

  if (hook === 'message' && args.data.status=== true) {
$("form.ajax-form").each(function() {   
        $(this).get(0).reset();
    });
  }
}

Ajax.module

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: