Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: vtype is marking field invalid before ajax returns

  1. #1
    Sencha User
    Join Date
    Jun 2007
    Posts
    266

    Default vtype is marking field invalid before ajax returns

    I have a custom vtype that looks to make sure emails are unique, and only specific domains are being used; via an ajax call

    Code:
    Ext.apply(Ext.form.VTypes, {
    	useremail: function (value, field) {
    	    var validfield = false;
    	    Ext.Ajax.request({
    	        url      	: '../admin/extjs.php?act=UserForm&method=validate',
    	        method: 'POST',
    	        params: {
    	            "task": 'checkuseremail',
    	            'tmpUserEmail': value,
    	            'tmpUserID': Ext.get("user-id").getValue()
    	        },
    	        success: function (response, options) {
    	            var resp = Ext.util.JSON.decode(response.responseText);
    	            if (resp == null) {
    	            	field.clearInvalid();
    	                validfield = true;
    	            } else {
    	            	validfield = false;
    	                field.markInvalid(resp.errormsg);
    	               // return validfield;
    	            }
    	            return validfield;
    	        },
    	        failure: function () {
    	            Ext.Msg.show({
    	                "title": "Error",
    	                "msg": "Connection Error!"
    	            });
    	        }
    	    });	
    	},

    So if f.validate() returns false, it goes into my markInvalid() function. I put breakpoints in both functions, and I see it going into the above ajax call, but THEN it hits the markInvalid() function, and the next breakpoint it hits is the "success" function listed above. the ajax call returns in 116ms, so it doesn't take long at all.

    What may be causing it not to wait for the server response before marking it an invalid field?

    I see the email field underlined red for a split second when I hit the submit button, but then it is valid again; but it's long enough to not allow me to submit the form because form.isValid() always fails because of that out of order processing I am experiencing.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    It's a code read failure. At what TIME do those callback functions execute?

    You have to learn to read Javascript in execution time frames.

    The useremail function returns before those callbacks are executed.

  3. #3
    Sencha User
    Join Date
    Jun 2007
    Posts
    266

    Default

    Not sure exactly what you are getting at. I assumed the callbacks were executed as soon as the response was received, and THEN it would return to here in the ext-all.js

    Code:
    if(this.vtype){
         var vt = Ext.form.VTypes;
         if(!vt[this.vtype](value, this)){
            this.markInvalid(this.vtypeText || vt[this.vtype +'Text']);
            return false;
         }
    }
    But it seems to hit that markInvalid before the callbacks are executed.

    My learning extjs book is coming this friday. But still having trouble grasping why it doesn't wait for the callback to execute before marking invalid.

  4. #4
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Read the code.

    I mean read it line by line, dry running it in your head as if you were the Javascript runtime.

    The thoughts that go through your mind should be

    1. Set validfield to false
    2. Send off the request
    3. Return


    That is a dry run of your validator.

  5. #5
    Sencha User
    Join Date
    Jun 2007
    Posts
    266

    Default

    Seriously, thanks for the replies. But I just don't see why it seems to be marking it invalid before the response comes back. I did move where it returns stuff, I thought that might be the problem. But the problem still remains.

    Code:
    useremail: function (value, field) {
            var validfield = false;
            Ext.Ajax.request({
                url      	: '../admin/extjs.php?act=UserForm&method=validate',
                method: 'POST',
                params: {
                    "task": 'checkuseremail',
                    'tmpUserEmail': value,
                    'tmpUserID': Ext.get("user-id").getValue()
                },
                success: function (response, options) {
                    var resp = Ext.util.JSON.decode(response.responseText);
                    if (!resp) {
                    	field.clearInvalid();
                        validfield = true;
                        return true;
                    } else {
                    	validfield = false;
                        field.markInvalid(resp.errormsg);
                       return false;
                    }
                },
                failure: function () {
                    Ext.Msg.show({
                        "title": "Error",
                        "msg": "Connection Error!"
                    });
                }
            });
        }
    Unless you have any other tips, I am going to abandon the form.isValid() function. I am completely stumped as to why it's invalidating the field before it hits the callback

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    READ. THE. CODE.

    It RETURNS before the response comes back!

    The success and failure properties are CALLBACKS.

    Callback functions executed in a completely separate execution context at some unspecifiable point in the future.

  7. #7
    Sencha User
    Join Date
    Jun 2007
    Posts
    266

    Default

    I removed the return statements, but it is still failing somewhere. For now I am going to try marking the fields valid on submit, and still do my error checking server side, and not try and do client side validation on form submit.

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    OK, don't think about what I told you.

  9. #9
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589

    Default

    The way this is coded it will never wait for the ajax to finish.
    Your vtype function always returns before ajax is finished.
    Think of it this way.

    Code:
    useremail: function (value, field) {
            var validfield = false;
            Ext.Ajax.request({
                url          : '../admin/extjs.php?act=UserForm&method=validate',
                method: 'POST',
                params: {
                    "task": 'checkuseremail',
                    'tmpUserEmail': value,
                    'tmpUserID': Ext.get("user-id").getValue()
                },
                success: function (response, options) {
                    var resp = Ext.util.JSON.decode(response.responseText);
                    if (!resp) {
                        field.clearInvalid();
                        validfield = true;
                        return true;
                    } else {
                        validfield = false;
                        field.markInvalid(resp.errormsg);
                       return false;
                    }
                },
                failure: function () {
                    Ext.Msg.show({
                        "title": "Error",
                        "msg": "Connection Error!"
                    });
                }
            });
            return;  //Even though this isn't there it is acting like it is. Which is normal for a function.
        }

  10. #10
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    The Ajax request is asynchronous. It fires an XMLHTTP request to the server and the response comes back seconds later after you code has returned.

    You might try:
    return true;

    at the end so Ext doesn't mark the field(s) invalid.

    You seem to be marking them invalid yourself in the success handler of the Ajax request.

    Something like this would work if the request were synchronous. Ext doesn't support it native.

    You will also have to wait for the Ajax to finish before submitting your form.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •