Struggling to refresh the UpdatePanel that holds a Repeater inside a custom control using JavaScript

I am facing an issue with updating a custom control, which includes a repeater, from a dropdownlist onchange event that executes some javascript.

The dropdownlist and updatepanel setup is as follows:-

<asp:UpdatePanel runat="server" ID="pnlPanelStageBandLetterTemplate" Visible="false" UpdateMode="Conditional">
<ContentTemplate>
    <asp:DropDownList runat="server" ID="ddlBand">
        <asp:ListItem Selected="True" Text="1" Value="1" />
        <asp:ListItem Text="2" Value="2" />
        <asp:ListItem Text="3" Value="3" />
        <asp:ListItem Text="4" Value="4" />
        <asp:ListItem Text="5" Value="5" />
        <asp:ListItem Text="6" Value="6" />
    </asp:DropDownList>
    <panelStageLetters:PanelStageBandLetterTemplate id="psbltPanelStageBandLetterTemplate" runat="server">
</panelStageLetters:PanelStageBandLetterTemplate>
</ContentTemplate>        

The dropdown ddlband has the following rendering:-

ddlBand.Attributes.Add("onchange", "changeCutBand('" +   pnlPanelStageBandLetterTemplate.ClientID + "')");
ddlBand.ID = "ddlBand";

When a selection is made in the dropdownlist, it triggers the following code:-

function changeCutBand(panelID) {
var cbc = ($(".cutBandChanger")[0]);
val = cbc.value;
var wsid = getQueryVariable('wsid');
if (val != "0") {
    $.get("changecutband.ajax?action=changecutband&newcutmethod=" + val + "&wsid=" + wsid);
    var panelID = document.getElementById('ctl00_ContentPane_ctl01_pnlPanelStageBandLetterTemplate');
    var ddID = document.getElementById('ctl00_ContentPane_ctl01_ddlBand');
    __doPostBack(panelID, val);
}

}

This initiates an ajax call to perform a database update, which provides data for the repeater inside the custom control.

However, I am encountering an issue where though the database gets updated, the update panel does not refresh. Instead, a javascript error appears stating 'document.getelementbyid <'...'> is null or not an object with an extremely high line number.'

Answer №1

I've identified a few issues in your javascript code:

  1. document.getElementById('ctl00_ContentPane_ctl01_pnlPanelStageBandLetterTemplate')
    retrieves an HTML element, not a string (refer to: getElementById)
  2. __doPostBack requires two string parameters, but you are supplying an HTML element as the first argument
  3. utilize
    <%: pnlPanelStageBandLetterTemplate.ClientID %>
    whenever possible to reference your panel's ID
  4. ensure to use
    '<%: pnlPanelStageBandLetterTemplate.UniqueID %>'
    as the first parameter for __doPostBack with apostrophes around it since it should be a string

To view a correctly formatted postback call generated by ASP.NET, add this snippet to your page:

<%: ClientScript.GetPostBackEventReference(pnlPanelStageBandLetterTemplate, "arg") %>

It will display something similar on your page:

__doPostBack('ctl00$ContentPane$ctl01$pnlPanelStageBandLetterTemplate','arg')

This solution should address your needs (excluding the hardcoded second parameter).

Make the necessary adjustments and update us on your progress.

Cheers, Oliver

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

What might be causing the issue with my ajax request to the PHP file within the data parameter?

Although I am successfully getting my php value into a JavaScript variable, it seems like my script.js file is unable to find it. For the sake of brevity, some files have been omitted in this question. The main issue is that the script.js file retrieves th ...

Issue with Textarea not updating when props change in a React component

I am facing an issue with updating the default value of a textarea based on props passed from a parent component. Strangely, the update works when using 'value' but not when using 'defaultValue'. However, I need the textarea to be edita ...

date-fns | display date

Issue I have a function that formats date strings as shown below. import { format, parseISO } from "date-fns"; export function convertDate(myDate, displayFormat) { return format(new Date(parseISO(myDate)), displayFormat); } My articles con ...

Absorbing a mistake within my observable while also supplying a saved value - ensuring the subscription remains active

