Retrieving the information within div elements using ajax

There are numerous divs similar to this one, all created via ajax.

.done(function( response ) {
    $("#stores").html('');
    var iterator = response.retailer;
    for (var i=0;i<iterator.length;i++){
    $("#stores").html($("#stores").html()+
    "<div id="+response.retailer[i].id+" class='panel panel-default '>"+
    "<div class='panel-body'>"+
    "<p> Name: "+response.retailer[i].name+"<p>"+
    "<p> Address: "+response.retailer[i].address+"<p>"+                
    " <button id='AddAndSave' class='btn btn-success col-md-offset-10'><span class='glyphicon glyphicon-plus'></span></button>"+
    "</div>"+
    "</div>");
    }
})

Within the div is a button. When this button is clicked, I aim to extract all content of that specific div and store it as variables. How can this be achieved? Are there any references available?

javascriptjqueryhtmlcssajax

Answer №1

First and foremost, avoid using an ID for that button, since you are likely to have multiple buttons. Instead, utilize a class: 

.done(function( response ) {
    $("#stores").html('');
    var iterator = response.retailer;
    for (var i=0;i<iterator.length;i++){
    $("#stores").append("<div id="+response.retailer[i].id+" class='panel panel-default '>"+
    "<div class='panel-body'>"+
    "<p> Name: "+response.retailer[i].name+"<p>"+
    "<p> Address: "+response.retailer[i].address+"<p>"+                
    " <button class='AddAndSave btn btn-success col-md-offset-10'><span class='glyphicon glyphicon-plus'></span></button>"+
    "</div>"+
    "</div>");
    }
})

At the moment, you cannot add an event to that element because it's generated after $(document).ready();, so you must delegate the event to the document itself (or any "static" parent): 

$(document).on('click', '.AddAndSave', function(){
  // Perform certain actions when clicking on .AddAndSave
});

Furthermore, I've replaced your html() method with the append() method for potentially improved efficiency.

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

The HTML/CSS Progress Bar appears on the browser but does not appear when attempting to print the document

I am currently assisting a friend with creating a resume and we wanted to include a visually appealing progress bar for the skills section. After successfully implementing the progress bar and seeing it display correctly in the browser, we encountered an ...

htmlcss

Transferring user input to a child process in Node.js

I'm currently developing an online C++ compiler using the Node.js environment. With the help of the spawn function, I've managed to create a child process that compiles and executes the code, returning the output to the user. However, I'm f ...

javascriptc++node.jsonline-compilation

Setting an error state on the parent div of a checkbox

I am facing an issue with styling a standard HTML checkbox when it is in an error state. Since it's not possible to style the checkbox directly, I am attempting to apply the styling to its parent div instead. Consider this example: <div class="fo ...

jquerycsscheckbox

Creating a horizontal list using simple CSS techniques

Looking for some help with coding a horizontal list for a new website project. Can anyone review my code and help me identify any errors? <!doctype html> <html> <head> <title>My Website</title> <meta charset="u ...

htmlcss

Encountering numerous errors during npm installation in a react project

Struggling with React as I try to navigate through course files and run npm install, only to be bombarded with countless errors and warnings on every single file. I've double-checked my directory and ensured the presence of a json file. gyp ERR! ...

javascriptnode.jsreactjsnpmcommand-line

What is the best way to implement a transaction fee when a specific function is triggered within my contract?

Consider this scenario: whenever a user successfully performs a contract function that calculates the sum of two numbers, I want to impose a 1% ETH fee that is transferred to a separate account from the contract. Although my current method "works", it is n ...

javascriptreactjsethereumsolidityethers.js

Utilizing an npm package within vscode with the .Vue framework: A step-by-step guide

After installing an npm package, I realized that it is written in JS while I am using the Vue framework. Even though Vue is based on JS, its syntax differs from traditional JS. How can I effectively integrate this package into my Vue project? I successful ...

javascriptvue.jsvue-componentnpm-install

What is the best way to prevent URL modification in Angular?

Currently, I am working on a project with a specific page (let's call it localhost:XXXX/notification-page) and we want this to be the only URL that can be accessed. Any attempt to change the URL should redirect users back to the notification-page. As ...

htmlangularweb

The JavaScript code fails to display on the web server

Greetings, I am a recent member who has been observing for quite some time. Typically, I can find answers to my questions through simple searches and experimentation on my own. Currently, I am delving into the realms of Twitter Bootstrap and jQuery. Howev ...

jquerytwitter-bootstrap

The trio of Phonegap, Mysql, and ajax make a powerful combination, but

Trying to migrate data from HTML to MySQL using Phonegap, but it's not working. What am I doing wrong? Sorry for my poor English and thank you for your help. HTML: <div id="landmark-1" data-landmark-id="1"> <form> <di ...

phpjquerymysqlajax

Unspecified OrbitControls Compatibility Issue between Angular2 and Three.js

I'm running into issues trying to set up OrbitControls in my Angular2 project. I managed to display a scene with a box, but I'm struggling to move the camera. Upon investigation, I found that my OrbitComponent, responsible for defining orbit con ...

javascriptangularthree.js

Can a circular design incorporating an arrow and gradient background be created?

I'm looking to create a circular design with an arrow and a gradient inside that can adjust dynamically based on screen resizing. I know it can be done using an image, but I'm wondering if it's possible to achieve this effect using just a si ...

htmlcss

Transforming jQuery.ajax post to fetch API

I am currently working on a service that asynchronously calls a REST API. My jQuery code is working fine, but I want to switch to using JS fetch. However, when I try to post the data with fetch, the server responds with an error saying "Missing parameter: ...

javascriptjqueryajaxfetch

Is there a way to ensure that the Bootstrap toggle starts off in a collapsed state?

I need assistance with creating a toggle feature where clicking on a line of text will reveal more text below, and when clicked again, the extra text collapses. I want the text color to change to blue when collapsed and red when expanded. The only issue is ...

csstwitter-bootstrapbootstrap-4toggle

Deleting an added element upon closing the dialog box

Utilizing JQuery and Ajax, I successfully update my database. Following each update, a png icon is displayed briefly for 1 second. Specifically, the update form is contained within a JQuery dialog box. However, upon closing the dialog box after an update, ...

javascriptajaxjquery

Include a name in the set_values function using Rvest

I'm currently working on scraping data from this website. I have a code written in rvest for login, but each time the page refreshes, the form name changes. library(rvest) loginpage <- "https://demo.glpi-project.org/" pagesession <- html_sess ...

htmlrweb-scrapingrvest

Using jquery to refresh several backgrounds at once

While I have some knowledge of CSS and various JavaScript libraries, I've encountered difficulty in integrating multiple backgrounds into the code that I found on this link: http://codepen.io/quasimondo/pen/lDdrF. My goal was to overlay a transparent ...

jqueryhtmlcss

Guide to populating a div with post content upon clicking a link

When the link is clicked, I wanted a script that would load the content without reloading the whole page. However, it seems like the actual page is being loaded into my featuredv div instead of just the post content. It feels like when the link is clicked, ...

jquerywordpress

Fetch data using Ajax without the need for a hash signal

My current goal is to load content through Ajax on a website. Let's say our main page is example.com/blankpage (I've eliminated the .html extension using htaccess). At the moment, I have it set up so that when a link on the page directs to mysite ...

javascripthtmlajax

Node responds with a 404 error upon receiving the post request

I am facing an issue with my jQuery code. Here is what I have: $.ajax( { type: 'POST', data : mydata, url : '/routerfunction', dataType : 'String', success : function(data) ...

javascriptjquerynode.jsexpress