jQuery, in MVC 4, Retrieve Selected Checkboxes From Dynamically Created Divs

I've got a piece of code written earlier in development that used to work when the markup was all on a single page.  I am calling it from a partial view but it does not seem to be able to find the checkboxes Id.  I've kind of narrowed it down to the fact that the use of "this." is only seeing the top-level container the div lives in.  I need to somehow get to the checkboxes.  Any suggestions would be greatly appreciated!
    function getSelectedPatientName() {
        var patientName = "{patientName}";
        debugger;

        var patientName = "{patientName}";
        $("div input[type=checkbox]").each(function () {
            //window.alert("this.checked = " + this.checked);
            window.alert("patient Name: \n" + patientName);
            debugger;
            if (this.checked) {
                patientName = this.id;
                return false;   // break out of loop
            }
        });
        return patientName;
    }

Open in new window

GenericCogAsked:
Who is Participating?
 
AnuTijiConnect With a Mentor Commented:
Hi

Please find the code below. I believe "metro-tile" is the class of the div container holding the checkboxes

 function getSelectedPatientName() {
        var patientName = "{patientName}";
        debugger;

        var patientName = "{patientName}";
        $("div.metro-tile input[type=checkbox]").each(function () {
            //window.alert("this.checked = " + this.checked);
            window.alert("patient Name: \n" + patientName);
            debugger;
            if (this.checked) {
                patientName = this.id;
                return false;   // break out of loop
            }
        });
        return patientName;
    }
0
 
chaitu chaituCommented:
can you paste the source HTML?
0
 
Moizsaif123Commented:
Isn't this how you call the checkbox one this line...
$("div input[type=checkbox]").


Include single quotes..
$("div input[type='checkbox']").


Check this site
http://www.w3schools.com/jquery/jquery_selectors.asp

another advise would be to use the .find option
0
 
GenericCogAuthor Commented:
@chaituu, I don't think you will like the source HTML, but here it is anyway.  I'm using MVC 4 Razor syntax to call populate a dynamically created divs person list.  
I did not write this code, only recently was tasked to look at it becuase I'm new to MVC and progamming in general.
Here is the Index.cshtml page:
    <div class="patientTiles-Container">
        <div id="patientTiles-Top" style="display: block; clear: both; width: 1040px; height: 16px; border: none; text-align: right;">
            <style type="text/css">
                .patientTiles-Count {font-family: Tahoma; font-size: 10pt; font-weight: bold; text-decoration: none; background-color: transparent; border-style: none;}
            </style>
            @Html.Label("Patient Count: " + Model.Count(), new { @class = "patientTiles-Count" })
        </div>
        <div id="patientTiles-LeftSide" style="float: left; width: 16px; height: 425px; border: none;">
            @*EMPTY, JUST TAKING UP SPACE*@
        </div>
        <div id="patientTiles-OuterScroll" style="height: 425px; width: 1024px; border: none; overflow: scroll; white-space: nowrap; overflow-y: hidden; scrollbar-track-color: #DADADA; scrollbar-arrow-color: #4A747E;">
            <div id="patientTiles-InnerWide" style="width: 8600px;">
                @{
                    foreach (var item in Model)
                    {
                    <div id="@item.Name@item.Mrn" onclick="" class="metro-tile" style="width: 275px; height: 175px; display: block; float: left; margin: 5px; padding: 10px 15px 10px 15px; color: #fff; background-color: #757678; font-family:Tahoma;">
                        <div style="width: 10px; height: 100%; line-height: 175px; display: block; float: left; background-color: yellow; margin-left: -10px; margin-right: 5px; text-align: center; vertical-align: middle;">
                            <span style="color: #000000;">1</span>
                        </div>

                        <input value="@item.Name" id="@item.Name" 
                            name="selectedObjects" 
                            class="checkBoxSelect" 
                            type="checkbox"
                            style="float:right; margin-right:-12px; margin-top:-5px" 
                            stayId="@item.StayId" episodeId="@item.EpisodeId" />
                        <!-- put front side here (not implemented) -->
                        <style type="text/css">
                            .hand-off-notes { width: 234px; height: 90px; line-height: 90px; }
                        </style>
                        <div id="patTile" s="@item.Name@item.Mrn" class="frontSide" 
                            onmouseover="showDebugInfo('s:[@item.StayId] pg:[@item.ProgramId] e:[@item.EpisodeId] l:[@item.LocationId] pt:[@item.PatientId]');" onmouseout="window.status='';">
                            <span style="font-family: Tahoma; font-size: 10pt; font-weight: bold;">@Html.DisplayFor(modelItem => item.Name)</span><br />
                            <span style="font-family: Tahoma; font-size: 8pt;">(@Html.DisplayFor(modelItem => item.Mrn))</span>
                            &nbsp;|&nbsp;
                            <span style="font-family: Tahoma; font-size: 8pt;"><b>Room:</b> @Html.DisplayFor(modelItem => item.Room)</span>
                            &nbsp;|&nbsp;
                            <span style="font-family: Tahoma; font-size: 8pt;"><b>Age:</b> @Html.DisplayFor(modelItem => item.Age.Years)&nbsp;(@Html.DisplayFor(modelItem => item.Gender))</span><br />
                            <span style="font-family: Tahoma; font-size: 8pt;"><b>PCP:</b> @Html.DisplayFor(modelItem => item.PrimaryCarePhysician)</span><br />
                            <span style="font-family: Tahoma; font-size: 8pt;"><b>PROV:</b> @Html.DisplayFor(modelItem => item.PrimaryCarePhysician)</span><br />
                            <span style="font-family: Tahoma; font-size: 8pt;"><b>HON</b> @Html.TextBoxFor(modelItem => item.PrimaryCarePhysician, new { @class = "hand-off-notes" })</span>
                        </div>

                        @*                        <div style="width: 10px; height: 10px; display: block; float: right; margin-right: -5px; bottom: -10px;">
                            <a href="#">
                                <img src="~/Content/ImagesAppBar/flipArrow.png" />
                            </a>
                        </div>*@
                    </div> 
                    }
                }
            </div>
        </div>
    </div>