I'm really struggling with error handling in my observable and it's starting to drive me crazy. Despite reading countless articles, I still can't seem to get the hang of it. Ideally, I want to handle errors within the service itself and fall ...

Angular services are equipped with a powerful tool called the $http

Encountering an issue with promises within an angular service. The problem lies with a specific method getArea in the service which aims to retrieve the name of a service area. This data is obtained from the API. However, upon obtaining the service areas a ...

Angular: merging animations with scope updates

If you're curious to see some code, check it out here: some code My inquiry pertains to using Angular to blend a change in data triggered by a click with a fade in/fade out animation. I've managed to implement content changes on click and anima ...

Leverage variables in the path of your Express.js route

Currently in the process of developing a web application using the MEAN stack and I have a specific scenario in mind: Users should be able to sign up, but then they must also register at least one company. Upon registering a company, the base URL struct ...

What is the solution to the error "modal is not defined" in Vue.js?

Hey guys, I need some help with an error that popped up: [Vue warn]: Error in v-on handler: "TypeError: $(...).modal is not a function". The issue is with the modal function Below is the code snippet from my welcome.blade.php: <body> &l ...

Visual Studio Code unable to locate source maps for typescript debugging

Looking for some help debugging a basic Hello World TypeScript file. Whenever I try to set a breakpoint, it seems like VS Code is having trouble locating the source map, even though it's saved in the same directory. I'm using Chrome as my browser ...

Fulfill the promise once the callback has been triggered

In my code, I am working on preventing the method _saveAddress from being executed multiple times. To achieve this, I have created a promise for the method. const [pressEventDisabled, setPressEventDisabled] = useState(false); <TouchableOpacity style={s ...

Is there a way to merge these arrays into a single array?

With the current code I am obtaining numerous JSON objects within separate arrays: Here is the code snippet: for (let i=1; i<=150;i++){ fetch(`A valid URL ${i}`) .then(result => result.json()) .then(result => console.log(result.data.results)) ...

The JavaScript counterpart to jQuery's click event handler

I'm trying to figure out how to achieve the same effect as this jQuery code. var divQuery = $('.html5gallery-thumbs-0').children(); divQuery.on('click', function () {...} I attempted it like this: var divQuery = document.g ...

Transferring information between container and component with Meteor React

I'm facing a challenge with passing data from a container to a component in the context of Meteor and React. Despite following the steps in the Meteor React tutorial and making some customizations, the code doesn't seem to be working as expected. ...

Transformation of an Ajax array into an associative array

Currently, I am working on creating an API using Ruby on Rails and facing a challenge with sending an array through ajax. The task seems straightforward, but the issue arises when the array is received as an associative array instead of a regular one! Es ...

A comprehensive guide on properly obtaining user details in React with Redux and OIDC

Although I've dabbled in OIDC before, I wouldn't consider myself an expert. Currently, I'm trying to integrate OIDC into a react app using oidc-client-js and redux-oidc libraries, following the redux-oidc-example as a guide. Encountering th ...

The component in React does not refresh after updating the state

I have a React page where I am displaying a list of quizzes fetched from an external API. There's also a "New Quiz" button that opens a dialog with a form for users to create a new quiz. My issue is with making the table re-render once the POST reque ...

Tips for choosing the remaining items in a multiple selection process

In my HTML form, I have a multi-select field that contains categories and the corresponding items within each category. My goal is to allow users to select individual courses or select an entire category (identified by values starting with "cat_") in orde ...

I can't seem to get anything to show up on my React

After starting to work with routing on react.JS, I encountered a challenge where the simple products.jsx file is supposed to display a simple message upon clicking, but it's not showing anything. Here is the code from Index.JS import React from &apos ...

How to automatically insert a page break after a certain string in an array using JavaScript

I've created a code that is intended to implement page breaks after a specific number of new lines or words. I have defined an array that indicates where these breaks should occur within my element. In the example provided in my jsFiddle, you can see ...

Retrieving the hidden field value using JavaScript on the server side

I'm encountering an issue with asp:hiddenfield where, after changing its value on the client side and trying to retrieve it on the server side, it returns null. Here is my client-side code: function pageLoad() { var gV = $('#<%=Hidden ...