Implementing various event listeners for asynchronous JavaScript and XML requests (

Question

Implementing various event listeners for asynchronous JavaScript and XML requests (

Struggling to iterate through an ajax query and encountering a problem where the i value always defaults to 1. I'm not very well-versed in js so any suggestions on how to tackle this issue or possibly a better approach would be greatly appreciated. Thanks in advance!

$.each(Array(10), function(i) {
            var clickedButton = $('#' + (++i));
            $(clickedButton).click(function (){
                $.ajax({
                    type: 'POST',
                    url: 'example.php',
                    data: {lightid: i},
                    success:function(result){}
                });
            });
          });

javascript ajax iteration

Answer 1

Answer №1

To achieve the desired outcome, you can utilize a custom data attribute containing the necessary data for each "button". This information can then be accessed using

this.dataset.<attribute-name>

and sent to the server:

$('[data-id]').on('click',function(){
 $.post('https://jsonplaceholder.typicode.com/posts',{lightid:this.dataset.id})
  .done(r=>console.log(r))
})

div[data-id] {cursor:pointer}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Click on any div below:</div>
<div data-id="1">one</div>
<div data-id="2">two</div>
<div data-id="3">three</div>
<div data-id="4">four</div>
<div data-id="5">five</div>
<div data-id="6">six</div>
<div data-id="7">seven</div>
<div data-id="8">oneeight</div>
<div data-id="9">nine</div>
<div data-id="10">ten</div>

The choice of using the data-id attribute was intentional, as the html id should typically begin with an alphabetic character.

Answer 2

To achieve the desired outcome, you can utilize a custom data attribute containing the necessary data for each "button". This information can then be accessed using

this.dataset.<attribute-name>

and sent to the server:

$('[data-id]').on('click',function(){
 $.post('https://jsonplaceholder.typicode.com/posts',{lightid:this.dataset.id})
  .done(r=>console.log(r))
})

div[data-id] {cursor:pointer}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Click on any div below:</div>
<div data-id="1">one</div>
<div data-id="2">two</div>
<div data-id="3">three</div>
<div data-id="4">four</div>
<div data-id="5">five</div>
<div data-id="6">six</div>
<div data-id="7">seven</div>
<div data-id="8">oneeight</div>
<div data-id="9">nine</div>
<div data-id="10">ten</div>

The choice of using the data-id attribute was intentional, as the html id should typically begin with an alphabetic character.

Implementing various event listeners for asynchronous JavaScript and XML requests (

Answer №1

Similar questions

Issue: The postback or callback argument is invalid

Using Node.js and MongoDB to filter a sub array within an array of objects

React does not accept objects as valid children. If you want to render a group of children, make sure to use an array instead

Neither Output nor EventEmitter are transmitting data

Incorporating interactive maps into an AngularJS web application

Creating a unique 3D model through specified coordinates with the use of THREE.js

A step-by-step guide on how to use ajax and node to save a file onto

modify a column in a database table when a different field is chosen

The cascading menu causes interference with the function of other elements in the

In JavaScript, promises remain in a pending state

An error has occurred: String cannot have property 'innerText' created

Generate an array from a string where certain words are substituted with objects featuring the correct formatting styles

Persistent navigation once fullscreen banner is completed

Express app issues error: JSON response not returned properly - Uncaught SyntaxError: Unexpected end of data

Implement the parent jQuery library within a child iframe

Issues with MySQL not functioning properly when using Promise.All in a Node.js environment

Tips for executing a JavaScript function within a secure sandbox environment

What methods are most effective for verifying user credentials in a web application using Node.js and AngularJS?

HTTP 400 Error: Bad Request Callback

The problem of removing issue divs persists despite Jquery's efforts