Locate the ID of the UpdatePanel housing the AutoCompleteExtender

Currently, I am utilizing Ajax Autocomplete to search for student names and retrieve their corresponding student ID. The layout of my update panel is as follows:

<asp:UpdatePanel ID="StudentSearchUpdatePanel" runat="server">
    <ContentTemplate>
        <dl>
            <dt>Please input student ID:</dt>
            <dd>
                <asp:TextBox ID="StudentIDTextBox" runat="server" Wrap="False" MaxLength="6"></asp:TextBox>
                <asp:Button ID="SelectStudentIDButton" runat="server" Text="Select" OnClick="SelectStudentIDButton_Click"  />
                <asp:Label ID="StudentIDEntryError" runat="server" Visible="false" Font-Bold="True" ForeColor="Red" Text="Please enter a 6-digit student ID number."></asp:Label>
            </dd>
            <dt>Alternatively, start typing the student's last name:</dt>
            <dd><asp:TextBox ID="StudentNameSearchTextBox" runat="server"></asp:TextBox></dd>
        </dl>


        <ajaxToolkit:AutoCompleteExtender ID="StudentNameSearchTextBox_AutoCompleteExtender" runat="server"
            TargetControlID="StudentNameSearchTextBox" 
            ServiceMethod="GetStudents"
            OnClientPopulated="getStudents_Populated_Json"
            OnClientItemSelected="selected_Student" 
            MinimumPrefixLength="2" 
            CompletionSetCount="20" 
            UseContextKey="True" >
        </ajaxToolkit:AutoCompleteExtender>
    </ContentTemplate>
</asp:UpdatePanel>