Open in new window

And here is the partial view page:
@model string


<script type="text/javascript">
    // Page-level variables
    var _stayIdForDischarge = 0;
    var _episodeIdForDischarge = 0;
    var _doRrefreshPage = false;

    // display patient name in label text
    $(document).on('click', '#container-discharge', function () {
        $('#lblPatientFullName').html(getSelectedPatientName());
    });

    function setPatientNameLabel() {
            $(function () {
                $('#lblPatientFullName').html(getSelectedPatientName());
            });
        }

    // Displays a message in the browser's status line
    // 
    function showDebugInfo(msg) {
        if (captureConfig.isDebug) {
            window.status = msg;
        }
        return true;
    }

    // Returns the full name of the first patient tile that is selected (checked)
    // 
    function getSelectedPatientName() {
        var patientName = "{patientName}";
        debugger;

        var patientName = "{patientName}";
        $("div input[type=checkbox]").each(function () {
            //window.alert("this.checked = " + this.checked);
            window.alert("patient Name: \n" + patientName);
            debugger;
            if (this.checked) {
                patientName = this.id;
                return false;   // break out of loop
            }
        });
        return patientName;
    }

    // Used for placeholders for setting patient discharge information
    // 
    function setGlobalDischargeValues() {
        $('div input[type=checkbox]').each(function () {
            //alert("this.checked = " + this.checked);
            if (this.checked) {
                _stayIdForDischarge = this.stayId;
                _episodeIdForDischarge = this.episodeId;
                return false;   // break out of loop
            }
        });
    }

    // Saves patient discharge information
    // 
    function saveDischargeRecord() {
        var dataToPass = {
            stayId: _stayIdForDischarge,
            episodeId: _episodeIdForDischarge,
            dischargeDate: $('#txtDischargeDate').val(),
            dispositionId: $('#ddlDisposition'.valueOf()).val(),
            toLocation: $('#txtToLocation').val()
        };

        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            url: captureConfig.webApiServer + "api/discharge/Save",
            data: JSON.stringify(dataToPass),
            success: function (result) {
                document.getElementById("lblDischargeStatus").style.color = "green";
                document.getElementById("lblDischargeStatus").innerText = "Patient was successfully discharged";
                document.getElementById("lnkDischargeSave").style.display = "none";
                _doRrefreshPage = true;
            },
            error: function (error) {
                document.getElementById("lblDischargeStatus").style.color = "red";
                document.getElementById("lblDischargeStatus").innerText = "There was an error saving the data!";
                _doRrefreshPage = false;
            }
        });
    }

    // Returns a formatted date (m/d/yyyy)
    // 
    function getTodaysDate() {
        var myDate = new Date();
        var formattedDate = (myDate.getMonth() + 1) + '/' + myDate.getDate() + '/' + myDate.getFullYear();
        return formattedDate;
    }
</script>

<img id="show-hidden-popup-discharge" src="~/Content/ImagesAppBar/appBar-Discharge.png" class="click-discharge"
    style="width: 58px; height: 50px; cursor: pointer;" onclick='setPatientNameLabel(); setGlobalDischargeValues();' />
<p class="click-discharge" style="margin-top: 5px; font-size: x-small; cursor: pointer;"
    onclick='setPatientNameLabel(); setGlobalDischargeValues();'>
    Discharge
</p>

