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);
            });

Answer 1

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"/>