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

React JS progress circle bar is a simple and effective way to visualize

Currently, I am in the process of developing a progress circle bar that will function as a timer alongside sliders. Each slide is intended to have its own corresponding progress bar. While I have managed to create the bars individually, I am facing challe ...

I am looking to display the pop-up exclusively when the page is clicked, but unfortunately it is also appearing when the Menu is clicked

I've been working on this code and trying to make some modifications, but I just can't seem to find the right solution for my issue <!-- Updated main content --> <main> <p> Click on the menu button located in the top right ...

Looking to locate the child div elements within a parent div

I am having trouble determining the individual lengths of child divs within parent classes that share the same name. For example: <div class="main-div"> <div class="parent"> <div class="child"></div> <div class= ...

Trouble fetching data for my controller in AngularJS using UI Router resolve

My attempts to inject a resolve object containing loaded data into my controller are resulting in an Unknown Provider error : Error message: Unknown provider: configServiceProvider <- configService Below is the code I am working with: StateProvider ...

Can components be designed in a way that includes elements such as buttons or text areas in the code, but allows for them to be excluded when the component is used?

I have a custom form component that I designed. Depending on certain cases, I want the form to display either a button or a text field instead of the input field as currently coded. function FormTypeOne(props) { return ( <form className={classes.f ...

Utilize React Redux to send state as properties to a component

When my React Redux application's main page is loaded, I aim to retrieve data from an API and present it to the user. The data is fetched through an action which updates the state. However, I am unable to see the state as a prop of the component. It s ...

Fill in datatable with information from a JSON array if there are missing values in certain columns

My goal is to populate a datatable in JavaScript. Currently, I am able to do so, but some of the last rows have blank columns which are populated first. I attempted to fill those blank columns, and then the data populates in order. Here is an example of my ...

The Chrome extension functions properly when the page is refreshed or loaded, but it does not work with internal navigation

When landing on a YouTube page starting with w*, I have a script that triggers an alert with the URL. However, this only works when entering the page directly or upon refreshing. I am trying to make the alert trigger when navigating internally to that page ...

Dealing with complications in the Rails asset pipeline management

I am working on a webpage that requires real-time data to be displayed. Therefore, it necessitates continuous ajax communication post page load. similar to this, jQuery -> setInterval -> $.ajax url: "some url" success: (data, te ...

Using JQuery to overlay the entire page within the content placeholder

Currently, I am facing an issue with blocking the entire page using jQuery. Despite my best efforts, the block only affects the 3rd content placeholder area instead of the whole page as intended. My code snippet using jQuery is as follows: <script lan ...

Issues encountered when rendering textures from a canvas in Three.js

I've been working on creating a texture from a canvas. I managed to successfully render a blank canvas, but encountered issues when trying to draw an image on the canvas and then render it. This is the code snippet I am currently using: var canva ...

Develop a custom function in Typescript that resolves and returns the values from multiple other functions

Is there a simple solution to my dilemma? I'm attempting to develop a function that gathers the outcomes of multiple functions into an array. TypeScript seems to be raising objections. How can I correctly modify this function? const func = (x:number, ...

Unable to locate the module name loaded using require() function

Within my React file, I am importing a Javascript file like this (I am using Typescript): let FloDialog = require('../public/js/flo-dialog.min'); Afterwards, I declare a property for the dialog class: dialog: FloDialog = null; It is important ...

Issue with ng-bind-html in TranslateJS causing problems

I have been working on implementing translation in a web application using angularJS and the angular-translate repository, which can be found at . As per the documentation, it is possible to use this repository to set text for a specific element in the HTM ...

Utilizing slug URLs effectively in Next.js

In my current project with Next.js, I am working on implementing "dynamic routes". The goal is to update the URL structure such that upon clicking, the URL should look like "myurl.com/article/55". To achieve this, I have utilized the following "link tag": ...

Encountering an issue with resolving 'create-react-class'

I have some files with hobbies listed in Data.js. I am attempting to add these hobbies and display them in a list format within my App.js file. However, I keep encountering an error stating that the create-react-class module cannot be found. Does anyone k ...

What steps are involved in developing an Angular library wrapper for a pre-existing Javascript library?

Imagine having a vanilla Javascript library that is commonly used on websites without any frameworks. How can you create an Angular library that can be easily installed via npm to seamlessly integrate the library into an Angular application? The process o ...

With vuejs, only one place can control the changing of v-model

Hello, I am currently working on integrating VueJS2 code with Laravel Blade. However, I have encountered an issue with the following VueJS2 code: new Vue({ el:'.add_item_to_price_menu', data:{ percentage:null, }, methods: ...

Is webpack necessary for segregating dependencies during installation?

Currently, I'm diving into a tutorial on webpack and it's been three days already, but confusion still reigns! I am delving into the commands: npm i webpack --save-dev I find myself puzzled by the '--save-dev' in the above command whi ...

Issue with Next JS router.push not functioning unless the page is refreshed

I'm currently running Next.js 14.2 in my project with the page directory structure. After building and starting the application using npm start, a landing page is displayed with a login button that utilizes the <Link> component. I have also disa ...