We help IT Professionals succeed at work.

How can Json data populate dropdown box?

lulu50
lulu50 used Ask the Experts™
on
Hi,

This is driving me crazy and I need your help please.

1. I have a dropdown list that has list such as px, dx....
2. I have another dropdown list that gets populated based on the first dropdown list
so if the user select from the first dropdown list px the second dropdown list should get populated with the list of px codes

the problem is when I inspect the element on the second dropdown list I do see my list getting populated and changing upon a different selection
but the issue is I don't see the changes on the bootstrap dropdown list.

This is what I have:

 $('#GroupSelect').multiselect(getGroupOptions(true));       //If I remove this code and the code below it will work but without the style 

        $("#ConditionSelect").change(function (event) {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    $('#GroupSelect').empty();
                    $('#GroupSelect').append($('<option>').text("Select"));
                    $.each(json, function (i, obj) {
                        $('#GroupSelect').append($('<option>').text(json[i].Text).attr('value', json[i].Value));
                    });
                    $('#GroupSelect').multiselect(getGroupOptions(true));                                   //If I remove this code and the code above it will work but without the style. 
                });
        });



  function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'

            }
        }



 <select id="GroupSelect" name="GroupSelect" class="btn btn-default dropdown-toggle">
                        <option value="0" selected>Select Group</option>
                        @foreach (var data in Model.SelectGroupDataSource)
                        {
                            if (data.Value == Model.HiddenFieldForSelectedCondition.ToString())
                            {
                                <option selected value="@data.Value">@data.Text</option>
                            }
                            else
                            {
                                <option value="@data.Value">@data.Text</option>
                            }
                        }
                    </select>

Open in new window

popup-window.png
popup-window2.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
ok, first, I would like you understand what bootstrap or plugins or framework like dot.Net replace/transform the conventional <select></select> HTML element by a dropdown a similar with more fucntionalies or better design
most of time...

1) they hide your initial <select></select> (most of time they don't replace it to store your values)
2) they build something with <div><span></span>....</div> or <ul><li></li>...</ul> to replicate/simulate a coolest dropdown

the issue most of time is they don't refresh their dropdown when you change directly the initial select
sometime they provide a function to resfresh

if they don't allow you to refresh upon your change on the initial (hidden) <select> one work around is :
1) delete their
2) recreate it upon your
so that look like a refresh/update
lulu50Web application

Author

Commented:
after hours of testing

I found out that the code works but if I remove this from the top
$('#GroupSelect').multiselect(getGroupOptions(true));

and

this from the function :
$('#GroupSelect').multiselect(getGroupOptions(true));  

If I remove both of them then it will work but without my style
the functionality works fine without using the multiselect but I do want the multiselect

the dropdown list will refresh and update without the style

How can I have it repopulate the select using the multiselect style?


 //$('#GroupSelect').multiselect(getGroupOptions(true));

        $("#ConditionSelect").change(function (event) {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    $('#GroupSelect').empty();
                    $('#GroupSelect').append($('<option>').text("Select"));
                    $.each(json, function (i, obj) {
                        $('#GroupSelect').append($('<option>').text(json[i].Text).attr('value', json[i].Value));
                    });
                     //$('#GroupSelect').multiselect(getGroupOptions(true));       
                });
        });

Open in new window




I attached an image of how it will look like
popup-window.png
popup-window2.png
popup-window3.png
leakim971Multitechnician
Top Expert 2014

Commented:
How can I have it repopulate the select using the multiselect style?

from my previous post :
1) delete their

So I believe after you populate your from your ajax call, you need to be sure to delete their
let me know if it's fine and we go to the next step

I mean, you should have the second dropdown with the right option, but not with the multiselect style on the screen, the previous one(for the second dropdown) is deleted
lulu50Web application

Author

Commented:
I'm confused and not sure how to do it!

but this will remove

$('#GroupSelect').remove();

I don't know where to put it
lulu50Web application

Author

Commented:
to create the dropdown list I use the following links


<link href="~/Content/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/bootstrap-multiselect.js" type="text/javascript"></script>

<link type="text/css" rel="stylesheet" href="~/Content/CWScss/jodit.min.css">
<script type="text/javascript" src="~/Scripts/jodit.min.js"></script>

<script>
    $(document).ready(function () {

$('#GroupSelect').multiselect(getGroupOptions(true));

     function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'

            }
        }


    });


</script>

 <select id="GroupSelect" name="GroupSelect" class="btn btn-default dropdown-toggle">
                        <option value="0" selected>Select Group</option>
                        @foreach (var data in Model.SelectGroupDataSource)
                        {
                            if (data.Value == Model.HiddenFieldForSelectedCondition.ToString())
                            {
                                <option selected value="@data.Value">@data.Text</option>
                            }
                            else
                            {
                                <option value="@data.Value">@data.Text</option>
                            }
                        }
                    </select>

Open in new window



<script >
    $(document).ready(function () {

        //var clone = $('#GroupSelect').clone(true, true); 
        //$('#GroupSelect').multiselect(getGroupOptions(true));
        //$('#GroupSelect').remove();

        $("#ConditionSelect").change(function (event) {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                     //I added the multiselect to it to see if it will work 
                    $('#GroupSelect').multiselect(getGroupOptions(true)).empty();
                    $('#GroupSelect').multiselect(getGroupOptions(true)).append($('<option>').text("Select"));
                    $.each(json, function (i, obj) {
                        $('#GroupSelect').multiselect(getGroupOptions(true)).append($('<option>').text(json[i].Text).attr('value', json[i].Value));
                    });

                     //$('#GroupSelect').multiselect(getGroupOptions(true));       
                });
        });

        function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'

            }
        }

       

    });


</script>

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
but this will remove
$('#GroupSelect').remove();

this remove/delete ONLY the initial <select></select>

I don't know where to put it

use it before adding the clone to the page

var clone = $('#GroupSelect').clone(true, true); 

Open in new window


After that, you also need to remove the bootstrap one, THIS IS YOUR ISSUE
leakim971Multitechnician
Top Expert 2014

Commented:
@lulu50

could you post the full rendered HTML page?
with Chrome browser, do a right click somewhere in the page, choose "inspect element"
locate the HTML tag, do a right click on it and choose "copy outerHTML"
and paste it here
lulu50Web application

Author

Commented:
the code below has the parent page and the dialog box partial view page

I attached the CSS files and JavaScript files for the multiselect

For multiselect dropdown list I have the below links: 

<link href="~/Content/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/bootstrap-multiselect.js" type="text/javascript"></script>

<link type="text/css" rel="stylesheet" href="~/Content/CWScss/jodit.min.css">
<script type="text/javascript" src="~/Scripts/jodit.min.js"></script>

Open in new window



<link href="/Content/bootstrap-multiselect.css" rel="stylesheet" type="text/css">
<script src="/Scripts/bootstrap-multiselect.js" type="text/javascript"></script>

<link type="text/css" rel="stylesheet" href="/Content/CWScss/jodit.min.css">
<script type="text/javascript" src="/Scripts/jodit.min.js"></script>



