jeudi 19 novembre 2020

Send data from specific row with Checkbox to a modal/Popup?

Goal: I have multiple rows of Professors that have their name and status (the status is displayed as a toggle checkbox).

Checkbox rows

I'm trying to use Checkbox to generate a popup, AND have data from that professor (their row) display in the popup. AS WELL AS as send the selected value (true/false) to the DB after they click both the checkbox in the row, and then the Yes button in the popup. If this can be done without jQuery, I am open to that.

The popup should say "Are you sure you want to make ((NAME)) ((STATUS))?

(Button for Yes) (Button for No)

Problem: I can get a popup to show with jquery, but I'm having difficulty getting it to associate the data from that particular row to the popup. I have these checkboxes on each row, associated to different Professors.

Actual Result: It shows the popup and shows the sentence, but doesnt show the associated professor name or selected status (it just shows a default status, which is NOT what I selected). It also errors out when I click the Yes button.

Popup currently looks like:

Popup

ASPX:

<div class="avborder">
    <asp:Panel ID="row2" runat="server" Visible="false" CssClass="avMargin"><asp:Image ID="img2" runat="server" CssClass="Professoricon"/><sup><asp:Label ID="L2" runat="server" Font-Size="17px"/></sup> <asp:Label ID="M2" runat="server" CssClass="Professorname"/>      
        <label class="switch"> 
            <asp:CheckBox ID="chkOnOff2" runat="server" AutoPostBack="true" onclick="return OpenAvailabilityPanel();"  />
            <span class="slider round"> </span>
        </label>
    </asp:Panel>
    <asp:Panel ID="row3" runat="server" Visible="false" CssClass="avMargin">
        <asp:Image ID="img3" runat="server" CssClass="Professoricon"/><sup><asp:Label ID="L3" runat="server" Font-Size="17px" /></sup> <asp:Label ID="M3" runat="server" CssClass="Professorname" /> 
        <label class="switch"> 
            <asp:CheckBox ID="chkOnOff3" runat="server" AutoPostBack="true"   />
            <span class="slider round"> </span>
        </label>                        
    </asp:Panel>
</div>

<div class="modal fade" id="availabilityModal" tabindex="-1" role="dialog" aria-labelledby="availabilityModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <b style="text-align:center;">AVAILABILITY CHANGE</b>                       
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <p align="center">Are you sure you want to make <asp:Literal ID="PName" runat="server" /> <asp:Literal ID="availableTxt" runat="server" />?</p>
                        </div>
                    </div>                      
                </div>
                <div class="modal-footer">
                    <div class="margin-center">
                        <asp:Button ID="btnUpdateAvailability" runat="server" Text="Yes" CssClass="btn btn-green" ClientIDMode="Static" OnClick="btnUpdateAvailability_Click"/>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<input type="hidden" value="0" clientidmode="Static" id="hPRow" runat="server" />
<input type="hidden" value="false" clientidmode="Static" id="hPAvail" runat="server" />

<script type="text/javascript">     
    function OpenAvailabilityPanel(hProvRow, hProvAvail) {
            $("#hProvRow").val(hProvRow);
            $("#hProvAvail").val(hProvAvail);
            $('#availabilityModal').modal('show');
            return false;
        }
</script>

C#:

if (!Page.IsPostBack)
{
    if (professorStatsListDto.professorStatsList.Count > 1)
    { 
            setVisitsIfHasVisits(1, L2);
            M2.Text = professorStatsListDto.professorStatsList[1].LastName.ToString();
            chkOnOff2.Checked = professorStatsListDto.professorStatsList[1].Available;
            row2.Visible = true;
    }
    if (professorStatsListDto.professorStatsList.Count > 2)
    { 
            setVisitsIfHasVisits(2, L3);
            M3.Text = professorStatsListDto.professorStatsList[2].LastName.ToString();
            chkOnOff3.Checked = professorStatsListDto.professorStatsList[2].Available;
            row3.Visible = true;
    }
    
}

protected void btnUpdateAvailability_Click(object sender, EventArgs e)
{
    CheckBox cbSender = (CheckBox)sender; //ERRORS out because cant cast Button to Checkbox. 
    int professorIndex = getProfessorIndexCB(cbSender.ClientID);

    try
    {
        using (var db = ARCTelemedEntities.Create())
        {
            //availableTxt.Text = (cbSender.Checked) ? "available" : "unavailable"; //this is too late, need to have this available before clicking Yes
            //Updates DB
            ResponseDTO setStatus = BusinessLogic.professorManager.SetStatus(db, professorStatsListDto.professorStatsList[professorIndex].ID, cbSender.Checked); 
        }
    }

    catch (Exception ex)
    {
        CommonFx.HandleEx(ex); 
    }

}
    
    
public int getProfessorIndexCB(string cbSender)
{
    int professorIndex = 0;
    switch (cbSender)
    {
        case "chkOnOff1":
            professorIndex = 0;
            break;
        case "chkOnOff2":
            professorIndex = 1;
            break;
        case "chkOnOff3":
            professorIndex = 2;
            break;
    }
}



Aucun commentaire:

Enregistrer un commentaire