Discover how to locate a division element within a DataList using JavaScript

I've encountered an issue with a div within an asp:DataList, which contains nested divs. My attempt to find these divs using document.getElementByID("") resulted in the error message: 

Unable to get property 'style' of undefined or null reference.

This led me to realize that the .getElementById method was unable to locate them. So, I'm now seeking alternative methods to access these divs.

I've searched through old posts for solutions to my problem but none seem to align with my specific issue.

A critical aspect is that my divs need to be draggable, and while they are successfully movable, I'm unable to retrieve their positional values due to this obstacle.

Below is the code snippet:

function FullDragging() {
   // some code
   var dd = document.getElementById("DesigningDiv"); // frame
   var logoObject = document.getElementById("logoObject"); // draggable element
   var nameObject = document.getElementById("nameObject"); // draggable element

   function getDesigningDivSize() {
            var dd = document.getElementById("DesigningDiv");
            var aspDesigningDivHF = document.getElementById('<%=aspDesigningDivHF.ClientID %>'); // hidden-field which sends the changes in client-side to the server.
            aspDesigningDivHF.value = parseInt(dd.style.width) + "," + parseInt(dd.style.height);
        }
}
window.onload = FullDragging;

As the function is called onload, the error also occurs at this point.

Here's the relevant HTML structure:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID" Height="400px" Width="1400px" OnEditCommand="DataList1_EditCommand" OnItemCommand="DataList1_ItemCommand" CellPadding="40" RepeatColumns="2" RepeatDirection="Horizontal" OnCancelCommand="DataList1_CancelCommand" OnItemDataBound="DataList1_ItemDataBound" OnUpdateCommand="DataList1_UpdateCommand">
 <ItemTemplate> ... </ItemTemplate>
 <EditItemTemplate>
  <div id="DesigningDiv" style="height: 150px; width: 262.5px; border-style: groove; border-color: inherit; border-width: 1px; position: relative; height: 158px; width: 270px; background-color: #FFFFFF; visibility: hidden">
  <div id="logoObject" style="width: 51px; top: 31px; position: absolute; height: 34px; font-family: 'times New Roman', Times, serif; font-size: xx-large; font-weight: bold; color: #333333; cursor: move; left: 187px;"> logo </div>              
  <div id="nameObject" style="width: 61px; top: 31px; position: absolute; height: 22px; font-family: 'times New Roman', Times, serif; color: #666666; font-size: large; cursor: move; font-weight: bold; left: 29px; bottom: 105px;"> full name </div>
 </EditItemTemplate>
</asp:DataList>
javascriptasp.netdatalist

Answer №1

There are a couple of issues here. It's not recommended to populate an item template with static IDs because IDs should be unique in an HTML document.

You might want to consider assigning a class to these divs and then referencing them that way.

After your page is rendered, try right-clicking and inspecting one of these elements. ASP may add an extra prefix to your IDs since it's part of a datalist (for example, DivLabel1 in Visual Studio becomes DataList1_DivLabel1 once the page loads). JavaScript doesn't account for this conversion, so it's better to refer to these items by class instead.

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

Analyzing a CSV file and executing asynchronous operations on specific columns with the help of ajax requests

I possess a CSV file that contains placement links and target links formatted as follows: CSV Example [placement url],[target url] [placement url],[target url] [placement url],[target url] My objective is to parse the CSV file line by line using JavaScri ...

javascriptjquery

Can someone assist me with troubleshooting my issue of using a for loop to iterate through an array during a function call

Having recently delved into the world of Javascript, I've encountered a challenging problem that has consumed my entire day. Despite attempting to resolve it on my own, I find myself feeling quite stuck. The structure of my code is relatively simple ...

javascriptarraysfunctionfor-loopdynamic

MySQL is throwing an error stating that there is ambiguity in the column referenced in the WHERE clause

SELECT tbl_user.userid, tbl_user.firstname, tbl_user.lastname, tbl_user.email, tbl_user.created, tbl_user.createdby, tbl_organisation.organisationname FROM tbl_user INNER JOIN tbl_organisation ON ...

asp.netmysqlsql

What is the best way to convert this JavaScript iteration function into jQuery?

I recently encountered an issue with my JavaScript function that returns a list of elements with the class ".youtube", loops through them, and calls another function. The JavaScript logic is flawless, but I wanted to convert it into jQuery for better reada ...

javascriptjqueryhtmlcss

Leveraging jQuery.ajaxSetup for customizing beforeSend function and modifying outgoing data for AJAX requests