<script>
    $(document).ready(function () {

        // debugger;
        $("#FileCount").val("");

        $('#UploadFileDiv').hide();
        $('#RuleCommentsDiv').hide();
        $('#ActionAttributesDiv').hide();
        $('#ConditionAttributesDiv').hide();
        $('#RuleDescriptionDiv').hide();

        $('#RuleDetailprtDiv').hide();
        $('#RuleDetailchldDiv').hide();
        $('#SubmitDiv').hide();
        $('#ValidateDescription').hide();
        $('#ValidateConditionAttributesAndValues').hide();
        $('#ValidateActionAttributesAndValues').hide();

        $('#RuleIdentifierRequiredDiv').hide();
        $('#IsActiveRequiredDiv').hide();
        $('#VersionRequiredDiv').hide();
        $('#EnvironmentRequiredDiv').hide();
        $('#CQTicketRequiredDiv').hide();



        function getOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '400px'
            }
        }

        function getOptions2(isFilter) {
            return {
                buttonWidth: '300px'
            }
        }

        $('#RuleIdentifierDropdownListID').multiselect(getOptions(true));
        $('#Environment').multiselect(getOptions2(true));

        //debugger;
        if( 1 != ""
            && 1 != null
            && 1 != undefined
            && 1 == 1
            )
        {
            $('#UploadFileDiv').show();
            $('#RuleCommentsDiv').show();
            $('#ActionAttributesDiv').show();
            $('#ConditionAttributesDiv').show();
            $('#RuleDescriptionDiv').show();
            $('#RuleDetailprtDiv').show();
            $('#RuleDetailchldDiv').show();
            $('#SubmitDiv').show();
            $('.showhideRuleSetName').show();
            $('#showhideRuleIdentifierName').hide();

        }
        else
        {
            $('.showhideRuleSetName').hide();
            $('#UploadFileDiv').hide();
            $('#RuleCommentsDiv').hide();
            $('#ActionAttributesDiv').hide();
            $('#ConditionAttributesDiv').hide();
            $('#RuleDescriptionDiv').hide();
            $('#RuleDetailprtDiv').hide();
            $('#RuleDetailchldDiv').hide();
            $('#SubmitDiv').hide();
            $('.RuleSetClass').show();

        }

        var maxLength900 = 900;
        $('#RuleDescription').keyup(function () {
            var textlen = maxLength900 - $(this).val().length;
            $('#rcharsDescription').text(textlen);

            if ($("#Description").val() != '') {
                $('#ValidateDescription').hide();
            }
            else {
                $('#ValidateDescription').show();
            }
        });


        $('#CommentOrNotes').keyup(function () {
            var textlen = maxLength900 - $(this).val().length;
            $('#rcharsCommentsNotes').text(textlen);
        });



        jQuery(function () {
            var maxLength4000 = 4000;
            $(document).on("keyup paste touchend", function () {
                var text = $("#ConditionAttributesAndValues").val();
                var textlen = maxLength4000 - text.length;
                if (text.length > 4000) {
                    editor.value = text.substr(0, 4000);
                }
                $('#rcharsConditionAttributesAndValues').text(textlen);

                if ($("#ConditionAttributesAndValues").val() != '') {
                    $('#ValidateConditionAttributesAndValues').hide();
                }
                else {
                    $('#ValidateConditionAttributesAndValues').show();
                }
            });
            var editor = new Jodit("#ConditionAttributesAndValues");
        });



        jQuery(function () {
            var maxLength4000 = 4000;
            $(document).on("keyup paste touchend", function () {
                var text = $("#ActionAttributesAndValues").val();
                var textlen = maxLength4000 - text.length;
                if (text.length > 4000) {
                    editor.value = text.substr(0, 4000);
                }
                $('#rcharsActionAttributesAndValues').text(textlen);

                if ($("#ActionAttributesAndValues").val() != '') {
                    $('#ValidateActionAttributesAndValues').hide();
                }
                else {
                    $('#ValidateActionAttributesAndValues').show();
                }
            });
            var editor = new Jodit("#ActionAttributesAndValues");
        });




        $("#RuleIdentifier").keyup("input", function () {
            if ($("#RuleIdentifier").val() != '') {
                $('#RuleIdentifierRequiredDiv').hide();
            }
            else {
                $('#RuleIdentifierRequiredDiv').show();
            }
        });


        //$("#IsActive").click(function(){
        //    if($(this).is(":checked")){
        //        $('#IsActiveRequiredDiv').hide();
        //    }
        //    else if($(this).is(":not(:checked)")){
        //        $('#IsActiveRequiredDiv').show();
        //   }
        //   });



    

        $("#Version").keyup("input", function () {
            if ($("#Version").val() != '') {
                $('#VersionRequiredDiv').hide();
            }
            else {
                $('#VersionRequiredDiv').show();
            }
        });


        $("#Environment").on('change', function() {
            if ($("#Environment").val() != '') {
                $('#EnvironmentRequiredDiv').hide();
            }
            else {
                $('#EnvironmentRequiredDiv').show();
            }
        });



        $("#CQTicket").keyup("input", function () {
            if ($("#CQTicket").val() != '') {
                $('#CQTicketRequiredDiv').hide();
            }
            else {
                $('#CQTicketRequiredDiv').show();
            }
        });



        $(function () {
            $('#dialog').dialog({
                autoOpen: false,
                width: 950,
                height:600,
                resizable: true,
                title: 'Condition',
                modal: true,
                open: function(event, ui) {
                    $(this).load("/CareAdvanceBusinessRules/RulePartialView")
                    $(".ui-dialog-titlebar-close").hide();
                },
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                },
                closeOnEscape: false,
            });
            $("#opener").click(function (event) {
                event.preventDefault(); 
                $("#dialog").dialog("open");
            });
        });





    

   


        



        










    });







    function validateRuleForm()
    {
        // debugger;
        var returnVal = 0;
        if ($("#RuleIdentifier").val() == '') {
            $('#RuleIdentifierRequiredDiv').show();
            returnVal = 1;
        }
        //if($("#IsActive").is(":not(:checked)")){
        //    $('#IsActiveRequiredDiv').show();
        //    returnVal = 1;
        //}
        if ($("#Version").val() == '') {
            $('#VersionRequiredDiv').show();
            returnVal = 1;
        }
        if ($("#Environment").val() == '') {
            $('#EnvironmentRequiredDiv').show();
            returnVal = 1;
        }
        if ($("#CQTicket").val() == '') {
            $('#CQTicketRequiredDiv').show();
            returnVal = 1;
        }
        if ($("#RuleDescription").val() == '') {
            $('#ValidateDescription').show();
            returnVal = 1;
        }
        if ($("#ConditionAttributesAndValues").val() == '') {
            $('#ValidateConditionAttributesAndValues').show();
            returnVal = 1;
        }
        if ($("#ActionAttributesAndValues").val() == '') {
            $('#ValidateActionAttributesAndValues').show();
            returnVal = 1;
        }

        if (returnVal == 1)
        {
            return false;
        }
        else {
            $('#RuleForm').submit();
            return true;
        }
    }



    //Begin multiple file upload
    var counter = 0;
    function AddFileUpload()
    {
        var div = document.createElement('DIV');

        div.innerHTML = '<button class="btn btn-default glyphicon glyphicon-remove" style="height:41px; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; width:80px;border: 1px solid #BBB;cursor:pointer;" id="Button' + counter + '" type="button" ' +
          'value="Remove" onclick = "RemoveFileUpload(this)" >' +
          '</button>'  +

        '<input id="file' + counter + '" name = "files' +
        '" type="file" class="fileStyle" />';

        document.getElementById("FileUploadContainer").appendChild(div);

        counter++;

        $('#FileCount').val(counter);

    }


    function RemoveFileUpload(div)
    {
        var el = document.getElementById("FileUploadContainer");
        el.removeChild(div.parentNode);
        var children = el.getElementsByTagName('input');
        counter = 0;
        for (var i = 0; i < children.length;i++) {
            if (children[i].type.toLowerCase() == 'file') {
                var newname = 'file' + counter++;
                children[i].setAttribute('name', newname);
                children[i].id = newname;
            }
        }

        $('#FileCount').val(counter);

    }















</script>

<style type="text/css">
    .multiselect-container {
        width: 100% !important;
    }

    /* beginning Upload*/
    input.fileStyle {
        padding: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border: 1px dashed #BBB;
        text-align: left;
        background-color: #f1f2f2;
        cursor: pointer;
        width: 82%;
        color: #3d6183;
        font-weight: bold;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        display: inline-block;

    }
</style>



<form action="/CareAdvanceBusinessRules/Rule/1" enctype="multipart/form-data" id="RuleForm" method="post">        <div class="panel panel-default" style="border:none;margin-bottom:5px;">
            <div class="panel-heading" style="font-size:12px;">
                Home | <a href="/CareAdvanceBusinessRules/Rule/0">Rule</a>
