Connect the mileage tracker to a Datalist or grid view component

I recently downloaded the Odometer Sample from , however, I am facing an issue where only the first element in the Datalist is getting the Odometer display, while others are not displaying it. Here is the snippet of code:

<script type="text/javascript" src="js/UvumiOdometer-compressed.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-odometer.css">
<script type="text/javascript">
  var odo2 = new UvumiOdometer('odometer2', { digits: 3 });
</script>

<asp:DataList ID="dlEquipment" runat="server" DataKeyField="Device_Id"
     RepeatDirection="Horizontal" RepeatColumns="5" Width="100 >
     <ItemTemplate>
    <div id="odometer2<%# Eval("count")%>">
    </div></ItemTemplate>

javascriptjqueryasp.netvisual-studio-2010css

Answer №1

The reason for this issue is the utilization of a static id odometer2 inside a list element. IDs in a document must be unique, or else the document.getElementById(id) function will always return the first element with that particular id.

If you happen to be using jQuery, consider adding a class attribute to the div

<ItemTemplate> <div class="odometer2"> </div></ItemTemplate>

Subsequently,

<script type="text/javascript">
jQuery(function($){
    $('.odometer2').each(function(){
        new UvumiOdometer(this, { digits: 3 });
    })
})
</script>

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

Creating a diagonal division border using CSS alongside a background image

I've been attempting to place 2 divs next to each other with a diagonal space between them. While I've come across several tutorials and discussions on Stack Overflow about creating diagonal divs, they often involve using borders with solid color ...

csshtmldiagonal

What is the process for transferring a JavaScript file (containing multiple functions) from the server to the client side?

I am looking for a way to hide the server-side functionality from the end user in order to maintain privacy. I have not been able to find a solution for this issue thus far. Currently, I have a .js file containing functions that are used within an html5 f ...

javascriptjquerynode.jshtml

encountering error 404 with rails and ajax request

I encountered this particular error in my Rails logs: Completed 404 Not Found in 11ms ** [Raven] User excluded error: #<ActionController::RoutingError: Not Found> ActionController::RoutingError (Not Found): app/controllers/schools_controller.rb:6 ...

jqueryruby-on-railsrubyajax

Can Mutation Observer be utilized in conjunction with a Three.js element in an A-Frame environment?

export class ColliderComponent { constructor() { this.observer = this.createMutationObserver(); this.registerAframeComponent(); } //Registers the AFRAME component. registerAframeComponent(){ const self = this; AFRAME.regi ...

javascriptthree.jsaframewebvrcollider

Adjust the width of the column to only contain fixed content and not span the entire page

Check out my solution on Plunkr to see the issue I'm facing: Plunkr I'm dealing with a layout that includes a menu on the left and page contents on the right. My goal is to have the menu fixed in place so that it doesn't move when the page ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Learn how to retrieve the TextBox value from a button click within a Nested Gridview

I am trying to extract the value of a textbox inside a Nested Gridview using jQuery in ASP.NET. When a Button within the Nested Gridview is clicked, I want to display the textbox value in an alert box. Here is an example setup: <asp:GridView ID="Grid ...

javascriptjqueryasp.netgridview

Embed three.js within a div container in an HTML document

I've been attempting to place the Canvas Lines three.js inside another div, but it doesn't seem to be working as expected. Instead, when I try, the JS code places the canvas at the very end of the body. Can anyone tell me why this is happening? ...

javascriptthree.js

How come (23 == true) is incorrect but (!!23 == true) is correct? After all, there is === for exact comparisons

The question boils down to this: are both 23 and true truthy values? If so, shouldn't they be equal under the loose comparison operator ==? However, there is also the strict comparison operator === for cases where precise equality is required. UPDATE ...

javascript

Tips for utilizing the "Sign In with Apple" feature through Apple JS

For implementing "Sign In with Apple" on a web platform using Apple JS, you can refer to the code example available at this link. Now, the query arises: where can I find the Client ID required for this process? I have tried using the app id identifier fro ...

javascripthtmlapple-sign-in

Google Maps GeoCoding consistently relies on the language settings of the browser in use

I have implemented the Google AJAX API loader to retrieve information in German by loading the maps API using this code: google.load("maps", "2", {language : "de"}); Despite trying variations such as deu, ger, de, de_DE, and ...

javascriptajaxgoogle-mapsgoogle-api

We apologize, but the module you are looking for cannot be found: Unable to locate 'fs'

Trying to create a new MDX blog website using Next.js 13 with the latest app router, but encountering an error message saying "Module not found: Can't resolve 'fs'". It was working fine in Next.js 12 and pages directory, but not in the lates ...

javascriptnode.jsreactjsnext.jsnext.js13

Populating a form within an Angular.js application using PhantomJS

Looking to test an AngularJS application using PhantomJS? The first step is to fill in the login form with the username field, assuming there are no other fields involved. Typically, in a real browser, this field is managed by Angular (with the ng-model ...

javascriptangularjsformstestingphantomjs

Transferring information between two components in separate Angular 4 modules

Within my application, I have defined two modules named AppModule and UserModule. I am currently encountering an issue with data sharing between the AppComponent and the LoginComponent (which belongs to the UserModule). Below is a snippet of app.componen ...

javascriptangulartypescriptrxjs

When resizing the window in IE8, the function DIV offsetWidth/Width/innerWidth returns a value of zero

My page is filled with many elements, one of which is the following DIV: <div id="root"> .................. <div id="child1"> ............. </div> <div id="child2"> ............... </div> & ...

javascriptjqueryhtmlcssinternet-explorer

The AJAX request is failing to send the most recent data for processing on the server side

Recently, I created a server-side processing script for datatables v1.10.0 that has been giving me some trouble. The server needs the product id to fetch records from the database, which it gets from a select2 plugin based selector selection. However, I ha ...

jqueryajaxdatatables

Sort through various table columns

I am currently utilizing a data table component from Framework7, which is being generated dynamically with JSON data. My goal is to make the column filter input functional within the table. So far, I have succeeded in implementing the filter for the first ...

javascriptfilterhtml-tabledatatablehtml-framework-7

Guide on how to navigate users to a new page using react-router-dom v6 within a class-based component

I am facing an issue where I need to redirect the user to '/dashboard' after logging in, but I do not want to use history.push() from react-router-dom v5.2.0 as I have react-router-dom v6 installed. Is there another alternative to achieve this re ...

javascriptreactjshttp-redirectreduxreact-router-dom

Ajax modal login feature refuses to close

Struggling to close a modal login box? Everything seems to be functioning correctly with the modal screen and ajax features, but I'm facing issues when it comes to closing the modal form. The code snippet looks like this: HTML: <a href="#" cla ...

javascriptphpjqueryajaxmodal-dialog

Prevent overlapping of nodes and edges in a D3 force-directed layout

Check out this fascinating example at http://bl.ocks.org/mbostock/1747543: In the demonstration, Mike illustrates how to prevent nodes from colliding with each other in a graph. I'm curious if it's feasible to also prevent collisions between no ...

javascriptalgorithmd3.jsforce-layoutgraph-layout

How can I use AJAX to send a dynamically generated PDF file?

I utilized jsPDF to create a PDF object. My goal is to send an email with a PDF attachment using AJAX, but I am facing issues in sending the file correctly. I attempted to convert it into a Blob object for transmission and later decode it to base64 in PHP ...

javascriptphpajaxemailpdf