My goal is to develop a universal beforeSend function that modifies the data sent by each jQuery.ajax call. This will allow me to include a custom variable for tracking purposes in every request, regardless of the order they are sent in. For instance, let ...

javascriptjqueryajax

Are the files selected by the user not displaying properly in the URL?

I'm currently working on a project using PhoneGap where I am facing an issue with uploading files and adding all file names to the parameters. The desired format is: http://www.example.com/uplaod.html?file=file1,file2,file3 To achieve this, I have a ...

javascriptphpjqueryhtmlajax

Why does the Leaflet map appear inconsistently?

It's baffling that Firefox 24.0 and the latest Chrome are both failing to load my Leaflet map, but surprisingly, it works perfectly on Safari on my iPhone. Quite an interesting dilemma. This is my initial attempt at using Leaflet and Bootstrap...ever ...

javascriptjquerygisleaflettwitter-bootstrap-3

Ways to determine if an array with a mix of data types includes string values

Challenge I'm Currently Tackling: To solve this challenge, create a function named "findShortestWordAmongMixedElements". The task is to find and return the shortest string from an array that contains mixed element types. Important Notes: * In c ...

javascriptarraysstring

Can you demonstrate how to convert a string date array into a JavaScript array?

I am facing a challenge where I need to convert a string representation of an array into a JavaScript array for the purpose of looping. The string in question is enclosed within single quotes. Inside my JavaScript code, I have the following: var length1 ...

javascriptarraysjson

Verify that the JSON data contains the desired data type before adding it to jQuery

I'm working with JSON data extracted from an Excel file. I need to match the First Name in the JSON data with the 'First Name' field and append those elements to a specific div. Additionally, if the JSON data includes a 'status', I ...

javascripthtmljqueryjson

Experiencing difficulties in retrieving property of a non-object when working with json and php

My current project involves using AngularJS to collect user input from a form, then sending this data to a PHP backend for processing. After decoding the JSON file in PHP, I then perform a database lookup to find information that matches the input values. ...

javascriptphpmysqlangularjsjson

"Can you explain the method by which reveal.js adjusts the size of

I have been exploring the resizing behavior of elements in reveal.js and trying to understand how they dynamically adjust. If you resize the page height, you can observe that the elements shrink up to a certain extent along with the page. However, when in ...

javascripthtmlcssreveal.js

if else within the <dd></dd> tags

I have a code snippet in Vue.js that displays a certain value. <dl> <!-- Fan speed --> <dt>{{ $t('pageInventory.table.fanSpeed') }}:</dt> <dd>{{ dataForma ...

javascriptvue.jsfrontend

An addition operation in Javascript

Recently, I dipped my toes into the world of Javascript. However, I found myself puzzled by the script and its corresponding HTML output provided below. Script: <h1>JavaScript Variables</h1> <p id="demo"></p> <script> var ...

javascript

User update function is not being triggered by Ionic 2 Express call

I am currently working on implementing a feature in my Ionic 2 program that updates a user field when triggered. The code snippet below is from my user-service.ts file: // Update a user update(user: User): Observable<User> { let url = `${this.u ...

javascriptnode.jsexpresstypescriptionic2

Angular directive loads after receiving variables

In my project, there is an Angular directive responsible for loading data from a service. However, the data is being loaded using a variable obtained from a controller, which in turn was loaded from a service. Below is the code snippet for the directive: ...

javascriptangularjsangularjs-directiveangularjs-scope

Resolve issues with jQuery code or switch jQuery to pure JavaScript

I have been working with PrestaShop 1.7 and I recently wrote some jQuery code that affects the category page. The code is located in the following file path: public_html/themes/panda/assets/js/theme.js However, I noticed that it only works after refreshi ...

javascriptjqueryprestashop-1.7

Watching the $scope variable using $watch will result in triggering even when ng-if directive is used, displaying

Encountering an unusual behavior in AngularJS that may appear to be a bug, but there could be a logical explanation. A certain value is being passed to a directive as an attribute. Within this directive, the parameter is being watched using $scope.$watch. ...

javascriptangularjsangularjs-directive

Creating a Javascript Regular Expression to detect both accented and non-accented variations of a given string

Is there a way to use regular expressions in JavaScript to match both accented and non-accented versions of a string? I am customizing jQuery-ui's autocomplete feature by adding bold HTML tags around words in the suggestions. Here is my code snippet: ...

javascriptjqueryregex

Is there a way for me to retrieve the variable from one function and use it in another

I have a tool for managing images with descriptions that allows me to edit both the text and the image file. The challenge is saving the modifications I make in my database. Currently, I can only save changes if I modify the image itself. If I only update ...

javascriptjquery