<span>|</span> BCBSM Inpatient UM            </div>
        </div>
        <div class="panel panel-default" style="width:99.5%;margin-left:3px;">
            <input id="SubmitterBadgeId" name="SubmitterBadgeId" type="hidden" value="E133244">
            <input data-val="true" data-val-number="The field SubmitterUserId must be a number." id="SubmitterUserId" name="SubmitterUserId" type="hidden" value="138">
            <input id="MenuRuleSetName" name="MenuRuleSetName" type="hidden" value="BCBSM Inpatient UM">
            <input data-val="true" data-val-number="The field PassedRuleSetIdFromLeftMenu must be a number." data-val-required="The PassedRuleSetIdFromLeftMenu field is required." id="PassedRuleSetIdFromLeftMenu" name="PassedRuleSetIdFromLeftMenu" type="hidden" value="1">
            <div class="panel panel-default" style="width:99.5%;margin-left:3px;">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        RULE
                    </h3>
                </div>
            </div>

            <div class="panel panel-default" style="width:99.5%;margin-left:3px;padding-top:25px;padding-left:5px;padding-bottom:25px;">

                <table style="width:100%;">
                    <tbody>
                        

                            <tr class="showhideRuleSetName RuleSetClass">
                                <td style="width:10%;padding-left:115px;">Rule Set:</td>
                                <td style="width:53%;"> BCBSM Inpatient UM </td>
                                <td>&nbsp;</td>
                            </tr>                        <tr class="showhideRuleSetName">
                            <td style="float:right;margin-right:5px;">Rule Identifier<span style="color:#bc0606;">*</span>:</td>
                            <td>
                                <input class="form-control" id="RuleIdentifier" maxlength="480" name="RuleIdentifier" style="width:90%" type="text" value="">
                                <div id="RuleIdentifierRequiredDiv" style="color: rgb(188, 6, 6); font-weight: bold; display: none;">Required Field</div>
                            </td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr id="showhideRuleIdentifierName" style="display: none;">
                            <td style="float:right;margin-right:5px;">Rule Identifier:</td>
                            <td>
                                <span class="multiselect-native-select"><select id="RuleIdentifierDropdownListID" name="RuleIdentifierDropdownListID" class="btn btn-default dropdown-toggle">
                                    <option value="" selected="">None Selected</option>
                                            <option value="174">999</option>
                                            <option value="172">asdf</option>
                                            <option value="177">edrftg</option>
                                            <option value="176">mgmgmg</option>
                                            <option value="173">sdfsdf</option>
                                            <option value="175">zxcds</option>
                                </select><div class="btn-group" style="width: 400px;"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None Selected" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span class="multiselect-selected-text">None Selected</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu" style="max-height: 600px; overflow: hidden auto;"><li class="multiselect-item multiselect-filter" value="0"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text" placeholder="Search ..."><span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span></div></li><li class="active"><a tabindex="0"><label class="radio" title="None Selected"><input type="radio" value=""> None Selected</label></a></li><li><a tabindex="0"><label class="radio" title="999"><input type="radio" value="174"> 999</label></a></li><li><a tabindex="0"><label class="radio" title="asdf"><input type="radio" value="172"> asdf</label></a></li><li><a tabindex="0"><label class="radio" title="edrftg"><input type="radio" value="177"> edrftg</label></a></li><li><a tabindex="0"><label class="radio" title="mgmgmg"><input type="radio" value="176"> mgmgmg</label></a></li><li><a tabindex="0"><label class="radio" title="sdfsdf"><input type="radio" value="173"> sdfsdf</label></a></li><li><a tabindex="0"><label class="radio" title="zxcds"><input type="radio" value="175"> zxcds</label></a></li></ul></div></span>
                            </td>
                            <td>&nbsp;</td>
                        </tr>
                </tbody></table>
            </div>

            <div class="clear:both"></div>

            <div id="RuleDetailprtDiv" class="panel panel-default" style="width: 99.5%; margin-left: 3px; display: block;">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        RULE DETAIL
                    </h3>
                </div>
            </div>

            <div id="RuleDetailchldDiv" class="panel panel-default" style="width: 99.5%; margin-left: 3px; padding-top: 25px; padding-left: 5px; padding-bottom: 25px; display: block;">

                <table border="0">
                    <tbody>
                        <tr>
                            <td style="float:right;margin-right:5px;">
                                <input checked="checked" class="form-control" data-val="true" data-val-required="The IsActive field is required." id="IsActive" name="IsActive" style="height:20px; width:20px;display:normal;" type="checkbox" value="true"><input name="IsActive" type="hidden" value="false">
                            </td>
                            <td>
                                Is active
                                
                            </td>
                            <td style="float:right;margin-left:5px;">Environment:<span style="color:#bc0606;">*</span></td>
                            <td>
                                <span class="multiselect-native-select"><select id="Environment" name="Environment" class="btn btn-default dropdown-toggle">
                                    <option value="" selected="selected">None Selected</option>
                                        <option value="SIT">SIT</option>
                                        <option value="E2E">E2E</option>
                                        <option value="PROD">PROD</option>
                                </select><div class="btn-group" style="width: 300px;"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None Selected" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span class="multiselect-selected-text">None Selected</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class="active"><a tabindex="0"><label class="radio" title="None Selected"><input type="radio" value=""> None Selected</label></a></li><li><a tabindex="0"><label class="radio" title="SIT"><input type="radio" value="SIT"> SIT</label></a></li><li><a tabindex="0"><label class="radio" title="E2E"><input type="radio" value="E2E"> E2E</label></a></li><li><a tabindex="0"><label class="radio" title="PROD"><input type="radio" value="PROD"> PROD</label></a></li></ul></div></span>
                                <div id="EnvironmentRequiredDiv" style="color: rgb(188, 6, 6); font-weight: bold; display: none;">Required Field</div>
                            </td>
                            <td>&nbsp;</td>
                        </tr>

                        <tr>
                            <td style="width:10%;"> <span style="float:right;margin-right:5px;">Version<span style="color:#bc0606;">*</span>:</span></td>
                            <td style="width:20%;">
                                <input class="form-control" data-val="true" data-val-required="The Version field is required." id="Version" name="Version" style="width:100%;" type="text" value="">
                                <div id="VersionRequiredDiv" style="color: rgb(188, 6, 6); font-weight: bold; display: none;">Required Field</div>
                            </td>
                            <td style="width:10%;"><span style="float:right;margin-right:5px;">CQ Ticket<span style="color:#bc0606;">*</span>:</span></td>
                            <td style="width:20%">
                                <input class="form-control" data-val="true" data-val-required="The CQTicket field is required." id="CQTicket" name="CQTicket" style="width:100%;" type="text" value="">
                                <div id="CQTicketRequiredDiv" style="color: rgb(188, 6, 6); font-weight: bold; display: none;">Required Field</div>
                            </td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td style="float:right;margin-right:5px;"> Commit ID:</td>
                            <td>
                                <input class="form-control" id="CommitID" name="CommitID" style="width:100%;" type="text" value="">
                            </td>
                            <td style="float:right;">Commit Description:</td>
                            <td>
                                <input class="form-control" id="CommitDescription" name="CommitDescription" style="width:100%;" type="text" value="">
                            </td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td style="float:right;margin-right:5px;"> Created By:</td>
                            <td>
                                Makhoul, Latife
                            </td>
                            <td style="float:right;margin-left:5px;">Created Date:</td>
                            <td>12/7/2019 9:55:34 PM</td>
                            <td>&nbsp;</td>
                        </tr>


                    </tbody>
                </table>




            </div>


            <div class="clear:both"></div>

            <div id="RuleDescriptionDiv" class="panel panel-default" style="width: 99.5%; margin-left: 3px; display: block;">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        RULE DESCRIPTION<span style="color:#bc0606;">*</span>
                    </h3>
                </div>
                <div class="container" style="margin-left:0px;width:100%;">
                    <div class="col-xs-6" style="width:100%;margin-top:5px;">
                        <div class="form-group purple-border">
                            <textarea class="form-control" cols="20" data-val="true" data-val-required="The RuleDescription field is required." id="RuleDescription" maxlength="900" name="RuleDescription" rows="6" style="width:77%;font-size:12px;"></textarea>
                            <span id="rcharsDescription">900</span> Character(s) Remaining
                            <div id="ValidateDescription" style="color: rgb(188, 6, 6); font-weight: bold; display: none;">Required Field</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="clear:both"></div>
            <div id="ConditionAttributesDiv" class="panel panel-default" style="width: 99.5%; margin-left: 3px; display: block;">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        CONDITION ATTRIBUTE(S) AND VALUE(S)<span style="color:#bc0606;">*</span>
                    </h3>

                    <h3 class="panel-title">
                        <a id="opener" href="/CareAdvanceBusinessRules/RulePartialView">Add a condition </a>
                    </h3>
                </div>

                <div class="container" style="margin-left:0px;width:100%;">
                    <div class="col-xs-6" style="width:77%;margin-top:5px;">
                        <div class="form-group purple-border">
                            <div class="jodit_container jodit_default_theme jodit_toolbar_size-middle jodit_wysiwyg_mode" contenteditable="false" style="min-height: 200px; min-width: 200px; max-width: 100%; height: auto; width: auto;"><ul class="jodit_toolbar" style="width: auto;"><li class="jodit_toolbar_btn jodit_toolbar_btn-bold"><a role="button" href="javascript:void(0)" aria-label="Bold"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_bold"><path d="M747 1521q74 32 140 32 376 0 376-335 0-114-41-180-27-44-61.5-74t-67.5-46.5-80.5-25-84-10.5-94.5-2q-73 0-101 10 0 53-.5 159t-.5 158q0 8-1 67.5t-.5 96.5 4.5 83.5 12 66.5zm-14-746q42 7 109 7 82 0 143-13t110-44.5 74.5-89.5 25.5-142q0-70-29-122.5t-79-82-108-43.5-124-14q-50 0-130 13 0 50 4 151t4 152q0 27-.5 80t-.5 79q0 46 1 69zm-541 889l2-94q15-4 85-16t106-27q7-12 12.5-27t8.5-33.5 5.5-32.5 3-37.5.5-34v-65.5q0-982-22-1025-4-8-22-14.5t-44.5-11-49.5-7-48.5-4.5-30.5-3l-4-83q98-2 340-11.5t373-9.5q23 0 68.5.5t67.5.5q70 0 136.5 13t128.5 42 108 71 74 104.5 28 137.5q0 52-16.5 95.5t-39 72-64.5 57.5-73 45-84 40q154 35 256.5 134t102.5 248q0 100-35 179.5t-93.5 130.5-138 85.5-163.5 48.5-176 14q-44 0-132-3t-132-3q-106 0-307 11t-231 12z"></path></svg></span></a></li><li class="jodit_toolbar_btn jodit_toolbar_btn-image"><a role="button" href="javascript:void(0)" aria-label="Insert Image"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_image"><path d="M576 576q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1024 384v448h-1408v-192l320-320 160 160 512-512zm96-704h-1600q-13 0-22.5 9.5t-9.5 22.5v1216q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5v-1216q0-13-9.5-22.5t-22.5-9.5zm160 32v1216q0 66-47 113t-113 47h-1600q-66 0-113-47t-47-113v-1216q0-66 47-113t113-47h1600q66 0 113 47t47 113z"></path></svg></span></a></li><li class="jodit_toolbar_btn jodit_toolbar_btn-separator"></li><li class="jodit_toolbar_btn jodit_toolbar_btn-brush"><a role="button" href="javascript:void(0)" aria-label="Fill color or set the text color"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_brush"><path d="M896 1152q0-36-20-69-1-1-15.5-22.5t-25.5-38-25-44-21-50.5q-4-16-21-16t-21 16q-7 23-21 50.5t-25 44-25.5 38-15.5 22.5q-20 33-20 69 0 53 37.5 90.5t90.5 37.5 90.5-37.5 37.5-90.5zm512-128q0 212-150 362t-362 150-362-150-150-362q0-145 81-275 6-9 62.5-90.5t101-151 99.5-178 83-201.5q9-30 34-47t51-17 51.5 17 33.5 47q28 93 83 201.5t99.5 178 101 151 62.5 90.5q81 127 81 275z"></path></svg></span></a></li><li class="jodit_toolbar_btn jodit_with_dropdownlist jodit_toolbar_btn-paragraph"><a role="button" href="javascript:void(0)" aria-label="Insert format block"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_paragraph"><path d="M1534 189v73q0 29-18.5 61t-42.5 32q-50 0-54 1-26 6-32 31-3 11-3 64v1152q0 25-18 43t-43 18h-108q-25 0-43-18t-18-43v-1218h-143v1218q0 25-17.5 43t-43.5 18h-108q-26 0-43.5-18t-17.5-43v-496q-147-12-245-59-126-58-192-179-64-117-64-259 0-166 88-286 88-118 209-159 111-37 417-37h479q25 0 43 18t18 43z"></path></svg></span><span class="jodit_with_dropdownlist-trigger"></span></a></li><li class="jodit_toolbar_btn jodit_toolbar_btn-separator"></li><li class="jodit_toolbar_btn jodit_with_dropdownlist jodit_toolbar_btn-left"><a role="button" href="javascript:void(0)" aria-label="Align"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_left"><path d="M1792 1344v128q0 26-19 45t-45 19h-1664q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1664q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19h-1280q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1280q26 0 45 19t19 45zm256-384v128q0 26-19 45t-45 19h-1536q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1536q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19h-1152q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1152q26 0 45 19t19 45z"></path></svg></span><span class="jodit_with_dropdownlist-trigger"></span></a></li><li class="jodit_toolbar_btn jodit_toolbar_btn-separator"></li><li class="jodit_toolbar_btn jodit_toolbar_btn-undo jodit_disabled" disabled="disabled"><a role="button" href="javascript:void(0)" aria-label="Undo"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_undo"><path d="M1664 896q0 156-61 298t-164 245-245 164-298 61q-172 0-327-72.5t-264-204.5q-7-10-6.5-22.5t8.5-20.5l137-138q10-9 25-9 16 2 23 12 73 95 179 147t225 52q104 0 198.5-40.5t163.5-109.5 109.5-163.5 40.5-198.5-40.5-198.5-109.5-163.5-163.5-109.5-198.5-40.5q-98 0-188 35.5t-160 101.5l137 138q31 30 14 69-17 40-59 40h-448q-26 0-45-19t-19-45v-448q0-42 40-59 39-17 69 14l130 129q107-101 244.5-156.5t284.5-55.5q156 0 298 61t245 164 164 245 61 298z"></path></svg></span></a></li><li class="jodit_toolbar_btn jodit_toolbar_btn-redo jodit_disabled" disabled="disabled"><a role="button" href="javascript:void(0)" aria-label="Redo"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_redo">
    <path d="M1664 256v448q0 26-19 45t-45 19h-448q-42 0-59-40-17-39 14-69l138-138q-148-137-349-137-104 0-198.5 40.5t-163.5 109.5-109.5 163.5-40.5 198.5 40.5 198.5 109.5 163.5 163.5 109.5 198.5 40.5q119 0 225-52t179-147q7-10 23-12 14 0 25 9l137 138q9 8 9.5 20.5t-7.5 22.5q-109 132-264 204.5t-327 72.5q-156 0-298-61t-245-164-164-245-61-298 61-298 164-245 245-164 298-61q147 0 284.5 55.5t244.5 156.5l130-129q29-31 70-14 39 17 39 59z"></path>
