Quantcast
Channel: General developer forum
Viewing all articles
Browse latest Browse all 37670

Mforms and AJAX with YUI3

$
0
0
by jos cape.  

I would like to be able to have mforms that can be displayed and processed without new page loads, so using AJAX. I have come across this guide -- http://docs.moodle.org/dev/User:Mark_Johnson/Mforms_and_AJAX -- but am struggling to get it to work. I am wondering whether it was created with YUI3 or YUI2 in mind or whether I'm doing something wrong.

At the point of displaying the Moodle form, and adding in the JavaScript which is needed to process the form, via AJAX, an error gets flagged that M.editor_tinymce is not defined. However, I am leaving that problem to one side by setting up a form with plain text area fields. If I do this, there are no errors and the form displays as expected.

The next problem comes when trying to process the form data. This relates to the following block of JS code:

// Form serialisation works best if we get the form using getElementById, for some reason
var form = document.getElementById('form_id');
// If your form has a cancel button, you need to disable it, otherwise it'll be sent with the request
// and Moodle will think your form was cancelled
Y.one('#id_cancel').set('disabled', 'disabled');
 
// Send the request
Y.io(M.cfg.wwwroot+'/form_ajax.php', {
method: post,
on: {
success: function(id, o) {
response = Y.JSON.parse(o.responseText);
// Display some feedback to the user
}
},
form: form,
context: this
});

form_ajax.php is the script I am using to process the data.

The error that gets flagged is Uncaught TypeError: Cannot read property 'length' of undefined and is caused by the _serialize() function in /lib/yuilib/3.7.3/build/io-form/io-form.js

The form passed in via form: form above seems to get passed in as a variable called to this which is documented as follows:

* @param {Object} c - YUI form node or HTML form id.

However, I have tried changing the form passed in to:

  • '#mform1'
  • 'mform1'
  • Y.one('#mform1')
  • Y.one('#mform1')._node

None of which has worked.

... oops ... after writing the above, I thought of passing in a wrapper object with id as a property:

var formwrapper =new Object();
formwrapper.id = 'mform1';

Which actually seems to have done the trick so I am going to have a look into it to see how robust that is (and why it is not working with tinymce). Also, the documentation for the c param doesn't tally up with using that wrapper so that is odd!

Has anyone else run into issues around displaying/processing mforms using AJAX?

(I am using Moodle 2.4)


Viewing all articles
Browse latest Browse all 37670

Trending Articles