?
Solved

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

Posted on 2013-05-23
4
Medium Priority
?
1,155 Views
Last Modified: 2013-06-04
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

0
Comment
Question by:GenericCog
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
4 Comments
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 39193948
can you paste the source HTML?
0
 
LVL 4

Expert Comment

by:Moizsaif123
ID: 39194091
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
 

Author Comment

by:GenericCog
ID: 39194796
@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
 
LVL 4

Accepted Solution

by:
AnuTiji earned 1500 total points
ID: 39198937
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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Entity Framework is a powerful tool to help you interact with the DataBase but still doesn't help much when we have a Stored Procedure that returns more than one resultset. The solution takes some of out-of-the-box thinking; read on!
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question