</svg></span></a></li><li class="jodit_toolbar_btn jodit_toolbar_btn-separator"></li><li class="jodit_toolbar_btn jodit_toolbar_btn-eraser"><a role="button" href="javascript:void(0)" aria-label="Clear Formatting"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_eraser"><path d="M832 1408l336-384h-768l-336 384h768zm1013-1077q15 34 9.5 71.5t-30.5 65.5l-896 1024q-38 44-96 44h-768q-38 0-69.5-20.5t-47.5-54.5q-15-34-9.5-71.5t30.5-65.5l896-1024q38-44 96-44h768q38 0 69.5 20.5t47.5 54.5z"></path></svg></span></a></li><li class="jodit_toolbar_btn jodit_toolbar_btn-dots"><a role="button" href="javascript:void(0)"><span><svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xml:space="preserve" class="jodit_icon jodit_icon_dots">
    <circle cx="12" cy="12" r="2.2"></circle>
    <circle cx="12" cy="5" r="2.2"></circle>
    <circle cx="12" cy="19" r="2.2"></circle>
</svg></span></a></li></ul><div contenteditable="false" class="jodit_workplace" style="min-height: 150px; height: auto;"><div class="jodit_progress_bar"><div></div></div><div contenteditable="true" aria-disabled="false" tabindex="-1" class="jodit_wysiwyg" spellcheck="true" style="min-height: 148px;"></div><div class="jodit_error_box_for_messages"></div><span style="display: block; font-size: 14px; line-height: 18.2px; margin-top: 0px; margin-left: 0px;" class="jodit_placeholder"> </span><div class="jodit_source"><div class="jodit_source_mirror-fake ace_editor ace_hidpi ace-idle-fingers ace_dark"><textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0; font-size: 1px;"></textarea><div class="ace_gutter" aria-hidden="true"><div class="ace_layer ace_gutter-layer ace_folding-enabled" style="height: 1e+06px;"></div></div><div class="ace_scroller"><div class="ace_content"><div class="ace_layer ace_print-margin-layer"><div class="ace_print-margin" style="left: 4px; visibility: visible;"></div></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_text-layer" style="height: 1e+06px; margin: 0px 4px;"></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_cursor-layer ace_hidden-cursors"><div class="ace_cursor"></div></div></div></div><div class="ace_scrollbar ace_scrollbar-v" style="display: none; width: 22px;"><div class="ace_scrollbar-inner" style="width: 22px;">&nbsp;</div></div><div class="ace_scrollbar ace_scrollbar-h" style="display: none; height: 22px;"><div class="ace_scrollbar-inner" style="height: 22px;">&nbsp;</div></div><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: hidden;"><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: visible;"></div><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div></div></div><textarea class="jodit_source_mirror" style="height: 0px; display: none; min-height: 148px;"></textarea></div><div class="jodit_search"><div class="jodit_search_box"><div class="jodit_search_inputs"><input tabindex="0" class="jodit_search-query" placeholder="Search for" type="text"><input tabindex="0" class="jodit_search-replace" placeholder="Replace with" type="text"></div><div class="jodit_search_counts"><span>0/0</span></div><div class="jodit_search_buttons"><button tabindex="0" type="button" class="jodit_search_buttons-next"><svg viewBox="0 0 1792 1792">
    <path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"></path>
</svg></button><button tabindex="0" type="button" class="jodit_search_buttons-prev"><svg viewBox="0 0 1792 1792"><path d="M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z"></path></svg></button><button tabindex="0" type="button" class="jodit_search_buttons-cancel"><svg viewBox="0 0 16 16" style="stroke: #000000;">
    <g transform="translate(0,-1036.3622)">
        <path d="m 2,1050.3622 12,-12" style="fill:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"></path>
        <path d="m 2,1038.3622 12,12" style="fill:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"></path>
    </g>
</svg>
</button><button tabindex="0" type="button" class="jodit_search_buttons-replace">Replace</button></div></div></div></div><div class="jodit_statusbar" style="display: block;"><div class="jodit_statusbar_item jodit_statusbar_item-right"><span>Chars: 0</span></div><div class="jodit_statusbar_item jodit_statusbar_item-right"><span>Words: 0</span></div><div class="jodit_statusbar_item"><ul class="jodit_xpath"><li class="jodit_toolbar_btn jodit_toolbar_btn-selectall"><a role="button" href="javascript:void(0)" aria-label="Select all"><span><svg viewBox="0 0 18 18" class="jodit_icon jodit_icon_selectall">
    <g fill-rule="evenodd" stroke="none" stroke-width="1">
        <g transform="translate(-381.000000, -381.000000)">
            <g transform="translate(381.000000, 381.000000)">
                <path d="M0,2 L2,2 L2,0 C0.9,0 0,0.9 0,2 L0,2 Z M0,10 L2,10 L2,8 L0,8 L0,10 L0,10 Z M4,18 L6,18 L6,16 L4,16 L4,18 L4,18 Z M0,6 L2,6 L2,4 L0,4 L0,6 L0,6 Z M10,0 L8,0 L8,2 L10,2 L10,0 L10,0 Z M16,0 L16,2 L18,2 C18,0.9 17.1,0 16,0 L16,0 Z M2,18 L2,16 L0,16 C0,17.1 0.9,18 2,18 L2,18 Z M0,14 L2,14 L2,12 L0,12 L0,14 L0,14 Z M6,0 L4,0 L4,2 L6,2 L6,0 L6,0 Z M8,18 L10,18 L10,16 L8,16 L8,18 L8,18 Z M16,10 L18,10 L18,8 L16,8 L16,10 L16,10 Z M16,18 C17.1,18 18,17.1 18,16 L16,16 L16,18 L16,18 Z M16,6 L18,6 L18,4 L16,4 L16,6 L16,6 Z M16,14 L18,14 L18,12 L16,12 L16,14 L16,14 Z M12,18 L14,18 L14,16 L12,16 L12,18 L12,18 Z M12,2 L14,2 L14,0 L12,0 L12,2 L12,2 Z M4,14 L14,14 L14,4 L4,4 L4,14 L4,14 Z M6,6 L12,6 L12,12 L6,12 L6,6 L6,6 Z"></path>
            </g>
        </g>
    </g>
