locked
AJAX script event.preventDefault doesn't seem to be working RRS feed

  • Question

  • User-687931224 posted

    I am trying to add an AJAX call to a Webservice method in a RAZOR page so that the form does not post. I am somewhat new to jQuery but I think the syntax is correct.

        <script type="text/javascript">
            $(document).ready(function (event) {
                event.preventDefault;
                $("#btnGet").click(sendForm);
            });
    
            function sendForm() {
                //           debugger;
                var arForm = $('#frmImportResults').serializeArray();
                //alert(arForm);
    
                $.ajax({
                    url: "Services/WebService.asmx/GetImportResults",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({ formVars: arForm }),
                    dataType: "json",
                    success: function (result) {
                        var jEl = $("#divResults");
                        jEl.html(result.d).fadeIn(1000);
                        //setTimeout(function () { jEl.fadeOut(1000) }, 5000);
                    },
                    error: function (xhr, status) {
                        alert("An error occurred: " + status);
                    }
                });
                return false;
            }
        </script>
    

    Please note that the "return false" was not originally in the script. I placed that there to stop the form posting and that worked. But I was under the impression that event.preventDefault would do the same thing.  I posted here because I am working in WebMatrix. Can anyone see an error in my code?

    Wednesday, July 23, 2014 3:47 PM

Answers

  • User-760709272 posted

    Look at the jQuery docs for an example of what you're doing

    http://api.jquery.com/event.preventdefault/

    The reason it doesn't work for you is because the preventDefault you are using isn't being called as a method, you need preventDefault().  Also you are calling it from the ready event of the document, ie on the browser's "page loaded" event.  You want to pass the event param from the click event to the sendForm function and call preventDefault there.  As I said though, the above link has an example of the code.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 23, 2014 3:55 PM

All replies

  • User-760709272 posted

    Look at the jQuery docs for an example of what you're doing

    http://api.jquery.com/event.preventdefault/

    The reason it doesn't work for you is because the preventDefault you are using isn't being called as a method, you need preventDefault().  Also you are calling it from the ready event of the document, ie on the browser's "page loaded" event.  You want to pass the event param from the click event to the sendForm function and call preventDefault there.  As I said though, the above link has an example of the code.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 23, 2014 3:55 PM
  • User-687931224 posted

    Thank you AidyF,

    I will study the documentation you provided until I better understand what's going on with jQuery.

    Wednesday, July 23, 2014 4:04 PM