modal failing to populate values within control elements in modal

Encountering an issue where the code is calling a Modal, but upon loading it fails to populate the controls with values sent into the JavaScript. No errors are thrown, yet all controls remain empty. As a newcomer to AJAX and JavaScript, I suspect there might be a simple oversight on my part.

Appreciate any help!

This is the JavaScript snippet:

function RowClickedResults(sender, eventArgs) {
sender.get_masterTableView().fireCommand("View", eventArgs._itemIndexHierarchical);
}

    function createEditAccount(ReceivedDate, DepositedDate, tbCompanyName, tbCheckAmount, 
                               tbCheckNum, tbDesc, cbResultsBreak, cbResultAcctNum, tbResultBreak, tbResultNotes) {
    $("#EditAccount").modal('show');
    $('#EditAccount').on('load', function () {
        var rDate = $telerik.findControl(document, "rdResultReceiveDate");
        var dDate = $telerik.findControl(document, "rdResultDepositDate");
        var Comp = $telerik.findControl(document, "tbResultCompany");
        var CheckAmt = $telerik.findControl(document, "tbResultCheckAmt");
        var CheckNum = $telerik.findControl(document, "tbResultCheckNum");
        var Desc = $telerik.findControl(document, "tbResultsDesc");
        var Break = $telerik.findControl(document, "cbResultsBreak");
        var AcctNum = $telerik.findControl(document, "cbResultAcctNum");
        var BreakAmt = $telerik.findControl(document, "tbResultBreak");
        var Notes = $telerik.findControl(document, "tbResultNotes");
        rDate.set_selectedDate = ReceivedDate;
        dDate.set_selectedDate = DepositedDate;
        Comp.text = tbCompanyName;
        CheckAmt.text = tbCheckAmount;
        CheckNum.text = tbCheckNum;
        Desc.text = tbDesc;
        AcctNum.value = cbResultAcctNum;
        BreakAmt.text = tbResultBreak;
        Notes.text = tbResultNotes;
    });

}

This is the Modal structure:

<div id="EditAccount" class="modal fade" role="dialog">
...

// The rest of the Modal HTML goes here (for brevity)

...
</div>

The following section invokes my JavaScript:

<telerik:RadGrid ID="rgResults" runat="server" FooterStyle-ForeColor="#BA1A8B"
                            HeaderStyle-BackColor="#39ac99"
                            HeaderStyle-Font-Bold="true" AlternatingRowStyle-BackColor="White"
                            AllowPaging="true" PageSize="10"
                            OnItemCommand="rgResults_ItemCommand"
                            OnNeedDataSource="rgResults_NeedDataSource"
                            OnItemDataBound="rgResults_ItemDataBound"
                            OnPreRender="rgResults_PreRender"
                            AutoGenerateColumns="false">
                            // ClientSettings code truncated for readability

                            <ClientEvents OnRowClick="RowClickedResults" />

                            // MasterTableView code omitted for clarity
                        </telerik:RadGrid>

Here's how the code behind sets up the data for viewing in the Modal:

case "View":
                {

                    foreach (GridDataItem item in rgResults.Items)
                    {
                        string Deposit = item.GetDataKeyValue("Deposited_Date").ToString();
                        ar = ydb.Accounts_Receivable.ToList().Where(t => t.Deposited_Date == DateTime.Parse(Deposit)).ToList();
                        foreach (Accounts_Receivable ar2 in ar.ToList())
                        {
                            if (SearchByDate.SelectedDate.Value.ToString() == Deposit)
                            {
                                if (ar2.Posted_Date == null)
                                {
                                    Accounts_Receivable_Breakdown arb = ar2.Accounts_Receivable_Breakdown.ToList()
                                                    .Where(t => t.Accounts_Receivable_ID == ar2.Accounts_Receivable_ID).First();
                                    ScriptManager.RegisterStartupScript(this, GetType(), Guid.NewGuid().ToString(), 
                                        "createEditAccount(\"" + ar2.Received_Date.Value.ToString() + "\",\"" + ar2.Deposited_Date.ToString() + "\",\"" +
                                        ar2.Company_Name + "\",\"" + ar2.Check_Amount + "\",\"" + ar2.Check_Number + "\",\"" +
                                         ar2.Description_ + "\",\"" + arb.Breakdown_Amount +
                                         "\",\"" + arb.Account_Number + "\",\"" + arb.Breakdown_Amount + "\",\"" + arb.Notes + "\");", true);
                                }
                                else
                                {
                                    // Code for scenarios when Posted_Date exists - not shown here for conciseness
                                }
                            }
                        }
                    }

                    break;
                }

Answer №1

Resolved the problem by identifying that a postback was necessary due to modifications made on the server side code. The issue stemmed from placing the modal within the update panel, causing the code to prematurely attempt to access controls and assign data. Moving the modal outside of the update panel allowed the postback process to complete before manipulating the controls.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Warning: Attention Required for Published NPM Package Fix