</svg></span></a></li></ul></div></div><div role="button" tabindex="-1" title="Break" class="jodit-add-new-line" style="display: none;"><span><svg viewBox="0 0 128 128" xml:space="preserve">
    <g>
        <polygon points="112.4560547,23.3203125 112.4560547,75.8154297 31.4853516,75.8154297 31.4853516,61.953125     16.0131836,72.6357422 0.5410156,83.3164063 16.0131836,93.9990234 31.4853516,104.6796875 31.4853516,90.8183594     112.4560547,90.8183594 112.4560547,90.8339844 127.4589844,90.8339844 127.4589844,23.3203125   "></polygon>
    </g>
</svg></span></div></div><textarea class="form-control" cols="20" data-val="true" data-val-length="The field ConditionAttributesAndValues must be a string with a maximum length of 4010." data-val-length-max="4010" data-val-required="The ConditionAttributesAndValues field is required." id="ConditionAttributesAndValues" name="ConditionAttributesAndValues" rows="2" style="width: 77%; display: none;"></textarea>
                            <span id="rcharsConditionAttributesAndValues">4000</span> Character(s) Remaining
                            <div id="ValidateConditionAttributesAndValues" style="color: rgb(188, 6, 6); font-weight: bold; display: none;">Required Field</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="clear:both"></div>
            <div id="ActionAttributesDiv" class="panel panel-default" style="width: 99.5%; margin-left: 3px; display: block;">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        ACTION ATTRIBUTE(S) AND VALUE(S)<span style="color:#bc0606;">*</span>
                    </h3>
                </div>
                <div class="container" style="margin-left:0px;width:100%;">
                    <div class="col-xs-6" style="width:77%;margin-top:5px;">
                        <div class="form-group purple-border">
                            <div class="jodit_container jodit_default_theme jodit_toolbar_size-middle jodit_wysiwyg_mode" contenteditable="false" style="min-height: 200px; min-width: 200px; max-width: 100%; height: auto; width: auto;"><ul class="jodit_toolbar" style="width: auto;"><li class="jodit_toolbar_btn jodit_toolbar_btn-bold"><a role="button" href="javascript:void(0)" aria-label="Bold"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_bold"><path d="M747 1521q74 32 140 32 376 0 376-335 0-114-41-180-27-44-61.5-74t-67.5-46.5-80.5-25-84-10.5-94.5-2q-73 0-101 10 0 53-.5 159t-.5 158q0 8-1 67.5t-.5 96.5 4.5 83.5 12 66.5zm-14-746q42 7 109 7 82 0 143-13t110-44.5 74.5-89.5 25.5-142q0-70-29-122.5t-79-82-108-43.5-124-14q-50 0-130 13 0 50 4 151t4 152q0 27-.5 80t-.5 79q0 46 1 69zm-541 889l2-94q15-4 85-16t106-27q7-12 12.5-27t8.5-33.5 5.5-32.5 3-37.5.5-34v-65.5q0-982-22-1025-4-8-22-14.5t-44.5-11-49.5-7-48.5-4.5-30.5-3l-4-83q98-2 340-11.5t373-9.5q23 0 68.5.5t67.5.5q70 0 136.5 13t128.5 42 108 71 74 104.5 28 137.5q0 52-16.5 95.5t-39 72-64.5 57.5-73 45-84 40q154 35 256.5 134t102.5 248q0 100-35 179.5t-93.5 130.5-138 85.5-163.5 48.5-176 14q-44 0-132-3t-132-3q-106 0-307 11t-231 12z"></path></svg></span></a></li><li class="jodit_toolbar_btn jodit_toolbar_btn-image"><a role="button" href="javascript:void(0)" aria-label="Insert Image"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_image"><path d="M576 576q0 80-56 136t-136 56-136-56-56-136 56-136 136-56 136 56 56 136zm1024 384v448h-1408v-192l320-320 160 160 512-512zm96-704h-1600q-13 0-22.5 9.5t-9.5 22.5v1216q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5v-1216q0-13-9.5-22.5t-22.5-9.5zm160 32v1216q0 66-47 113t-113 47h-1600q-66 0-113-47t-47-113v-1216q0-66 47-113t113-47h1600q66 0 113 47t47 113z"></path></svg></span></a></li><li class="jodit_toolbar_btn jodit_toolbar_btn-separator"></li><li class="jodit_toolbar_btn jodit_toolbar_btn-brush"><a role="button" href="javascript:void(0)" aria-label="Fill color or set the text color"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_brush"><path d="M896 1152q0-36-20-69-1-1-15.5-22.5t-25.5-38-25-44-21-50.5q-4-16-21-16t-21 16q-7 23-21 50.5t-25 44-25.5 38-15.5 22.5q-20 33-20 69 0 53 37.5 90.5t90.5 37.5 90.5-37.5 37.5-90.5zm512-128q0 212-150 362t-362 150-362-150-150-362q0-145 81-275 6-9 62.5-90.5t101-151 99.5-178 83-201.5q9-30 34-47t51-17 51.5 17 33.5 47q28 93 83 201.5t99.5 178 101 151 62.5 90.5q81 127 81 275z"></path></svg></span></a></li><li class="jodit_toolbar_btn jodit_with_dropdownlist jodit_toolbar_btn-paragraph"><a role="button" href="javascript:void(0)" aria-label="Insert format block"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_paragraph"><path d="M1534 189v73q0 29-18.5 61t-42.5 32q-50 0-54 1-26 6-32 31-3 11-3 64v1152q0 25-18 43t-43 18h-108q-25 0-43-18t-18-43v-1218h-143v1218q0 25-17.5 43t-43.5 18h-108q-26 0-43.5-18t-17.5-43v-496q-147-12-245-59-126-58-192-179-64-117-64-259 0-166 88-286 88-118 209-159 111-37 417-37h479q25 0 43 18t18 43z"></path></svg></span><span class="jodit_with_dropdownlist-trigger"></span></a></li><li class="jodit_toolbar_btn jodit_toolbar_btn-separator"></li><li class="jodit_toolbar_btn jodit_with_dropdownlist jodit_toolbar_btn-left"><a role="button" href="javascript:void(0)" aria-label="Align"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_left"><path d="M1792 1344v128q0 26-19 45t-45 19h-1664q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1664q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19h-1280q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1280q26 0 45 19t19 45zm256-384v128q0 26-19 45t-45 19h-1536q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1536q26 0 45 19t19 45zm-384-384v128q0 26-19 45t-45 19h-1152q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1152q26 0 45 19t19 45z"></path></svg></span><span class="jodit_with_dropdownlist-trigger"></span></a></li><li class="jodit_toolbar_btn jodit_toolbar_btn-separator"></li><li class="jodit_toolbar_btn jodit_toolbar_btn-undo jodit_disabled" disabled="disabled"><a role="button" href="javascript:void(0)" aria-label="Undo"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_undo"><path d="M1664 896q0 156-61 298t-164 245-245 164-298 61q-172 0-327-72.5t-264-204.5q-7-10-6.5-22.5t8.5-20.5l137-138q10-9 25-9 16 2 23 12 73 95 179 147t225 52q104 0 198.5-40.5t163.5-109.5 109.5-163.5 40.5-198.5-40.5-198.5-109.5-163.5-163.5-109.5-198.5-40.5q-98 0-188 35.5t-160 101.5l137 138q31 30 14 69-17 40-59 40h-448q-26 0-45-19t-19-45v-448q0-42 40-59 39-17 69 14l130 129q107-101 244.5-156.5t284.5-55.5q156 0 298 61t245 164 164 245 61 298z"></path></svg></span></a></li><li class="jodit_toolbar_btn jodit_toolbar_btn-redo jodit_disabled" disabled="disabled"><a role="button" href="javascript:void(0)" aria-label="Redo"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_redo">
    <path d="M1664 256v448q0 26-19 45t-45 19h-448q-42 0-59-40-17-39 14-69l138-138q-148-137-349-137-104 0-198.5 40.5t-163.5 109.5-109.5 163.5-40.5 198.5 40.5 198.5 109.5 163.5 163.5 109.5 198.5 40.5q119 0 225-52t179-147q7-10 23-12 14 0 25 9l137 138q9 8 9.5 20.5t-7.5 22.5q-109 132-264 204.5t-327 72.5q-156 0-298-61t-245-164-164-245-61-298 61-298 164-245 245-164 298-61q147 0 284.5 55.5t244.5 156.5l130-129q29-31 70-14 39 17 39 59z"></path>
