-1

Can anyone tell me why does this $.ajax() cause the webpage to do a postback twice? Isn't it suppose to fire only once?

This is what I saw when debugging in Visual Studio and it is causing the server-side script to run twice. I'm using JQuery version 2.0.0 .

The ThrobblerAnimationBegin() function is what show the processing icon animation to let the end-user know the webpage is busy executing the script. The @{} bracket is the server-side script, this is how I was able to tell when a postback was made to the server-side backend, by using debugging breakpoint.

Thanks...

@{
    string foo = "Me Me Me";
    foo += ", fee fee fee";
}<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>BookItOut - A New Dawn In Auto Pricing"</title>
        <script type="text/javascript" src="~/Member/Scripts/jquery-v2.0.3/jquery-v2.0.3.min.js"></script>
        <script type="text/javascript">
            function ThrobblerAnimationBegin() {
                return $.ajax();
            }
            function ThrobblerAnimationEnd() {
            }
            $(document).ready(function () {
                function DrawVehicleCostPerDays() {
                    var $deferred = $.Deferred();  //$.Deferred.done() --> to allow ayschronous sleep/delay until this current function() is finish before running done() afterward to continue. [[http://stackoverflow.com/questions/12116505/wait-till-a-function-is-finished-until-running-another-function]]... 

                    $deferred.resolve();
                    return $deferred;
                }

                //Load the script...
                ThrobblerAnimationBegin().done(function () {
                    //alert("done");
                    DrawVehicleCostPerDays(
                        ).done(function () { ThrobblerAnimationEnd(); /*alert('success');*/ }
                        ).fail(function () { ThrobblerAnimationEnd(); /*alert('failed');*/ });
                });
            });
        </script>
    </head>
    <body>

    </body>
</html>

EDIT as per request Here's the snapshot from Firefox's Firebug.

enter image description here

fletchsod
  • 3,560
  • 7
  • 39
  • 65
  • 1
    Check the Network tab of your browser's developer console to see how many requests are actually being made. – Patrick Q Jul 24 '14 at 17:51
  • See the picture snapshot, in the EDIT section. – fletchsod Jul 24 '14 at 18:02
  • 1
    the fact that the first get is before jquery looks suspect. I don't see anything in your code that would cause the ajax to happen twice. – Kevin B Jul 24 '14 at 18:04
  • I converted the webpage to plain html and re-check firefox's firebug and it showed the same result. By the way, why is my post getting a -1? – fletchsod Jul 24 '14 at 18:35
  • 1
    Is your ajax calling the same page from which it is called? In other words, is `zz1.cshtml` the code you're providing above? – Patrick Q Jul 24 '14 at 18:42
  • @PatrickQ - Ah! I see where you're coming from. If no URL was specified then $.ajax() postback to the same current webpage. I did not see this short sightness on my part. I got this "$.ajax()" idea from a blog 2 years ago. After some researches and trials/errors I came upon this web link which works great for me ( http://www.bitstorm.org/weblog/2012-1/Deferred_and_promise_in_jQuery.html ). Thank you for pointing out the problem. Post your answer here and I'll give you point and accept your answer. – fletchsod Jul 24 '14 at 20:36

1 Answers1

2

Your ajax is not firing twice. Instead, what you are seeing is the initial page load (what you are counting as the first ajax request) and then the ajax request (what you were counting as the second). Since you did not specify a URL in the .ajax() call, it made a request to the same page, which is likely what confused you.

You should probably read the .ajax() documentation for simple examples of how to use it.

Patrick Q
  • 6,373
  • 2
  • 25
  • 34