How can I implement simple loading image for this line of code

Question

I want to know how or what should be done in implementing loading image before my dialog pop's out? Any gif's will do. what function or line of code should I add in my function?

------------my jquery code:------------

 $(".red_img").click(function() {

                });

                $("#red_form").dialog({

                        modal:true,
                        buttons: {
                            "Done": function() {


                            },
                            Cancel: function() {
                                $(this).dialog("close");
                            }
                        }
                });
                $("#red_form").show(500);
            });

so you want us to read the whole code and give you a solution? — Shoban, Sep 17 '12 at 04:54
possible duplicate of [Want to show ajax loading gif](http://stackoverflow.com/questions/5617660/want-to-show-ajax-loading-gif) — nbrooks, Sep 17 '12 at 04:55

Littm · Accepted Answer · 2012-09-17T05:07:39.593

You could show your loading image at the beginning of your click event, and then hide the image just before displaying your dialog:

// Initially, your loading image must be hidden
$("#your_loading_image").hide();

$(".red_img").click(function() {
    var red_type = $(this).attr("title").trim();

    // Display your loading image here -----------------------------
    $("#your_loading_image").show();

    $.ajax({
        url: "get_attributes.php",
        type: "post",
        datatype: "json",
        data: {wtype: red_type},
        success: function(data) {
            var toAppend = '';
            if(typeof data === "object"){
                toAppend += "<tbody>";
                toAppend += "<tr></td><td class=datalabel>Type:</td><td>"+data['type']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Health:</td><td>"+data['health']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Attack:</td><td>"+data['attack']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Defense:</td><td>"+data['defense']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Speed:</td><td>"+data['speed']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Evade:</td><td>"+data['evade']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Special:</td><td>"+data['special']+"</td></tr>";
                toAppend += "</tbody>";
                $("tbody").remove();
                $("#red_form table").append(toAppend);
            }
        }
    });

    $("#red_form #name").val($(this).attr("alt").trim());

    // Hide your loading image here --------------------------------
    $("#your_loading_image").hide();

    $("#red_form").dialog({
        width:300,
        resizable:false,
        modal:true,
        buttons: {
            "Done": function() {

                if($("#red_form #name").val().trim()==''){
                    alert("Text field cannot be empty.");
                    $("#red_form #name").focus();
                }
                else if($("#red_form #name").val().trim()===$("#blue_name").val().trim()){
                    alert("Name cannot be the same by other player.");
                    $("#red_form #name").focus();
                }
                else {
                    $("#red_name").val($("#red_form #name").val().trim());
                    $("#red_type").val(red_type);
                    $("#red_form").hide(400);
                    $(this).dialog("close");
                }
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });
    $("#red_form").show(500);
});

where #your_loading_image is your loading image, like for example:

<img id="your_loading_image" src="your_loading_image_path.gif"/>

Hi mate! you mean you want to display the spinner for 10 sec for example then hide it? — Littm, Sep 17 '12 at 05:15
If so, yes you can by using the function `setInterval`. I think this link might interest you: http://stackoverflow.com/questions/914951/show-and-hide-divs-at-a-specific-time-interval-using-jquery — Littm, Sep 17 '12 at 05:17

score 1 · Answer 2 · answered Sep 17 '12 at 05:25

I hope you are seeking solution for a progress Indicator before your pop up dialog, to show the progress of Loading your Popup ,if yes then here is how you can implement this Progress Indicator along with Modal.

Step 1.

I have taken a simple Panel ,Inserted an Image in it and "Loading Please wait..." is the text I am trying to display.I have given set the Position of the panel to my desired Location on screen

<asp:Panel ID="ProgressIndicatorPanel" runat="server" Style="display: none" CssClass="modalPopup">
        <div id="ProgressDiv" class="progressStyle">
            <ul class="ProgressStyleTable" style="list-style:none;height:60px">
                <li style="position:static;float:left;margin-top:0.5em;margin-left:0.5em">
                    <asp:Image ID="ProgressImage" runat="server" SkinID="ProgressImage" />
                </li>
                <li style="position:static;float:left;margin-top:0.5em;margin-left:0.5em;margin-right:0.5em">
                    <span id="ProgressTextTableCell"> Loading, please wait... </span>
                </li>
            </ul>
        </div>
    </asp:Panel>

Step 2 As i want to disable the rest of the screen functnality during the Progress Indicator display I have used a modal Dialog as shown below.

<asp:ModalPopupExtender ID="Progress_ModalPopupExtender" runat="server" ClientIDMode="Static" BehaviorID="ProgressModalPopupBehaviour"
        PopupControlID="ProgressIndicatorPanel" TargetControlID="DummyDialogButton" BackgroundCssClass="ModalPopupBG" 
        RepositionMode="RepositionOnWindowResizeAndScroll" Drag="false" DropShadow="true">
    </asp:ModalPopupExtender>

Step 3

Now you need to write Javascript function by including this $("#ProgressImage").show();

How can I implement simple loading image for this line of code

2 Answers2