</svg></span></a></li><li class="jodit_toolbar_btn jodit_toolbar_btn-separator"></li><li class="jodit_toolbar_btn jodit_toolbar_btn-eraser"><a role="button" href="javascript:void(0)" aria-label="Clear Formatting"><span><svg viewBox="0 0 1792 1792" class="jodit_icon jodit_icon_eraser"><path d="M832 1408l336-384h-768l-336 384h768zm1013-1077q15 34 9.5 71.5t-30.5 65.5l-896 1024q-38 44-96 44h-768q-38 0-69.5-20.5t-47.5-54.5q-15-34-9.5-71.5t30.5-65.5l896-1024q38-44 96-44h768q38 0 69.5 20.5t47.5 54.5z"></path></svg></span></a></li><li class="jodit_toolbar_btn jodit_toolbar_btn-dots"><a role="button" href="javascript:void(0)"><span><svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" xml:space="preserve" class="jodit_icon jodit_icon_dots">
    <circle cx="12" cy="12" r="2.2"></circle>
    <circle cx="12" cy="5" r="2.2"></circle>
    <circle cx="12" cy="19" r="2.2"></circle>
</svg></span></a></li></ul><div contenteditable="false" class="jodit_workplace" style="min-height: 150px; height: auto;"><div class="jodit_progress_bar"><div></div></div><div contenteditable="true" aria-disabled="false" tabindex="-1" class="jodit_wysiwyg" spellcheck="true" style="min-height: 148px;"></div><div class="jodit_error_box_for_messages"></div><span style="display: block; font-size: 14px; line-height: 18.2px; margin-top: 0px; margin-left: 0px;" class="jodit_placeholder"> </span><div class="jodit_source"><div class="jodit_source_mirror-fake ace_editor ace_hidpi ace-idle-fingers ace_dark"><textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0; font-size: 1px;"></textarea><div class="ace_gutter" aria-hidden="true"><div class="ace_layer ace_gutter-layer ace_folding-enabled" style="height: 1e+06px;"></div></div><div class="ace_scroller"><div class="ace_content"><div class="ace_layer ace_print-margin-layer"><div class="ace_print-margin" style="left: 4px; visibility: visible;"></div></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_text-layer" style="height: 1e+06px; margin: 0px 4px;"></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_cursor-layer ace_hidden-cursors"><div class="ace_cursor"></div></div></div></div><div class="ace_scrollbar ace_scrollbar-v" style="display: none; width: 22px;"><div class="ace_scrollbar-inner" style="width: 22px;">&nbsp;</div></div><div class="ace_scrollbar ace_scrollbar-h" style="display: none; height: 22px;"><div class="ace_scrollbar-inner" style="height: 22px;">&nbsp;</div></div><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: hidden;"><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: visible;"></div><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font: inherit; overflow: visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div></div></div><textarea class="jodit_source_mirror" style="height: 0px; display: none; min-height: 148px;"></textarea></div><div class="jodit_search"><div class="jodit_search_box"><div class="jodit_search_inputs"><input tabindex="0" class="jodit_search-query" placeholder="Search for" type="text"><input tabindex="0" class="jodit_search-replace" placeholder="Replace with" type="text"></div><div class="jodit_search_counts"><span>0/0</span></div><div class="jodit_search_buttons"><button tabindex="0" type="button" class="jodit_search_buttons-next"><svg viewBox="0 0 1792 1792">
    <path d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z"></path>
</svg></button><button tabindex="0" type="button" class="jodit_search_buttons-prev"><svg viewBox="0 0 1792 1792"><path d="M1395 1184q0 13-10 23l-50 50q-10 10-23 10t-23-10l-393-393-393 393q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l466 466q10 10 10 23z"></path></svg></button><button tabindex="0" type="button" class="jodit_search_buttons-cancel"><svg viewBox="0 0 16 16" style="stroke: #000000;">
    <g transform="translate(0,-1036.3622)">
        <path d="m 2,1050.3622 12,-12" style="fill:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"></path>
        <path d="m 2,1038.3622 12,12" style="fill:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"></path>
    </g>
</svg>
</button><button tabindex="0" type="button" class="jodit_search_buttons-replace">Replace</button></div></div></div></div><div class="jodit_statusbar" style="display: block;"><div class="jodit_statusbar_item jodit_statusbar_item-right"><span>Chars: 0</span></div><div class="jodit_statusbar_item jodit_statusbar_item-right"><span>Words: 0</span></div><div class="jodit_statusbar_item"><ul class="jodit_xpath"><li class="jodit_toolbar_btn jodit_toolbar_btn-selectall"><a role="button" href="javascript:void(0)" aria-label="Select all"><span><svg viewBox="0 0 18 18" class="jodit_icon jodit_icon_selectall">
    <g fill-rule="evenodd" stroke="none" stroke-width="1">
        <g transform="translate(-381.000000, -381.000000)">
            <g transform="translate(381.000000, 381.000000)">
                <path d="M0,2 L2,2 L2,0 C0.9,0 0,0.9 0,2 L0,2 Z M0,10 L2,10 L2,8 L0,8 L0,10 L0,10 Z M4,18 L6,18 L6,16 L4,16 L4,18 L4,18 Z M0,6 L2,6 L2,4 L0,4 L0,6 L0,6 Z M10,0 L8,0 L8,2 L10,2 L10,0 L10,0 Z M16,0 L16,2 L18,2 C18,0.9 17.1,0 16,0 L16,0 Z M2,18 L2,16 L0,16 C0,17.1 0.9,18 2,18 L2,18 Z M0,14 L2,14 L2,12 L0,12 L0,14 L0,14 Z M6,0 L4,0 L4,2 L6,2 L6,0 L6,0 Z M8,18 L10,18 L10,16 L8,16 L8,18 L8,18 Z M16,10 L18,10 L18,8 L16,8 L16,10 L16,10 Z M16,18 C17.1,18 18,17.1 18,16 L16,16 L16,18 L16,18 Z M16,6 L18,6 L18,4 L16,4 L16,6 L16,6 Z M16,14 L18,14 L18,12 L16,12 L16,14 L16,14 Z M12,18 L14,18 L14,16 L12,16 L12,18 L12,18 Z M12,2 L14,2 L14,0 L12,0 L12,2 L12,2 Z M4,14 L14,14 L14,4 L4,4 L4,14 L4,14 Z M6,6 L12,6 L12,12 L6,12 L6,6 L6,6 Z"></path>
            </g>
        </g>
    </g>
</svg></span></a></li></ul></div></div><div role="button" tabindex="-1" title="Break" class="jodit-add-new-line"><span><svg viewBox="0 0 128 128" xml:space="preserve">
    <g>
        <polygon points="112.4560547,23.3203125 112.4560547,75.8154297 31.4853516,75.8154297 31.4853516,61.953125     16.0131836,72.6357422 0.5410156,83.3164063 16.0131836,93.9990234 31.4853516,104.6796875 31.4853516,90.8183594     112.4560547,90.8183594 112.4560547,90.8339844 127.4589844,90.8339844 127.4589844,23.3203125   "></polygon>
    </g>
</svg></span></div></div><textarea class="form-control" cols="20" data-val="true" data-val-length="The field ActionAttributesAndValues must be a string with a maximum length of 4010." data-val-length-max="4010" data-val-required="The ActionAttributesAndValues field is required." id="ActionAttributesAndValues" name="ActionAttributesAndValues" rows="2" style="width: 77%; display: none;"></textarea>
                            <span id="rcharsActionAttributesAndValues">4000</span> Character(s) Remaining
                            <div id="ValidateActionAttributesAndValues" style="color: rgb(188, 6, 6); font-weight: bold; display: none;">Required Field</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="clear:both"></div>
            <div id="RuleCommentsDiv" class="panel panel-default" style="width: 99.5%; margin-left: 3px; display: block;">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        RULE COMMENTS/NOTES
                    </h3>
                </div>
                <div class="container" style="margin-left:0px;width:100%;">
                    <div class="col-xs-6" style="width:100%;margin-top:5px;">
                        <div class="form-group purple-border">
                            <textarea class="form-control" cols="20" id="CommentOrNotes" maxlength="900" name="CommentOrNotes" rows="6" style="width:77%"></textarea>
                            <span id="rcharsCommentsNotes">900</span> Character(s) Remaining
                        </div>
                    </div>
                </div>
            </div>


            <div class="clear:both"></div>

            <div id="UploadFileDiv" class="panel panel-default" style="width: 99.5%; margin-left: 3px; display: block;">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Attachment(s)
                        (Attach multiple files.)
                    </h3>
                </div>
                <input type="hidden" name="FileCount" id="FileCount" value="">
                <div class="container" style="margin-left:0px;width:100%;">
                    <div class="col-xs-6" style="width:100%;margin-top:5px;margin-bottom:25px;">
                        <div class="form-group" style="padding-bottom:10px;">
                            <div class="col-sm-9" style="width:88%;">
                                <button name="Button1" id="Button1" type="button" style="border: 0; background: transparent;cursor:pointer;" onclick="AddFileUpload();">
                                    Add a file: <img src="/Content/images/add.png" alt="Add">
                                </button>
                                <br><br>
                                <div id="FileUploadContainer">
                                    
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div id="SubmitDiv" class="panel panel-default" style="width: 99.5%; margin-left: 3px; padding-top: 25px; padding-left: 5px; padding-bottom: 25px; display: block;">
                <table class="table">
                    <tbody><tr>
                        <td>
                            <div class="panel panel-default" style="width:100%;">
                                <input href="#" class="btn btn-lg btn-success btn-block" onclick="return validateRuleForm();" type="button" value="Save" style="width:15%;font-size:13px;font-weight:bold;">
                                <input onclick="Exit();" class="btn btn-lg btn-success btn-block" type="button" value="Cancel" style="width:15%;font-size:13px;font-weight:bold;">
                            </div>
                        </td>
                    </tr>
                </tbody></table>
            </div>
        </div>
