Solved

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

Posted on 2013-05-23
4
1,063 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
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 500 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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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!
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now