<div id="discharge-main-container">

    <style type="text/css">
        /*
        In order to get the item exactly centered, 
        apply a negative top margin of half the items height, 
        and a negative left margin of half the items width.
        */
        .notifier-Container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            display: none;
            background: rgba(64, 64, 64, .4);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040); /**/
            cursor: default;
        }

        .notifier-Inner {
            position: fixed;
            /*top: 50%;*/
            left: 50%;
            /*margin-top: -120px;
            margin-left: -175px;
            width: 350px;
            height: 240px;*/
            margin-top: 1px;
            margin-left: -350px;
            width: 700px;
            height: 600px;
            font-family: Tahoma;
            font-size: 10pt;
            color: rgb(0,0,0);
            border: 1px solid rgb(119,136,153);
            background-color: rgb(255,255,255);
            opacity: 1;
            -moz-box-shadow: 10px 10px 10px #000; /* Firefox */
            -webkit-box-shadow: 10px 10px 10px #000; /* Safari, Chrome */
            box-shadow: 10px 10px 10px #000; /* CSS3 */
            z-index: 102;
            cursor: default;
        }

        .notifier-Content {
            width: 318px;
            height: 125px;
            padding: 5px;
            margin: 10px;
            color: rgb(139,0,0);
            font-family: Tahoma;
            font-size: 12pt;
        }

        .lbl-Notification {
            color: rgb(139,0,0);
            font-family: Tahoma;
            font-size: 11pt;
        }

        .notice-CloseContainerLink {
            text-decoration: none;
            color: rgb(245,128,38);
            font-weight: bold;
            font-family: Tahoma;
            font-size: 10pt;
            cursor: pointer;
        }

        .notice-CloseContainerImage {
            float: right;
            position: relative;
            left: 0;
            top: 0;
            width: 34px;
            height: 35px;
            cursor: pointer;
        }

        .notice-CloseTextLinkContainer {
            clear: both;
            width: 55px;
            height: 25px;
            line-height: 25px;
            vertical-align: middle;
            text-align: center;
            float: right;
            bottom: 20px;
            right: 150px;
            position: absolute;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var overlay = $('<div id="overlay"></div>');
            // Show or hide the notice container
            $("#show-hidden-popup-discharge").click(function () {
                $("#notice-InfoContainer-discharge").show();
                $('#notice-InfoInner-discharge').animate({ 'top': '20' }, 500);
            });

            $('.notice-CloseContainerImage').click(function () {
                $("#notice-InfoContainer-discharge").hide();
                $('#notice-InfoInner-discharge').css('top', '-50%');
            });

            $('.notice-CloseContainerLink').click(function () {
                $("#notice-InfoContainer-discharge").hide();
                $('#notice-InfoInner-discharge').css('top', '-50%');
            });

        });
    </script>
    <div id="notice-InfoContainer-discharge" class="notifier-Container" style="display: none;">
        <div id="notice-InfoInner-discharge" class="notifier-Inner">
            <img src="~/Content/ImagesAppBar/x-Close.png" alt="quit" class="notice-CloseContainerImage" id="x-home-discharge" />
            <div id="notice-Content-discharge" class="notifier-Content">
                Information Notice:<br />
                @Html.Label("{Welcome to Discharge Partial View}", new { @class = "lbl-Notification" })

                <div class="popup-content">
                    <div class="popup-close-container">
                        <img id="x-close-discharge" class="x" alt="quit" src="~/Content/ImagesAppBar/x-Close.png" />
                    </div>
                    <div class="popup-content-title-container">
                        Patient Discharge
                    </div>
                    <br />@**@
                    <!-- ****** Beginning of main data entry portion of this dialog ****** -->

                    <!-- Patient name -->
                    <label style="display: inline-block; width: 200px; text-align: right;" id="lblPatientName">Patient:</label>
                    <label id="lblPatientFullName"></label>
                    <br />

                    <!-- Discharge date -->
                    <label style="display: inline-block; width: 200px; text-align: right;">Discharge Date:</label>
                    <input type="text" id="txtDischargeDate" size="16" required />
                    <script>
                        $("#txtDischargeDate").val(getTodaysDate()); </script>
                    <br />

                    <!-- Discharge disposition -->
                    <label style="display: inline-block; width: 200px; text-align: right;">Disposition:</label>
                    @Html.DropDownList("Code", ViewBag.Dispositions as SelectList, String.Empty, new { @id = "ddlDisposition" })
                    <br />

                    <!-- To Location -->
                    <label style="display: inline-block; width: 200px; text-align: right;" id="lblToLocation">To Location:</label>
                    <input type="text" id="txtToLocation" size="49" required />
                    <br />

                    <!-- ****** Ending of main data entry portion of this dialog ****** -->

                    <a id="lnkDischargeSave" class="save-discharge" style="cursor: pointer;" onclick="saveDischargeRecord();">Save</a>&nbsp;&nbsp; <a id="lnkDischargeClose" class="close-discharge" style="cursor: pointer;">Close</a>&nbsp;&nbsp;&nbsp;&nbsp;
                <label id="lblDischargeStatus" style="color: green;"></label>
                </div>
                @**@

            </div>
            <div class="notice-CloseTextLinkContainer">
                <a class='notice-CloseContainerLink'>Close</a>
            </div>
        </div>
    </div>
</div>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.