Error "validator is undefined" occured when edit drop down list using jEditable

Question

I am using jeditable to do inline edit for my table. In my table i can edit text, datepicker and also dropdown.

However, when i edit the dropdown, i will get error in firebug:

validator is undefined
[Break On This Error] validator.settings[eventType] && v...ype].call(validator, this[0], event); 

Error is occured at either jquery.validate.js or jquery.js

However, I did not call any validate method when I edit my drop down list.

Following is the code to declare jeditable for dropdown:

  // Drop down
    $('.dropdown').editable('@(Url.Action("Edit", "Stock"))',
    {
        data: getFoodTypesList(),
        type: 'select',
        indicator: 'saving...',
        event: 'dblclick',
        //tooltip: 'Double click to edit...',
        style: 'inherit',
        width: '240px',
        submit: '<img src="@Url.Content("~/Content/Add_in_Images/ok.png")" alt="ok"/>',
        cancel: '<img src="@Url.Content("~/Content/Add_in_Images/cancel.png")" alt="cancel"/>',
        // Use callback function to assign display text for the field after edit
        callback: function (value, settings) {
            var temp = getFoodTypeName(value);
            $(this).text(temp);
            $.ajax({
                async: false,
                url: '@(Url.Action("GetStockTable", "Stock"))',
                type: 'GET',
                success: function (result) {
                    $('#tableplaceholder').html(result);
                    unitDropDown();
                }
            });
        }

    });

Error occur everytime i click on the dropdown to select an option. Any idea what is the cause? Or is there anyway I can "by pass" the somehow auto validation for the dropdown?

Please help... thank you very much...

EDIT:

Error shown in IE Developer Tool is different:

 'settings' is null or not an object

And it points to this line:

 // Datepicker
    $('.storagedatepicker').editable('/Stock/Edit',
    {
        type: 'datepicker',
        indicator: 'saving...',

which is the jeditable for datepicker field... I cant see why is it related...

Herthahertz

Can you provide a link to the page or upload an example to jsfiddle.net? – Nun

I am afraid the code is too long and complicated to only check for this problem..I got this in a partial view, and got lots of other dependencies which I dunno how to put it in jsfiddle.. it is my final year project so it is not up to internet... :( – Herthahertz

Answer 1

The error seems gone when I remove the

@using BeginForm

from my table...

I could not remember why am I including that but so far it still work fine without it.. I guess the error is triggered by the "default" validation apply to anything in the form tag..

Any comments and feedbacks are still welcomed and appreciated.. Thanks....

Herthahertz

Answer 2

This error happens when we place jEditable control inside of another form with jquery validation enabled on it. The reason for this is that jEditable itself creates a form and so you end up with one form inside of another one.

To disable validation on elements of a child form I've added the following line of code in "jquery.jeditable.js" script file right after the line

var form = $('<form />');

>

 form.validate({
                  ignore: ":input"
              });

Yarndyed