1

I have ajax form on my view, but when I try to submit it I get the following error: Opera 12.16 console output:

Error thrown at line 541, column 3 in <anonymous function: parseJSON>(data) in http://mysite/Scripts/jquery-1.9.1.js:
    return window.JSON.parse( data );
called from line 33, column 2 in onError(error, inputElement) in http://mysite/Scripts/jquery.validate.unobtrusive.js:
    var container = $(this).find("[data-valmsg-for='" + inputElement[0].name + "']"),
called via Function.prototype.apply() from line 818, column 3 in <anonymous function: proxy>() in http://mysite/Scripts/jquery-1.9.1.js:
    return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) );
called from line 619, column 7 in <anonymous function: showLabel>(element, message) in http://mysite/Scripts/jquery.validate.js:
    this.settings.errorPlacement(label, $(element));
called from line 581, column 6 in <anonymous function: defaultShowErrors>() in http://mysite/Scripts/jquery.validate.js:
    this.showLabel(this.successList[i]);
called from line 377, column 5 in <anonymous function: showErrors>(errors) in http://mysite/Scripts/jquery.validate.js:
    this.defaultShowErrors();
called from line 326, column 4 in <anonymous function: form>() in http://mysite/Scripts/jquery.validate.js:
    this.showErrors();
called from line 72, column 5 in <anonymous function: validate>(event) in http://mysite/Scripts/jquery.validate.js:
    if (validator.form())
called via Function.prototype.apply() from line 3073, column 5 in <anonymous function: dispatch>(event) in http://mysite/Scripts/jquery-1.9.1.js:
    ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )
called via Function.prototype.apply() from line 2749, column 4 in <anonymous function: elemData.handle>(e) in http://mysite/Scripts/jquery-1.9.1.js:
    return typeof jQuery !== core_strundefined && (!e || jQuery.event.triggered !== e.type) ?

My form:

@using(Ajax.BeginForm("action",
                       "controller",
                       null,
                       new AjaxOptions
                           {
                               HttpMethod = "Post",
                               InsertionMode = InsertionMode.InsertAfter,
                               OnComplete = "completeRequest",
                               UpdateTargetId = "update-div"
                           }, new { @id = "my-ajax-form" }))
{...}

My java script file with completeRequest method

$(document).ready(function () {
    initializeSubmit();
});    

function initializeSubmit(){
    $('#myinput').change(function() {
        alert(); // alert works and after that I get that big error in browsers console
        $('#my-ajax-form').submit();
    });
}

function completeRequest(data) {
        var result = $.parseJSON(data.responseText);

        // do stuff
    }

Google chrome browser's console output:

ncaught SyntaxError: Unexpected token u       jquery-1.9.1.js:541
jQuery.extend.parseJSON                       jquery-1.9.1.js:541
onError                                       jquery.validate.unobtrusive.js:41
proxy                                         jquery-1.9.1.js:818
$.extend.showLabel                            jquery.validate.js:698
$.extend.defaultShowErrors                    jquery.validate.js:655
$.extend.showErrors                           jquery.validate.js:410
$.extend.form                                 jquery.validate.js:358
(anonymous function)                          jquery.validate.js:83
jQuery.event.dispatch                         jquery-1.9.1.js:3074
elemData.handle                               jquery-1.9.1.js:2750
jQuery.event.trigger                          jquery-1.9.1.js:2986
(anonymous function)                          jquery-1.9.1.js:3677
jQuery.extend.each                            jquery-1.9.1.js:648
jQuery.fn.jQuery.each                         jquery-1.9.1.js:270
jQuery.fn.extend.trigger                      jquery-1.9.1.js:3676
jQuery.fn.(anonymous function)                jquery-1.9.1.js:7403
(anonymous function)                          *******my-javascript-file.js:171******
jQuery.event.dispatch                         jquery-1.9.1.js:3074
elemData.handle                               jquery-1.9.1.js:2750

my-javascript-file.js:171 is actually line, where submit is called:

function initializeSubmit(){
        $('#myinput').change(function() {
            alert(); // alert works and after that I get that big error in browsers console
171:       $('#my-ajax-form').submit();
        });
    }

And here is actual jquery source code, which throws the exception:

if ( !(eventHandle = elemData.handle) ) {
            eventHandle = elemData.handle = function( e ) {
                // Discard the second event of a jQuery.event.trigger() and
                // when an event is called after a page has unloaded
                return typeof jQuery !== core_strundefined && (!e || jQuery.event.triggered !== e.type) ?
        2750: jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :
                    undefined;
            };
            // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
            eventHandle.elem = elem;
        }

And jQuery line 541

parseJSON: function( data ) {
        // Attempt to parse using the native JSON parser first
        if ( window.JSON && window.JSON.parse ) {
541:                    return window.JSON.parse( data );
//Uncaught SyntaxError: Unexpected token u
        }

Is this jQuery bug? Or what can be the issue? I'm stuck here, already, for about several hours.

P.S. The error is thrown BEFORE submit. Form is not posted yet.

This is error state in chrome debugger. enter image description here

P.P.S. I've found the strange solution: I added @Html.ValidationMessageFor() helpers for all model properties, and I've posted the form successfully, got the server side and hit my break point in controller. Still can not understand what is this problem in.

Dmytro
  • 16,668
  • 27
  • 80
  • 130
  • what exactly is your server returning? look at the network tab of browser console. – Kevin B Jul 31 '13 at 01:17
  • console.log(data); to see what format your data comes back in. You may not need to parse data if you are using the jQuery .ajax(); – carter Jul 31 '13 at 01:18
  • @KevinB, the thing is that form is not posted, I have a break point in my action and it is not hit. – Dmytro Jul 31 '13 at 01:19
  • Take a look at that `data` variable. Maybe data to parse is messed up. – Kamil Jul 31 '13 at 01:21
  • Yes, I've tied different browsers. In my question I posted two console outputs from **Opera 12.16** and **Google Chrome 28.0.1500.72** – Dmytro Jul 31 '13 at 01:23
  • @Kamil, The error is thrown BEFORE submit. Form is not posted yet. So I cannot actually debug my `completeRequest` javascript method, because it is not called. – Dmytro Jul 31 '13 at 01:27
  • It looks like this happends while some validation. Thats weird. – Kamil Jul 31 '13 at 01:38
  • Have you seen this? http://stackoverflow.com/questions/8927933/unobtrusive-validation-doesnt-work-with-ajax-beginform Maybe you are doing something wrong with form? – Kamil Jul 31 '13 at 01:40
  • @DmytroTsiniavskyi the error you are getting is in parseJSON, track down what exactly is calling it and why. – Kevin B Jul 31 '13 at 01:43

0 Answers0