поменяйте флажок на круг изображения ajax

Question

В настоящее время у меня есть сетка с кучей флажков - при нажатии на флажок появляется предупреждение о том, что ваш профиль был обновлен. Как бы я изменил это вместо предупреждения, чтобы просто установить флажок на ajax circle gif? Я понимаю, что могу передать это в div с помощью innerhtml и сделать его текстовым предупреждением, но я не знаю, как удалить div.

Код для флажков:

<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 метод:

$.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

Вы сами сделали трудный бит.

Я могу дать вам общий обзор.

Поставьте флажок и элемент div, содержащий изображение ajax, рядом друг с другом.Сначала отображается флажок, скрыть div.

В каждой из функций обратного вызова вашего ajax-запроса установите флажок и укажите div.Вы также можете использовать встроенные в jQuery методы затухания / скольжения для еще лучшего эффекта.

Если это не имеет смысла, дайте мне знать.Я набросаю некоторый код.

РЕДАКТИРОВАТЬ:

примерно так:

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

и внутри функции CheckEnt() (котораявызывается при нажатии флажка):

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

и, наконец, в функции успеха вашего вызова ajax

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

Я не проверял все это, но он должен работать.