Click here to Skip to main content
15,888,202 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I'm trying to enable a Send Registration div acting as a button when the user is not registered, but enable the edit button (div) and disable the Send Registration one when the user is registered.

Here's my Razor view:
HTML
<div class="contribution-list-results outer-box row">
    @{
        for (var i = 0; i < Model.ManageUsersVMList.Results.Count; i++)
        {
            <div class="col-xs-12 users-maintenance-list-results">
                <div class="checkbox-col detail-form-group checkout-form-group checkout-checkbox detail-line-item-checkboxes"
                     data-user="@Model.ManageUsersVMList.Results[i].UserKey",
                     data-is-registered="@Model.ManageUsersVMList.Results[i].Login">
                    @Html.CheckBoxFor(m => m.ManageUsersVMList.Results.SingleOrDefault(x => x.UserKey == Model.ManageUsersVMList.Results[i].UserKey).ManageUsersListItemCheckbox, new
               {
                   id = string.Format("ManageUsersListItemCheckbox{0}", i),
                   data_is_registered = Model.ManageUsersVMList.Results[i].Login
               })
                    <label for="@(string.Format("ManageUsersListItemCheckbox{0}", i))"><div></div></label>
                </div>
                <div class="user-key-col-label hidden-md hidden-lg">@Model.UserKeyLabel: </div>
                <div class="user-key-col admin-line-item">
                    @Model.ManageUsersVMList.Results[i].UserKey
                </div>
                <div class="fpid-col-label hidden-md hidden-lg">@Model.FPIDLabel:</div>
                <div class="fpid-col admin-line-item">
                    @Model.ManageUsersVMList.Results[i].FPID
                </div>

                <div class="full-name-col-label hidden-md hidden-lg">@Model.NameLabel:</div>
                <div class="full-name-col admin-line-item">
                    @Model.ManageUsersVMList.Results[i].Name
                </div>

                <div class="@(Model.IsPortraitExcluded ? "portrait-col-excluded-label" : "email-col-label") hidden-md hidden-lg">@Model.EmailLabel:</div>
                <div class="@(Model.IsPortraitExcluded ? "portrait-col-excluded" : "email-col") admin-line-item">
                    @Model.ManageUsersVMList.Results[i].Email
                </div>

                <div class="login-col-label hidden-md hidden-lg">@Model.LoginLabel:</div>
                <div class="login-col admin-line-item @(Model.ManageUsersVMList.Results[i].Login ? "true-checkmark" : "red-x")"></div>

                <div class="hidden-md hidden-lg @(Model.IsPortraitExcluded ? "portrait-col-excluded-role-label" : "role-col-label")">@Model.RoleLabel:</div>
                <div class="admin-line-item @(Model.IsPortraitExcluded ? "portrait-col-excluded-role" : "role-col") @(Model.ManageUsersVMList.Results[i].Role ? "true-checkmark" : "red-x")"></div>
                @*@if (!Model.IsPortraitExcluded)
                {
                    <div class="portrait-col-label hidden-md hidden-lg">@Model.PortraitLabel:</div>
                    <div class="portrait-col admin-line-item @((Model.ManageUsersVMList.Results[i].Portrait) ? "true-checkmark" : "red-x")"></div>
                }*@
            </div>
        }
        <div class="bottom-buttons col-xs-12">
            <div class="manage-users-registration resend-registration-button-disabled">
                @Html.HiddenFor(x => x.RegistrationUrl)
                <label>@Model.ManageUsersRegistrationLabel</label>
            </div>           
            <div class="manage-users-edit edit-button-disabled">
                @Html.HiddenFor(x => x.EditUrl)
                <label>@Model.ManageUsersEditLabel</label>
            </div>
        </div>

    }
</div>


What I have tried:

Here's my JavaScript function that controls the buttons:

JavaScript
function IsSendRegistrationOrEdit() {
        var numberOfCheckedBoxes = 0;
        $('#ManageUsers .detail-line-item-checkboxes input[type=checkbox]').each(function () {
            if ($(this).is(':checked'))
                numberOfCheckedBoxes++;
        });

        var adminMergeButton = $('.admin-merge-button');

        if (numberOfCheckedBoxes >= 2) {
            adminMergeButton.removeClass('admin-button-disabled');
            adminMergeButton.addClass('blue-border-submit-button background-hover-transition');
        }

        else {
            adminMergeButton.removeClass('blue-border-submit-button background-hover-transition');
            adminMergeButton.addClass('admin-button-disabled');
        }
        var manageUsersEdit = $('.manage-users-edit');
        var CheckBoxes = document.getElementsByTagName('input[type=checkbox]');
        var userLogged = CheckBoxes.data('is-registered') === 'True';
        var resendEmail = $('.manage-users-registration');

        if (numberOfCheckedBoxes === 1) {
            manageUsersEdit.removeClass('edit-button-disabled');
            manageUsersEdit.addClass('blue-border-submit-button background-hover-transition');            

            if ((checkBoxInput.is(':checked')) && (!userLogged))
            {                
                resendEmail.removeClass('resend-registration-button-disabled');
                resendEmail.addClass('blue-border-submit-button background-hover-transition');

            }
            else {
                resendEmail.removeClass('blue-border-submit-button background-hover-transition');
                resendEmail.addClass('resend-registration-button-disabled');

            }
        }
        else {
            manageUsersEdit.removeClass('blue-border-submit-button background-hover-transition');
            manageUsersEdit.addClass('edit-button-disabled');
        }
    };

Please help me. Thank you in advance for your time!
Posted
Updated 29-Jan-17 15:36pm
v2
Comments
So, which block of code is not working? Can you point out?
Member 12970966 30-Jan-17 12:36pm    
Here's the piece of code that's not working:

if (numberOfCheckedBoxes === 1) {
manageUsersEdit.removeClass('edit-button-disabled');
manageUsersEdit.addClass('blue-border-submit-button background-hover-transition');

if ((checkBoxInput.is(':checked')) && (!userLogged))
{
resendEmail.removeClass('resend-registration-button-disabled');
resendEmail.addClass('blue-border-submit-button background-hover-transition');

}
else {
resendEmail.removeClass('blue-border-submit-button background-hover-transition');
resendEmail.addClass('resend-registration-button-disabled');

}
}
else {
manageUsersEdit.removeClass('blue-border-submit-button background-hover-transition');
manageUsersEdit.addClass('edit-button-disabled');
}

1 solution

You may want to re-look into your current design, IMHO, these are the issues:
1. Why do you want to give the user who have registered the registration page? You can just give the registered users a different page for them to update their profiles.
2. Why disable controls, e.g. buttons, if they are not supposed to be used by certain users? Can you not render them in the first place.
3. For user-based pages, they should be composed on the server-side not on the client-side, i.e not with JavaScript, for obvious reason of source code accessibility.
 
Share this answer
 
v2
Comments
Member 12970966 30-Jan-17 12:36pm    
Unfortunately, I can't control any of these suggestions since this is an application built on certain requirements and I don't have the authority to suggest anything even if I disagree with anything. Registered and non-registered users don't have access to this page. It's only the admin user who can send or resend registration to users.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900