switchButton from data dynamic

by Jake Wolpert

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://olance.github.io/jQuery-switchButton/jquery.switchButton.js"></script>
<div>
    <table id="ListTable" class="display" border="0">
        <thead>
            <tr>
                <th>Agencies</th>
                <th title="Rename_name" id="envName" class="header"> <a href="#">Name</a>
                </th>
                <th title="Rename_tag" id="env" class="header"> <a href="#">Env</a>
                </th>
                <th title="Description" id="dst" class="header"> <a href="#">Desc</a>
                </th>
                <th title="Created_date" id="type" class="header"> <a href="#">Type Name</a>
                </th>
                <th title="Updated_by" id="transInterface" class="header">Details</a>
                </th>
                <th title="assign" class="header"> <a href="#">Assign</a>
                </th>
                <th title="assign" class="header"> <a href="#">Global</a>
                </th>
                <th title="Edit" class="header">Edit</th>
                <th title="Delete" class="header">Enable/Disable</th>
                <th title="Disabled" id="disabled" class="header"> <a href="#">Disabled</a>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr id='19'>
                <td class="details-control border_bottom"></td>
                <td class="center">MAJIDRULE</td>
                <td class="center">QA</td>
                <td class="center">short desc QA -- BAT</td>
                <td class="center">BAT</td>
                <td class="center"> <a href="/Grouping/ShowRenameRuleDetail.do?renameID=19&days=90" class="linkButton">View Details</a>

                </td>
                <td>
                    <button type="button" class="btn">Assign Agencies</button>
                </td>
                <!-- <td class="center"><a href="/Grouping/ShowMetadataEdit.do?renameID=19&days=90"...

CSS

.switch-button-label {
    float: left;
    font-size: 10pt;
    cursor: pointer;
}
.switch-button-label.off {
    color: #adadad;
}
.switch-button-label.on {
    color: #0088CC;
}
.switch-button-background {
    float: left;
    position: relative;
    background: #ccc;
    border: 1px solid #aaa;
    margin: 1px 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
}
.switch-button-button {
    position: absolute;
    left: -1px;
    top : -1px;
    background: #FAFAFA;
    border: 1px solid #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

JavaScript

var data = {
    "agencies": {
        "19": {
            assignedAgencies: [
                "agency1",
                "agency2",
                "agency5"],
            restOfAgencies: [
                "agency3",
                "agency4",
                "agency6"],
            global: false
        },
            "20": {
            assignedAgencies: [
                "agency6",
                "agency5"],
            restOfAgencies: [
                "agency1",
                "agency2",
                "agency3",
                "agency4"],
            global: true
        },
            "56": {
            assignedAgencies: [
                "agency1",
                "agency5"],
            restOfAgencies: [
                "agency6",
                "agency2",
                "agency3",
                "agency4"],
            global: false
        }


    }
}

    function constructAgenciesData() {
        $.each(data.agencies, function (id, row) {
            console.log(id, row);
            $("#" + id).data("assignedAgencies", row.assignedAgencies).data("restOfAgencies", row.restOfAgencies).data("global", row.global);
        })


    }


$(constructAgenciesData);

$(function () {

    $(".globalswitch").each(function () {
        var row = $(this).closest("tr")
        var global = row.data("global")
        console.log("r", global);
        console.log('j', this, row, row.data("assignedAgencies"))
        $(this).switchButton({
            'checked': global
        }).change(function () {
            var id = this.id;
            var checked = this.checked;
            var Id = $(this).data('Id');
            console.log(Id);
            console.log(id, checked);
        })
    })
    console.log("19", $("#19").data("assignedAgencies"))


})