locked
How to set timer out/interval for onblur validation to finish before button click operation can start? RRS feed

  • Question

  • User-1549556126 posted

    I have a text box & a button which performs some desired operation that are time consuming. Ajax calls to the server to be precise. On the onblur event of the textbox I am fetching the name of a person from the data source using the unique identifier which includes opening a transaction to datasource executing the desired command fetching the output and showing up in the text. 

    On button click I am submitting the update using the similar approach. Now, because ajax call takes some time to post the update & fetch the output. When I am entering the id in the textbox and then clicking the button directly when the focus is on the textbox. The call on the button is executing before the validation happens any ideas how to make the validation happen before the button click submit call?

    Here's some pseudo code:

    @Html.TextBox("myTextbox", null, new { @class = "textbox"})
    <button id="btnSubmit"> submit </button>

    My Ajax Calls on the blur event (validate) looks something like:

     $(document).on('blur', '#myTextbox', function () {
                if ($.trim($(this).val()) != '') {
                    $.ajax({
                        async: true,
                        type: "POST",
                        url: "/Index/ValidateUser",
                        data: {
                            CAI: $('#myTextbox').val()
                        },
                        dataType: 'json',
                        success: function (response) {
                              $('#myTextbox').val(response.username);
                            }
                        }
                    });
                }
            });

      My Ajax Calls on the click event (submit) looks something like:

    $(document).on('click', '#btnSubmit', function () {
                if ($.trim($('#myTextbox').val()) != '') {
                    $.ajax({
                        async: true,
                        type: "POST",
                        url: "/Index/Submit",
                        data: {
                            CAI: $('#myTextbox').val()
                        },
                        dataType: 'json',
                        success: function (response) {
                              alert(response.successMessage);
                            }
                        }
                    });
                }
            });

    I am not able to understand why the submit operation on button click happens before the validation on blur by immediately clicking on the button without clicking anywhere else  while the textbox is focused. I am assuming if I add some kind of time interval before the ajax call on button click might trigger only after the blur ajax call is done. But if any better solution is available I am open to learn.

    Thursday, April 30, 2020 5:39 AM

All replies

  • User475983607 posted

    As clearly explained in your other thread, this design will NOT work.  Validate the user input in the button click handler as there is no way to force the user to press the tab button.  How about redesigning the UI to disable the btnSubmit button until the text input is valid.

    Secondly, events and AJAX are asynchronous in JavaScript.  If you need events handlers or AJAX functions to fire in a specific order then it is up to your to write this code using standard async JavaScript programming constructs. 

    Thursday, April 30, 2020 11:56 AM
  • User1535942433 posted

    Hi vyasnikul,

    Accroding to your description,as far as I think,you could encapsulate validate and submit event.Then you could call them in order.

    More details,you could refer  to below codes:

        <script>
            $(function () {
                $("#btnSubmit").on('click', function () {
                    if ($("#myTextbox").val() != "") {
                        validation();
                        submit();
                    }
                })
            })
        </script>
        <script type="text/javascript">
            function validation() {
                $.ajax({
                    async: true,
                    type: "POST",
                    url: "/validation/Text",
                    data: {
                        CAI: $('#myTextbox').val()
                    },
                    dataType: 'json',
                    success: function (response) {
                        $('#myTextbox').val(response);
                        alert("success");
                    }
                });
            }
            function submit() {
                $.ajax({
                    async: true,
                    type: "POST",
                    url: "/validation/Submit",
                    data: '{name: ' + $('#myTextbox').val() + '}',
                    dataType: 'json',
                    success: function (response) {
                        alert(response);
                    }
                });
            }
        </script>
    
     @Html.TextBox("myTextbox", null, new { @class = "textbox" })
            <button id="btnSubmit">submit</button>

    Result:

    Best regards,

    Yijing Sun

    Friday, May 1, 2020 7:49 AM
  • User475983607 posted

    yij sun

    Hi vyasnikul,

    Accroding to your description,as far as I think,you could encapsulate validate and submit event.Then you could call them in order.

    More details,you could refer  to below codes:

        <script>
            $(function () {
                $("#btnSubmit").on('click', function () {
                    if ($("#myTextbox").val() != "") {
                        validation();
                        submit();
                    }
                })
            })
        </script>
        <script type="text/javascript">
            function validation() {
                $.ajax({
                    async: true,
                    type: "POST",
                    url: "/validation/Text",
                    data: {
                        CAI: $('#myTextbox').val()
                    },
                    dataType: 'json',
                    success: function (response) {
                        $('#myTextbox').val(response);
                        alert("success");
                    }
                });
            }
            function submit() {
                $.ajax({
                    async: true,
                    type: "POST",
                    url: "/validation/Submit",
                    data: '{name: ' + $('#myTextbox').val() + '}',
                    dataType: 'json',
                    success: function (response) {
                        alert(response);
                    }
                });
            }
        </script>
    
     @Html.TextBox("myTextbox", null, new { @class = "textbox" })
            <button id="btnSubmit">submit</button>

    Result:

    This solution does not work like you think.   AJAX is asynchronous as stated above so it is a race which AJAX function finishes first.

    The following pattern is requiered.

     <script>
    	$(function () {
    		$("#btnSubmit").on('click', function () {
    			if ($("#myTextbox").val() != "") {
    				validateAndSubmit();
    			}
    		})
    	})
    </script>
    
    <script type="text/javascript">
    	function validateAndSubmit() {
    		$.ajax({
    			async: true,
    			type: "POST",
    			url: "/validation/Text",
    			data: {
    				CAI: $('#myTextbox').val()
    			},
    			dataType: 'json',
    			success: function (response) {
    				$('#myTextbox').val(response);
    				alert("success");
    				submit();
    			}
    		});
    	}
    	function submit() {
    		$.ajax({
    			async: true,
    			type: "POST",
    			url: "/validation/Submit",
    			data: '{name: ' + $('#myTextbox').val() + '}',
    			dataType: 'json',
    			success: function (response) {
    				alert(response);
    			}
    		});
    	}
    </script>

    Friday, May 1, 2020 12:04 PM