The function getStudents_Populated_Json has the following structure:

    function getStudents_Populated_Json(sender, e) {
        var students = sender.get_completionList().childNodes;
        for (var i = 0; i < students.length; i++) {
        var student = eval('(' + students[i]._value + ')');
         students[i].innerHTML = student.LastName + ' ' + student.FirstName;
      }

Lastly, in the selected_student function:

 function selected_Student(sender, e) {    
      var selectedStudent = eval("(" + e._value + ")");  
 }

Within selected_student, I aim to locate the ID of the UpdatePanel (StudentSearchUpdatePanel) so that I can subsequently identify "StudentIDTextBox" and insert selectedStudent.ID into StudentIDTextBox.innerHTML. How can I specifically target the StudentIDTextBox and populate its innerHTML from selected_Student?

(Note: The student class includes properties such as ID, FirstName, LastName. It has been confirmed that selectedStudent.ID retrieves the correct identification).

Your assistance is greatly appreciated.

Answer №1

An alternative approach to simplify the process is by ensuring that the ID of the textbox you are looking for is easily accessible from the start.

One effective method to achieve this is by utilizing ClientIDMode="Static" within your asp:TextBox control. By doing so, the control will have the same id attribute on both the client and server side. This enables easy identification of the control on the client-side using JavaScript, as demonstrated below:

var myTextbox = document.getElementById('StudentNameSearchTextBox');
myTextbox.value = student.LastName + ' ' + student.FirstName;

I trust this information proves beneficial in your endeavors.

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

Do not decode automatically, encode URI component

My challenge is dealing with users who have slashes in their usernames. I want to create easy-to-use URLs for them, like /user/username, even if the username contains special characters, such as /user/xXx/superboy. I'm utilizing client-side routing, ...

Tips for retrieving specific database entries using a JavaScript function

I'm currently in the process of developing a web directory that showcases organizations based on the selected county by utilizing an XML database. During testing, I have configured it to only display organization names and counties for now. However, ...

Refresh the contents of the DataTable using ajax

I am currently using DataTables with AJAX to generate a table on page load. The initial part of my code is working correctly. However, I have encountered an issue when trying to filter users in the DataTable using a dropdown. After selecting a username a ...

Creating HTML tags using Kotlin

Looking to generate HTML using Kotlin in the browser, I experimented with the Kotlinx library. However, I found that it lacks support for callbacks like the following: div { onclick = { event -> window.alert("Kotlin!") } } Are there an ...

Dynamic resizing navigation with JQUERY

I have successfully created a navigation menu that dynamically resizes each list item to fit the entire width of the menu using JavaScript. $(function() { changeWidth(500); function changeWidth(menuWidth){ var menuItems = $('#menu l ...

The return value from Aarray.map doesn't seem logical

function replicateArrayWithModification(array, instructions) { return array.map(function (element, index, arr) { return arr.push(instructions(element)); }); } function doubleValue(input) { return input * 2; } var result = replicateArrayWithModific ...

Implementing a click function that toggles between adding and removing a class, keeping track of the number of clicks, and utilizing localStorage to prevent repeated clicking in the

Hi there! I'm currently working on a simple widget that features a clickable icon and a counter next to it. When the icon is clicked, it should toggle between an empty heart and a filled heart using addClass/removeClass. Additionally, each click incr ...

jQuery loops through form fields and sets them as disabled

Trying to solve a question... In a form with multiple inputs, I only need to loop through the ones inside the div tagged player. <div class="player"> <input type="text" value="0" class="unit" /> <input type="text" value="0" class="unit" ...

The HTML select element fails to drop down over the THREE.js scene

I'm currently working on enhancing the Three.js editor for a project. editor link One of the tasks I'm tackling is adding a select element on top of the viewport in the editor. Unfortunately, the dropdown functionality of the select element isn ...

Managing the verification of data existence in the ExpressJS service layer or controller

Working on a medium-sized website, I realized the importance of writing maintainable code with a better project structure. After stumbling upon this insightful article and some others discussing the benefits of 3-layer architecture, I found the concept qu ...

JSON Serialization - eliminating null values

Currently working on a HTTP service using .Net Web API technology, I have crafted some DTO classes. When only a specific subset of data is required, my plan is to populate the DTOs with only that data in order to reduce the amount of data transmitted. I a ...

Measuring the height of a div element using Vuejs

Let me explain my current situation: I am trying to determine the height of a DIV component in order to dynamically inform its child component about its size. I have been working on implementing manual loading mode, but I have encountered an issue where t ...

Adding fields to all objects in an array within MongoDB

I'm trying to update all objects in an array by adding a new field only if it doesn't already exist. I attempted to use the updateMany method but it doesn't seem to be working. Can someone please assist me? const updateResult = await Form.up ...

Problem with FormsAuthentication session expiration

protected void Page_Load(object sender, EventArgs e) { if (HttpContext.Current.User.Identity.IsAuthenticated) { Session["User"] = "Authenticated"; Session["Username"] = HttpContext.Current.Use ...

Ensure the validation of numerous input fields within a single form with the use of Vue 3 composition API

Within my application, I have implemented custom validation and validators to ensure the accuracy of various form fields. The submit button functionality is designed to remain disabled until all input fields are filled. The creation of validators involves ...

Obtaining JSON data created through the use of the stringify method

After retrieving data from a database, I stored it in an array. To convert this array into JSON format, I used the stringify method which resulted in the following JSON structure: var view_data = [{ f o o = " boo " , t e x t = "t e s t " }]; However, w ...

jqGrid display/hide columns options dialogue box

I am looking to implement a feature that allows users to toggle columns in my jqGrid. I came across a module for this purpose, but unfortunately, it is no longer supported in jqGrid 4.x. I have searched for a replacement module without success. Are there ...

Converting a complex JSON file to a CSV format using Powershell

Does anyone have suggestions on how to convert a complex JSON file into a CSV file effectively? I've been experimenting with different methods, and so far, a particular query seems promising. However, I'm facing an issue where the product "P ...

Tips for preventing browser pop-up blockers

async payWithPaypal(context, id) { context.commit("set_busy", { data: true }, { root: true }); var response = await ApiService.PAY_WITH_PAYPAL(id); if (response.code == 200 && response.data.success) { var invoice = response. ...

Each time I retrieve a value from an ArrayList stored in a POJO, it always returns the most recent value that was stored

Within my JSON data, the year 2017 corresponds to month 11 and then the date This is a snippet of my JSON structure { "2017": { "11": { "8": { "status": "P" }, ...