Question

我有一个页面，我有3个表格。当我提交不同的提交时，我想显示3个不同的GIF，但相反，它显示所有三个的相同图像。此外，它不一致，因为它有时会在第一次点击时显示gif，然后在接下来的两次点击中显示，有时它会显示在所有三个上，但在此之后如果我再次点击提交结果显示但是它没有显示加载gif图像。这是我的代码：

<div id="wait"
  style="display: none; width: 32px; height: 43px; 
      position: absolute; top: 75%; left: 75%; padding: 2px;">
  <!-- this is one of the gifs -->
  <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>

我尝试使用不同的div ID为3个不同的图像等待，wait1和wait3，在此更改等待：

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

并在3个不同的div容器中添加了div id = wait，似乎没什么用。

Answer 1

我这样做（form2作为所有这些的例子，见变更评论）

<div id="wait"
  style="display: none; width: 32px; height: 43px; 
      position: absolute; top: 75%; left: 75%; padding: 2px;">
  <!-- Add ID to image to make it addressable -->
  <img id="waitimage" src="images/demo_wait.gif"
                width="32" height="32" />
    <br> <br>Please Wait
</div>


      form2.submit(function() {
            //Set correct wait image
            $("$waitimage").src = "images/demo_wait2.gif";
            //Show WAIT
            $("#wait").css("display", "block");
            //Perform call
            $.ajax({
                type : form2.attr('method'),
                url : form2.attr('action'),
                data : form2.serialize(),
                success : function(data) {
                    var result2 = data;
                    $('#content2').html(result2);
                    //HIDE wait
                    $("#wait").css("display", "none");
                }
            });
            return false;
        });

Answer 2

我会做的是：

我会创建一个gif模板。
然后，当提交发生时，我会以特定的形式添加它。
当ajax完成后，我会将其从表单中删除。

像这样：

1。模板创建：

var loadingGif = '<div class="wait">'+
                 '<img src="images/demo_wait.gif" width="32" height="32" />'+
                 '<br> <br>Please Wait'+
                 '</div>';

2。当表单提交发生时，我会追加它：

<script type="text/javascript">

    var loaderObj = {
       showGif : function(form){
            var loadingGif = '<div class="wait">'+
                 '<img src="images/demo_wait.gif" width="32" height="32" />'+
                 '<br> <br>Please Wait'+
                 '</div>';
            form.prepend(loadingGif); // <----prepend it here.
       },
       removeGif : function(form){
          form.find('.wait').remove();  // <--------remove it here.
       }
    };
    var form2 = $('#myform1');
    form2.submit(function() {
        $.ajax({
            type : form2.attr('method'),
            url : form2.attr('action'),
            data : form2.serialize(),
            beforeSend:function(){
                loaderObj.showGif(form);  //<-----show the loading gif here.
            },
            success : function(data) {
                var result2 = data;
                $('#content2').html(result2);
            },
            complete:function(){
               loaderObj.removeGif(form);  //<-----call to remove here.
            }
        });
        return false;
    });
</script>

AJAX加载gif不同的不同形式提交

2 个答案:

1。模板创建：

2。当表单提交发生时，我会追加它：