</form>





                    </div>
                </td>
            </tr>
        </tbody></table>

        <!-- End Body -->

        <div style="clear:both;"></div>
        <!-- Footer -->

        <div class="footer" style="width:100%;background-color:#f4f4f4;color:#000000; text-align:center;float:right;border-top:1px solid #ccc;border-bottom:1px solid #ccc;">
            <a href="#">
                Help |
            </a> <a href="mailto:BCNBusinessConfiguration@BCBSM.com?subject=CWS">
                Contact Us
            </a> <br>
            © 2019 Blue Care Network of Michigan is a nonprofit corporation and independent licensee of the Blue Cross and Blue Shield Association.
        </div>
    </div>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"e2f62318683f46a7b726e4491cc54661"}
</script>
<script type="text/javascript" src="http://localhost:55524/a639dcce720043449b78f53f256a7fba/browserLink" async="async"></script>
<!-- End Browser Link -->



<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-dialog-buttons ui-draggable ui-resizable" aria-describedby="dialog" aria-labelledby="ui-id-1" style="position: absolute; height: auto; width: 950px; top: 299.333px; left: 0px; display: block; z-index: 101;"><div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix ui-draggable-handle"><span id="ui-id-1" class="ui-dialog-title">Condition</span><button type="button" class="ui-button ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-close" title="Close" style="display: none;"><span class="ui-button-icon ui-icon ui-icon-closethick"></span><span class="ui-button-icon-space"> </span>Close</button></div><div id="dialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; max-height: none; height: 501.2px;">



<script>
    $(document).ready(function () {

       // debugger;

        $('#OperatorSelect').multiselect(getOperatorOptions(true));
        $('#ConditionSelect').multiselect(getOperatorOptions(true));
        $('#ValueSelect').multiselect(getOperatorOptions(true));


        var clone = $('#GroupSelect').clone(true, true); 
        //$('#GroupSelect').multiselect(getGroupOptions(true));

        $("#ConditionSelect").change(function (event) {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    $('#GroupSelect').empty();
                    $('#GroupSelect').append($('<option>').text("Select"));
                    $.each(json, function (i, obj) {
                        $('#GroupSelect').append($('<option>').text(json[i].Text).attr('value', json[i].Value));
                    });
                     //$('#GroupSelect').multiselect(getGroupOptions(true));       
                });
        });


        function getOperatorOptions(isFilter) {
            return {
                buttonWidth: '170px'
            }
        }


        function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'

            }
        }


       

    });


</script>

<div id="RuleDetailprtDiv" class="panel panel-default" style="width:99.5%;margin-left:3px;">
    <div class="panel-heading">
        <h3 class="panel-title">
            CONDITION ATTRIBUTE(S) AND VALUE(S)
        </h3>
    </div>
</div>

<div id="RuleDetailchldDiv" class="panel panel-default" style="width:99.5%;margin-left:3px;padding-top:25px;padding-left:5px;padding-bottom:25px;">

<form action="/CareAdvanceBusinessRules/RulePartialView" data-ajax="true" data-ajax-failure="FailAlert" data-ajax-method="POST" data-ajax-success="binddata" id="RulePartialViewForm" method="post"><input data-val="true" data-val-number="The field HiddenFieldForSelectedCondition must be a number." data-val-required="The HiddenFieldForSelectedCondition field is required." id="HiddenFieldForSelectedCondition" name="HiddenFieldForSelectedCondition" type="hidden" value="1">    <table border="0">
        <tbody>
            <tr>
                <td style="width:20%;">
                    <span class="multiselect-native-select"><select id="OperatorSelect" name="OperatorSelect" class="btn btn-default dropdown-toggle">
                        <option value="">Select Operator</option>
                        <option value="IF">IF</option>
                        <option value="AND">AND</option>
                        <option value="OR">OR</option>
                    </select><div class="btn-group" style="width: 170px;"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Select Operator" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span class="multiselect-selected-text">Select Operator</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class="active"><a tabindex="0"><label class="radio" title="Select Operator"><input type="radio" value=""> Select Operator</label></a></li><li><a tabindex="0"><label class="radio" title="IF"><input type="radio" value="IF"> IF</label></a></li><li><a tabindex="0"><label class="radio" title="AND"><input type="radio" value="AND"> AND</label></a></li><li><a tabindex="0"><label class="radio" title="OR"><input type="radio" value="OR"> OR</label></a></li></ul></div></span>
                </td>
                <td style="width:20%;"> 
                    <span class="multiselect-native-select"><select id="ConditionSelect" name="ConditionSelect" class="btn btn-default dropdown-toggle">
                        <option value="0" selected="">Select Group</option>
                                <option value="3">Dx</option>
                                <option value="5">Group ID</option>
                                <option value="4">NPI</option>
                                <option value="6">Plan Code</option>
                                <option value="1">Px</option>
                    </select><div class="btn-group" style="width: 170px;"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Px" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span class="multiselect-selected-text">Px</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class=""><a tabindex="0"><label class="radio" title="Select Group"><input type="radio" value="0"> Select Group</label></a></li><li><a tabindex="0"><label class="radio" title="Dx"><input type="radio" value="3"> Dx</label></a></li><li><a tabindex="0"><label class="radio" title="Group ID"><input type="radio" value="5"> Group ID</label></a></li><li><a tabindex="0"><label class="radio" title="NPI"><input type="radio" value="4"> NPI</label></a></li><li><a tabindex="0"><label class="radio" title="Plan Code"><input type="radio" value="6"> Plan Code</label></a></li><li class="active"><a tabindex="0"><label class="radio" title="Px"><input type="radio" value="1"> Px</label></a></li></ul></div></span>
                </td>
                <td style="width:20%;">
                <span class="multiselect-native-select"><select id="ValueSelect" name="ValueSelect" class="btn btn-default dropdown-toggle">
                    <option value="">Select Value</option>
                    <option value="=">=</option>
                    <option value="<>">&lt;&gt;</option>
                    <option value="Between">Between</option>
                    <option value="IN">IN</option>
                    <option value="Not IN">Not IN</option>
                    <option value=">">&gt;</option>
                    <option value=">=">&gt;=</option>
                    <option value="<">&lt;</option>
                    <option value="<=">&lt;=</option>
                </select><div class="btn-group" style="width: 170px;"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Select Value" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span class="multiselect-selected-text">Select Value</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class="active"><a tabindex="0"><label class="radio" title="Select Value"><input type="radio" value=""> Select Value</label></a></li><li><a tabindex="0"><label class="radio" title="="><input type="radio" value="="> =</label></a></li><li><a tabindex="0"><label class="radio" title="<>"><input type="radio" value="<>"> &lt;&gt;</label></a></li><li><a tabindex="0"><label class="radio" title="Between"><input type="radio" value="Between"> Between</label></a></li><li><a tabindex="0"><label class="radio" title="IN"><input type="radio" value="IN"> IN</label></a></li><li><a tabindex="0"><label class="radio" title="Not IN"><input type="radio" value="Not IN"> Not IN</label></a></li><li><a tabindex="0"><label class="radio" title=">"><input type="radio" value=">"> &gt;</label></a></li><li><a tabindex="0"><label class="radio" title=">="><input type="radio" value=">="> &gt;=</label></a></li><li><a tabindex="0"><label class="radio" title="<"><input type="radio" value="<"> &lt;</label></a></li><li><a tabindex="0"><label class="radio" title="<="><input type="radio" value="<="> &lt;=</label></a></li></ul></div></span></td>
                <td style="width:40%">

                    <select id="GroupSelect" name="GroupSelect" class="btn btn-default dropdown-toggle">
                        <option>Select</option>
                        <option value="34">Px1</option>
                        <option value="38">Px2</option>
                        <option value="39">Px3</option>
                        <option value="40">Px4</option>
                   </select>

                </td>
            </tr>
            <tr> 
                <td style="float:right;margin-right:5px;">
                </td>
                <td>
                </td>
                <td style="float:right;">
                    
                </td>
            </tr>
        </tbody>
    </table>
