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
Solved

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

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery Toggle & Anchor Links 5 43
linq, c# 8 22
formvalidation.io validate form on class click 4 14
How to filter by key press ? 6 19
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
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…

856 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