CODEWITHSUNDEEP
javascriptjqueryajax
Mickey
Mickey

Reputation: 149

ajax progress bar image hide and show

when i click a button i want to display a image and after finish the image hide. wht wrong with my script?

<script type="text/javascript">

$(element).click(function(){
    $(".navigation-jpg").show();
    $.ajax({
        success: function(){
            $(".navigation-jpg").hide();
        }
    });
});
</script>

<div class="ajax-content">

    <img src="navigation.jpg" alt="Loading" class="loading-gif" style="display:none"/>
    <div class="ajax-response">
    </div>
            <asp:Button ID="Button1" runat="server" Text="Button" />

       </div>

Upvotes: 0

Views: 1799

Answers (2)

David Fleeman
David Fleeman

Reputation: 2638

You are using the class navigation-jpg in your javascript, but are using class loading-gif in your HTML. Make that consistent and you are good.

Update: Other answerer also caught the use of $(element) instead of $('#Button1) on the event handler -- wanted to make sure my incomplete answer was updated.

Update #2: Yet found another issue. The javascript event handler is being attached before the HTML is found in the DOM. The result of this is that the event handler will not be attached. Either move the javascript below the HTML elements OR wrap the javascript code in a jQuery document.ready code like this:

$( document ).ready(function() {
    // your js code here
});

Update #3: The ajax call itself does not have enough attributes to actually make an ajax call. Here is a sample you may want to follow. You need to add the type and url at a minimum. If you are passing parameters, you will need data.

$.ajax({
    type: "POST",
    url: url,
    data: data,
    success: success
});

Update #4: Here is a more complete code snippet that hopefully guides you to a fix:

<script type="text/javascript">

// execute the javascript action after the entire DOM has been loaded
$( document ).ready(function() {

    // hide the image initially
    $(".loading-gif").hide();

    // attach the handler to the button
    $('#Button1').click(function () {
        $(".loading-gif").show();

        // provide enough information to the ajax function to make a call
        $.ajax({
            type: "POST",
            url: "some-other-page.html",
            success: function () {
                $(".loading-gif").hide();
            }
        });
    });
});
</script>

<div class="ajax-content">
    <img src="http://localhost:2169/Image/Icon/loading.gif" alt="Loading" class="loading-gif" />
    <div class="ajax-response">
        <asp:Button ID="Button1" runat="server" Text="Button" />
    </div>
</div>

Upvotes: 2

scrowler
scrowler

Reputation: 24406

You are looking for the .navigation-jpg class as your selector, when it's actually .loading-gif. And I'm guessing you don't actually leave $(element).click... there, you will replace it with a correct element selector yes?

$('#Button1').click(function(){
    $(".loading-gif").show();
    $.ajax({
        success: function(){
            $(".loading-gif").hide();
        }
    });
});

Upvotes: 1

Related Questions