Question

Currently I have a grid with a bunch of checkboxes – When a checkbox is clicked it pops up an alert saying Your Profile has been updated. How would I change this instead of an alert to just having the checkbox change to the ajax circle gif? I realize I could push this to a div with some innerhtml and make it a text alert but I do not know how to remove the div.

Code for checkboxes:

<div id='dropdown<%= proId + entitlements[i].Id.ToString() %>'>
                              <%using (Ajax.BeginForm("UpdateProfileByProfileAdmin", new AjaxOptions { OnBegin = "function(){ ShowProgress(" + proId + entitlements[i].Id.ToString() + ");}", OnComplete = "function(){ HideProgress(" + proId + entitlements[i].Id.ToString() + ");}" }))
                                {
                                    if (reqMode == "Edit")
                                    {%>
                                        <%=Html.CheckBox(proId + entitlements[i].Id.ToString(), profile.PresenceIndicators[i], new { onclick = "CheckEnt('" + proId.ToString() + "', '" + profid.ToString() + "','" + URLUpdateProfile.ToString() + "','" + entitlements[i].Id.ToString() + "','" + softwareId + "')", @class = "riskRank_dd" })%>
                                    <%}
                                    else
                                    {%>
                                        <%=Html.CheckBox(proId + entitlements[i].Id.ToString(), profile.PresenceIndicators[i], new {disabled = true})%>
                                    <% }%>
                                 <input type="submit" value="Go" class="hiddenSubmit" />

AJAX Method:

$.ajax({
                    type: "Post",
                    url: URLUpdateProfile,
                    data: "processProfileId=" + processProfileId + "&enabled=" + value + "&entitlementId=" + entitlementId + "&softwareId=" +softwareId,
                    success: function(affectedRows) {

                        if (affectedRows == "\"0\"") {
                            alert('Unable to update. Please check');
                            $('#' + id).attr('checked', !value);
                        }
                        else if (affectedRows == "\"-2\"") {
                        alert('Profile have no entitlements selected. Please check.');
                            $('#' + id).attr('checked', !value);

                        }
                        else if (affectedRows == "\"1\"" || affectedRows == "\"2\"") {
                            alert('Profile is updated successfully.');
                        }
                        else {
                         alert('The profile is duplicating with' +' '+ affectedRows+'.'+' '+'Please check.')
                         $('#' + id).attr('checked', !value);
                        }
                    }
                });

Answer 1

You’ve done the difficult bit yourself.

I can give you a general overview.

Put a checkbox and a div containing the ajax image next to each other. Initially checkbox is displayed, hide the div.

In each of the callback functions of your ajax request, display the checkbox and div accordingly. You can also use jQuery’s built-in fade/slide methods for even better effect.

If this doesn’t make sense, let me know. I’ll scribble some code.

EDIT:

something like this :

<div class="checkbox"><%: Html.CheckBoxFor .... %> </div> <div class="ajaxImage" style="display:none"><img src="the image" /> </div>

and inside the CheckEnt() function (which is called when the checkbox is clicked) :

var theDiv = $(this).parent("div"); //get the parent div which contains the checkbox
theDiv.hide(); //you can also use .hide(400); to give a good slide out effect
var theImg = theDiv.next(); //get the ajax image div next to it
theImg.show();
$.ajax( { ... //make your ajax call now

and finally in the success function of your ajax call

theImg.hide();
theDiv.show(); //show the selected checkbox

I haven’t tested this all but it should work.