After successfully publishing my first package on npm, I encountered a warning when I tried to import it in Codesandbox. There was an error converting '/node_modules/protected-react-routes-generators/src/index.js' from esmodule to commonjs: Canno ...

The Vue.js transition feature seems to be malfunctioning when trying to display a modal

I can't figure out why my animation isn't working with Vue transitions. Here is the code I have: <template> <teleport to="body"> <div class="modal-overlay" v-if="loading"> <transitio ...

Developing modular applications with Vue.js and leveraging locally installed NPM packages

I am currently working on developing a modular application using Vue through the vue-cli-service. The main application and its modules are located in separate folders, with a structure that looks something like this: -- app/package.json /src/** -- mo ...

Tips for waiting on image loading in canvas

My challenge involves interacting with the image loaded on a canvas. However, I am uncertain about how to handle waiting for the image to load before starting interactions with it in canvas tests. Using driver.sleep() is not a reliable solution. Here is ...

Slowly revealing sticky navigation with slideDown animation using JQuery

Here is the code for a .JS file: $(document).scroll(function (){ var menuheight= $('header').height(); var y = $(this).scrollTop(); if (y>(menuheight)) { $('.menu_nav_features').addClass ...

Is there a way for me to gain entry to this array in vuejs?

Can anyone help me with accessing the objects in this array? I am using laravel, inertiajs, and vuejs. I am passing a variable from a laravel controller to a vuejs component with inertia.js. https://i.stack.imgur.com/p7yjL.png https://i.stack.imgur.com/y ...

A guide to presenting array data retrieved from an Ajax call within HTML using Laravel 4.1

I have an AJAX call to a controller that returns array data to my view. I want to display this array data in HTML upon clicking, but I'm not sure how to do it yet. Here's what I have so far: AJAX Call: request = $.ajax({ url: "/fans/ ...

Unpredictable Redirection when URL is Clicked using PHP or Javascript

Looking to send users to a random URL from a specific list? For instance: With 3 URLs available - Google.com, Facebook.com, and Yahoo.com <a href="<?php $sites[array_rand($sites)] ?>">Click here</a> Upon clicking the link, users will ...

Utilizing Vue.js to share a single array of data across two distinct input lists

For a clearer understanding of my requirements, I have put together a demo on JSFiddle: https://jsfiddle.net/silentway/aro5kq7u/3/ The code snippet is presented below: <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id=" ...

Apache causes HTML download tag to malfunction

I have an HTML file that includes the following code: <a href="/Library/WebServer/Documents/file.zip" download="file.zip"> Download here </a> When I test this HTML page on Chrome, it successfully allows me to download the file. However, when ...

Tips for automatically closing a dropdown menu when it loses focus

I'm having some trouble with my Tailwind CSS and jQuery setup. After trying a few different things, I can't seem to get it working quite right. In the code below, you'll see that I have placed a focusout event on the outer div containing th ...

How to identify generic return type in TypeScript

My goal is to develop a core dialog class that can automatically resolve dialog types and return values based on the input provided. I have made progress in implementing this functionality, but I am facing challenges with handling the return values. Each ...

Updating the contents of one specific div without affecting all other divs with the same class

Below is the HTML code snippet in question: <a class="btn test-btn test-btn-1"> <span>Content 1</span> </a> This particular code block appears multiple times on the page. The number at the end of test-btn- is dynamically generat ...

Create a unique bar chart plugin using Javascript/jQuery that allows users to drag and drop data

My current project involves developing a custom bar chart generator that must meet specific criteria: Input fields for entering data to display on the chart The ability to drag and resize bars once the chart is generated I've conducted research and ...

Searching for an individual MongoDB document using Express

I recently started working with MongoDB and express. I am trying to authenticate a user based on their username and password, but my code seems to always execute the "else statement" even when the correct credentials are entered. Below is the JavaScript f ...

Having trouble getting my ReactJS page to load properly

I am currently linked to my server using the command npm install -g http-server in my terminal, and everything seems to be working smoothly. I just want to confirm if my h1 tag is functional so that I can proceed with creating a practice website. I have a ...

Eliminate the div element using jQuery if it contains a line break tag but no text

I am faced with a situation on a page where some div elements contain content while others only have a BR tag. I am attempting to remove the div elements that contain only the BR tag. Below is the HTML format in question: Here is an example of one type: ...

Is there a way to sort through a data object using a state array in React?

I have found a solution! The code below now displays a functioning example. My latest project involves creating a React portfolio with a Filter system. Users can visit the portfolio page and choose filters (web design, development, etc.) to view specific ...

What is the best way to customize the border color of a disabled Material UI TextField?

I'm struggling to override the default style for disabled Mui TextField components, particularly in changing the border color. Although I successfully altered the label color for disabled fields, I can't seem to get the border color to change. T ...

Having trouble choosing multiple options from autocomplete drop-down with Selenium web-driver in Python

I am currently in the process of automating a webpage built with Angular that features an auto-complete dropdown with numerous elements. My goal is to click on each individual element and verify if it populates all the fields below accordingly. Below is th ...