Bootstrap Snippet Modal Traversal using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="modal" id="modalUserRoleAdministration" tabindex="-1" role="dialog" aria-labelledby="editUserRecord">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="editUserRecord">Edit Record</h4>
                </div>
                <div id="EditUserRoleRecordModalContents" class="modal-body">
                    <input class="fromDateTicks" data-val="true" data-val-number="The field Ticks must be a number." data-val-required="The Ticks field is required." id="FromDate_Ticks" name="FromDate.Ticks" type="hidden" value="636262073460930000">
                    <input class="JustificationOriginal" id="JustificationOriginal" name="JustificationOriginal" type="hidden" value="Another Tester 1">
                    <input class="RoleStatusOriginal" id="RoleStatusOriginal" name="RoleStatusOriginal" type="hidden" value="Requested">
                    <input data-val="true" data-val-required="The UserId field is required." id="UserId" name="UserId" type="hidden" value="ac0c35ba-0c11-493d-8387-679b3b1e0669">
                    <div class="form-group">
                        <label for="FirstName">FirstName</label>
                        <input class="form-control firstName" id="FirstName" name="FirstName" readonly="readonly" type="text" value="Another">
                        <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
                    </div>
                    <div class="form-group">
                        <label for="RoleStatus">RoleStatus</label>
                        <select class="form-control RoleStatus" id="RoleStatus" name="RoleStatus" onchange="StatusHasChanged(statusDropdown)">
                            <option>Approved</option>
                            <option>Denied</option>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.panel {
    border-top: none;
}
.modal-body {
    height: 170px;
}
    .modal-body .form-control {
        min-width: 200px;
    }
    .modal-body > .form-group {
        margin: 0 10px 15px !important;
        float: left;
    }
    .modal-body label {
        font-size: 12px;
    }
.modal-dialog {
    width: auto;
}
.row input {
    background: #ffffff !important;
    box-shadow: none !important;
    border: 0 !important;
    cursor: pointer !important;
    max-width: none;
    padding: 0;
    height: initial;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
        $(document).ready(function () {
            //function GetRecordForUpdate(controlClicked) {
            //    $('#btnUpdateUserRoleRecord').css('visibility', 'hidden');
            //    var containerDiv = controlClicked.closest(".row");
            //    $('#modalUserRoleAdministration').modal();
            //    FindInputsToTraverse();
            //}
            //Added for testing:
            $("#openModal").click(function () {
                $("#modalUserRoleAdministration").modal();
            });
            function StatusHasChanged(statusDropdown) {
                var RoleStatus = statusDropdown.val();
                var RoleStatusOriginal = $('#RoleStatusOriginal').val();
                var JustificationOriginal = $('#JustificationOriginal').val();
                if (RoleStatus == RoleStatusOriginal) {  //if role hasn't changed
                    $('#Justification').val(JustificationOriginal);
                    $('#Justification').attr("readonly", true);
                    $('#btnUpdateUserRoleRecord').css('visibility', 'hidden');
                    FindInputsToTraverse();
                }
                else if (RoleStatus != RoleStatusOriginal) {  //if role has changed
                    $('#Justification').attr("readonly", false);
                    $('#btnUpdateUserRoleRecord').css('visibility', 'visible');
                    FindInputsToTraverse();
                }
                //Statuses of "Requested" should not be allowed to have justification changed or saved.  This helps prevent a valid status being changed to "Requested".
                if (RoleStatus == "Requested") {  //if role is 'requested'
                    $('#Justification').attr("readonly", true);
                    $('#btnUpdateUserRoleRecord').css('visibility', 'hidden');
                    FindInputsToTraverse();
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Modal Traversal"
Bootstrap 3.3.0 Snippet by wullaj

Related: See More

Questions / Comments:

"Modal Traversal" Bootstrap 3.3.0 Snippet by wullaj

Related: See More

Questions / Comments:

"Modal Traversal"
Bootstrap 3.3.0 Snippet by wullaj