AJAX loading gif different for different form submits

[arushi tomar]

I have a page where I have 3 forms. I want to show 3 different gifs when i submit different submits, but instead, it shows the same image for all the three. Also, its inconsistent as sometimes it shows the gif on first click and then not on the next two clicks, sometimes it shows on all three, but after that if I click on submit again result is shown but it does not show to loading gif image. Here is my code:

<div id="wait"
style="display: none; width: 32px; height: 43px; position: absolute; top: 75%; left: 75%; padding: 2px;">
<img src="images/demo_wait.gif" width="32" height="32" /><br> <br>Please Wait
    </div>
    <div class="container">

        <h4 style="color: #447099;">Select a region to proceed</h4>
        <br> To Schedule:
        <form id="myform1" name="myform1"
            action="/AWSCustomerJavaWebFinal/ServiceAmazon" method="get"
            onsubmit="return promptMessage()">
            <select name="availableRegion" id="availableRegion"
                style="width: 142px; margin-left: 15px;" class="btn btn-primary">
                <option value="sr">Select Region</option>
                <option value="us-east-1">North Virginia</option>

            </select> Instance ID<input type="text" name="instanceId"> <input
                type="submit" id=button1 value="submit" class="btn btn-primary">

            <div id='content2'></div>
        </form>
        <script type="text/javascript">
            var form2 = $('#myform1');
            form2.submit(function() {

                $.ajax({
                    type : form2.attr('method'),
                    url : form2.attr('action'),
                    data : form2.serialize(),
                    success : function(data) {
                        var result2 = data;
                        $('#content2').html(result2);
                    }
                });
                return false;
            });

            $(document).ready(function() {
                $(document).ajaxStart(function() {
                    $("#wait").css("display", "block");
                });
                $(document).ajaxComplete(function() {
                    $("#wait").css("display", "none");
                });
            });
        </script>

    </div>
    <div class="container">
        <h3>View Instance Status:</h3>

        <form id="myform2" name="myform2"
            action="/AWSCustomerJavaWebFinal/ServiceInstances" method="get"
            onsubmit="return messagePrompt()">
            <select name="availableRegion" id="availableRegion"
                style="width: 142px; margin-left: 15px;" class="btn btn-primary">
                <option value="sr">Select Region</option>
                <option value="us-east-1">North Virginia</option>

            </select> <input type="submit" value="View Status" id="button2"
                class="btn btn-primary"><br></br>
            <div id='content'></div>
        </form>

        <script type="text/javascript">
            var form = $('#myform2');
            form.submit(function() {

                $.ajax({
                    type : form.attr('method'),
                    url : form.attr('action'),
                    data : form.serialize(),
                    success : function(data) {
                        var result = data;
                        $('#content').html(result);
                    }
                });
                return false;
            });

            $(document).ready(function() {
                $(document).ajaxStart(function() {
                    $("#wait").css("display", "block");
                });
                $(document).ajaxComplete(function() {
                    $("#wait").css("display", "none");
                });
            });
        </script>
    </div>
    <br>
</fieldset>
<div class="container">
    <form id="myform3" name="myform3" action="viewSchedule.jsp"
        method="get">
        <br> To view Schedule: <input type="submit"
            value="View Schedule" id="button3" class="btn btn-primary">

        <div id='content1'></div>
    </form>


    <script type="text/javascript">
        var form1 = $('#myform3');
        form1.submit(function() {
            $.ajax({
                type : form1.attr('method'),
                url : form1.attr('action'),
                data : form1.serialize(),
                success : function(data) {
                    var result1 = data;
                    $('#content1').html(result1);
                }
            });

            return false;
        });

        $(document).ready(function() {
            $(document).ajaxStart(function() {
                $("#wait").css("display", "block");
            });
            $(document).ajaxComplete(function() {
                $("#wait").css("display", "none");
            });
        });
    </script>
</div>

I tried to use different div ids for 3 different images wait, wait1 and wait3, changed waits in this:

$(document).ready(function() {
            $(document).ajaxStart(function() {
                $("#wait").css("display", "block");
            });
            $(document).ajaxComplete(function() {
                $("#wait").css("display", "none");
            });
        });

and added the div id=wait inside the 3 different div containers, nothing seems to work.

[Bear Bibeault]

Why is your script mixed in with your markup? Makes it really hard to find and read. Follow conventions and either place it in the head, or at the tail of the body.

In any case, that's a lot of code to look at. Perhaps you could use a debugger to narrow it down to where it's not doing what you expect and direct our attention to it.

[Srikkanth Mohanasundaram]

Hi Arushi,

ajaxStart is a global ajax event handler ( think of it as a configuration which needs to be done only once ). If you're doing it thrice the last executed code is going to override the previously setup configuration. If you want to show different images based on forms , the handler function should do some work to identify who triggered the ajax call and make the decision as to what image needs to be shown.

Thanks
Srikkanth