</form>
</div>

</div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-corner-all ui-widget">Close</button></div></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div></div><script class="beutyfy_html_jodit_helper" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.0/beautify.min.js"></script><script class="jodit_ace_editor" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js"></script><div class="ui-widget-overlay ui-front" style="z-index: 100;"></div></body></html>

Open in new window

bootstrap-multiselect.css
bootstrap-multiselect.js
jodit.min.css
jodit.min.js
lulu50Web application

Author

Commented:
This is just the dialog box

<script>
    $(document).ready(function () {

       // debugger;

        $('#OperatorSelect').multiselect(getOperatorOptions(true));
        $('#ConditionSelect').multiselect(getOperatorOptions(true));
        $('#ValueSelect').multiselect(getOperatorOptions(true));


        var clone = $('#GroupSelect').clone(true, true); 
        //$('#GroupSelect').multiselect(getGroupOptions(true));

        $("#ConditionSelect").change(function (event) {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    $('#GroupSelect').empty();
                    $('#GroupSelect').append($('<option>').text("Select"));
                    $.each(json, function (i, obj) {
                        $('#GroupSelect').append($('<option>').text(json[i].Text).attr('value', json[i].Value));
                    });
                     //$('#GroupSelect').multiselect(getGroupOptions(true));       
                });
        });


        function getOperatorOptions(isFilter) {
            return {
                buttonWidth: '170px'
            }
        }


        function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'

            }
        }


       

    });


</script>

<div id="RuleDetailprtDiv" class="panel panel-default" style="width:99.5%;margin-left:3px;">
    <div class="panel-heading">
        <h3 class="panel-title">
            CONDITION ATTRIBUTE(S) AND VALUE(S)
        </h3>
    </div>
</div>

<div id="RuleDetailchldDiv" class="panel panel-default" style="width:99.5%;margin-left:3px;padding-top:25px;padding-left:5px;padding-bottom:25px;">

<form action="/CareAdvanceBusinessRules/RulePartialView" data-ajax="true" data-ajax-failure="FailAlert" data-ajax-method="POST" data-ajax-success="binddata" id="RulePartialViewForm" method="post"><input data-val="true" data-val-number="The field HiddenFieldForSelectedCondition must be a number." data-val-required="The HiddenFieldForSelectedCondition field is required." id="HiddenFieldForSelectedCondition" name="HiddenFieldForSelectedCondition" type="hidden" value="1">    <table border="0">
        <tbody>
            <tr>
                <td style="width:20%;">
                    <span class="multiselect-native-select"><select id="OperatorSelect" name="OperatorSelect" class="btn btn-default dropdown-toggle">
                        <option value="">Select Operator</option>
                        <option value="IF">IF</option>
                        <option value="AND">AND</option>
                        <option value="OR">OR</option>
                    </select><div class="btn-group" style="width: 170px;"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Select Operator" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span class="multiselect-selected-text">Select Operator</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class="active"><a tabindex="0"><label class="radio" title="Select Operator"><input type="radio" value=""> Select Operator</label></a></li><li><a tabindex="0"><label class="radio" title="IF"><input type="radio" value="IF"> IF</label></a></li><li><a tabindex="0"><label class="radio" title="AND"><input type="radio" value="AND"> AND</label></a></li><li><a tabindex="0"><label class="radio" title="OR"><input type="radio" value="OR"> OR</label></a></li></ul></div></span>
                </td>
                <td style="width:20%;"> 
                    <span class="multiselect-native-select"><select id="ConditionSelect" name="ConditionSelect" class="btn btn-default dropdown-toggle">
                        <option value="0" selected="">Select Group</option>
                                <option value="3">Dx</option>
                                <option value="5">Group ID</option>
                                <option value="4">NPI</option>
                                <option value="6">Plan Code</option>
                                <option value="1">Px</option>
                    </select><div class="btn-group" style="width: 170px;"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Px" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span class="multiselect-selected-text">Px</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class=""><a tabindex="0"><label class="radio" title="Select Group"><input type="radio" value="0"> Select Group</label></a></li><li><a tabindex="0"><label class="radio" title="Dx"><input type="radio" value="3"> Dx</label></a></li><li><a tabindex="0"><label class="radio" title="Group ID"><input type="radio" value="5"> Group ID</label></a></li><li><a tabindex="0"><label class="radio" title="NPI"><input type="radio" value="4"> NPI</label></a></li><li><a tabindex="0"><label class="radio" title="Plan Code"><input type="radio" value="6"> Plan Code</label></a></li><li class="active"><a tabindex="0"><label class="radio" title="Px"><input type="radio" value="1"> Px</label></a></li></ul></div></span>
                </td>
                <td style="width:20%;">
                <span class="multiselect-native-select"><select id="ValueSelect" name="ValueSelect" class="btn btn-default dropdown-toggle">
                    <option value="">Select Value</option>
                    <option value="=">=</option>
                    <option value="<>">&lt;&gt;</option>
                    <option value="Between">Between</option>
                    <option value="IN">IN</option>
                    <option value="Not IN">Not IN</option>
                    <option value=">">&gt;</option>
                    <option value=">=">&gt;=</option>
                    <option value="<">&lt;</option>
                    <option value="<=">&lt;=</option>
                </select><div class="btn-group" style="width: 170px;"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Select Value" style="width: 100%; overflow: hidden; text-overflow: ellipsis;"><span class="multiselect-selected-text">Select Value</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class="active"><a tabindex="0"><label class="radio" title="Select Value"><input type="radio" value=""> Select Value</label></a></li><li><a tabindex="0"><label class="radio" title="="><input type="radio" value="="> =</label></a></li><li><a tabindex="0"><label class="radio" title="<>"><input type="radio" value="<>"> &lt;&gt;</label></a></li><li><a tabindex="0"><label class="radio" title="Between"><input type="radio" value="Between"> Between</label></a></li><li><a tabindex="0"><label class="radio" title="IN"><input type="radio" value="IN"> IN</label></a></li><li><a tabindex="0"><label class="radio" title="Not IN"><input type="radio" value="Not IN"> Not IN</label></a></li><li><a tabindex="0"><label class="radio" title=">"><input type="radio" value=">"> &gt;</label></a></li><li><a tabindex="0"><label class="radio" title=">="><input type="radio" value=">="> &gt;=</label></a></li><li><a tabindex="0"><label class="radio" title="<"><input type="radio" value="<"> &lt;</label></a></li><li><a tabindex="0"><label class="radio" title="<="><input type="radio" value="<="> &lt;=</label></a></li></ul></div></span></td>
                <td style="width:40%">

                    <select id="GroupSelect" name="GroupSelect" class="btn btn-default dropdown-toggle">
                          <option>Select</option><option value="34">Px1</option>
                          <option value="38">Px2</option>
                          <option value="39">Px3</option>
                          <option value="40">Px4</option>
                     </select>

                </td>
            </tr>
            <tr> 
                <td style="float:right;margin-right:5px;">
                </td>
                <td>
                </td>
                <td style="float:right;">
                    
                </td>
            </tr>
        </tbody>
    </table>
</form>
</div>

</div><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-corner-all ui-widget">Close</button></div></div><div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div></div><script class="beutyfy_html_jodit_helper" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.0/beautify.min.js"></script><script class="jodit_ace_editor" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js"></script><div class="ui-widget-overlay ui-front" style="z-index: 100;"></div></body></html>

Open in new window

lulu50Web application

Author

Commented:
I just want to thank you for taking the time to help me.
Multitechnician
Top Expert 2014
Commented:
I just want to thank you for taking the time to help me.
You welcome, no need to thanks me :)

use this :
<script>
    $(document).ready(function () {

        // debugger;

        $('#OperatorSelect').multiselect(getOperatorOptions(true));
        $('#ConditionSelect').multiselect(getOperatorOptions(true));
        $('#ValueSelect').multiselect(getOperatorOptions(true));
        $('#GroupSelect').multiselect(getGroupOptions(true));

        $("#ConditionSelect").change(function (event) {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    var arr = [ '<option>Select</option>' ];
                    $.each(json, function (i, obj) {
                        arr.push('<option value="' + json[i].Value + '">' + json[i].Text + "</option>");
                    });
                    $('#GroupSelect').closest("td").html("<select id='GroupSelect' name='GroupSelect'>" + arr.join("") + "</select>");
                    $('#GroupSelect').multiselect(getGroupOptions(true));
                });
        });


        function getOperatorOptions(isFilter) {
            return {
                buttonWidth: '170px'
            }
        }


        function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'

            }
        }




    });


</script>

Open in new window

lulu50Web application

Author

Commented:
wow your skills is priceless.
Your dedication to help others is unbelievable.
you even spent time on the weekend to help me.
I'm speechless and thank you words are not enough.

God Bless you my friend.
This site shines because of you.
tu es le meilleur des meilleurs
leakim971Multitechnician
Top Expert 2014

Commented:
ton français s'améliore ;-)
have a nice week