CODEWITHSUNDEEP
jqueryajax
colinreedy674
colinreedy674

Reputation: 365

Show / Hide loading gif

What i'm trying to do is once a button is pressed on a form, a loading gif will appear besides the button until the .php file is loaded.

My code works as it should, once i press the button the "loading.gif" appears besides the button as it should, the only thing is, once the data from the .php file is output to the screen i was wanting to disable the loading gif, i cannot think of the best way to do it.

        <div class="panel panel-primary">
            <div class="panel-heading">Display any backlinks for the current domain / url.</div>
            <div class="panel-body">

                    <form action="backlinks.php" id="backlinksForm" method="post" class="form-horizontal container-fluid" role="form">

                        <div class="row form-group">
                            <div class="col-sm-4 text-right"><label for="" class="control-label">Domain / URL: <a href="" data-toggle="tooltip" title="This is the URL / Page we will return the backlinks for"><span class="glyphicon glyphicon-question-sign"></span></a></label></div>
                            <div class="col-sm-8"><input class="form-control" type="text" id="backlink_url" name="backlink_url" value="" required="required" size="50" /></div>
                        </div>                  

                        <div class="row form-group">
                            <div class="col-sm-12 text-right">
                                <button type="submit" name="getBacklinks" class="btn btn-primary"><img id="imgLoading" class="hidden" src="images/loading.gif" alt="Loading..." />&nbsp;Source Backlinks</button>
                            </div>
                        </div>  

                    </form>
            </div>
            <div class="panel-footer">Enter your target URL and hit <b>Get Backlinks</b>!</div>
        </div>
        <div id="mainContent"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>        
<script>
$(document).ready(function(){
    $('#backlinksForm').on('submit', function(e){
        $('#imgLoading').removeClass('hidden');
        // Stop the form from submitting itself to the server.
        e.preventDefault();
        var backlink_url = $('#backlink_url').val();
        $.ajax({
            type: "POST",
            url: 'ajax-backlinks.php',
            data: {backlink_url: backlink_url, backlink_user_id: <?php echo $globId; ?>},
            success: function(data) {
                $('#mainContent').html(data);
            }
        });
    });
});
</script>

Any help would be appreciated.

Upvotes: 0

Views: 522

Answers (1)

sirlanceoflompoc
sirlanceoflompoc

Reputation: 1081

Once the AJAX call succeeds you can reset the imgLoading class back to a hidden state as follows: 

$.ajax({
        type: "POST",
        url: 'ajax-backlinks.php',
        data: {backlink_url: backlink_url, backlink_user_id: <?php echo $globId; ?>},
        success: function(data) {
            $('#mainContent').html(data);
            $('#imgLoading').addClass('hidden'); //Hides the loading gif after main content is loaded
        }
    });

Upvotes: 1

Related Questions