Sending items from a dynamically created list to a different webpage

In my JavaScript file, I have an appended list that looks like this:

$("#ultag").append($("<li onclick=\"next(this.id);\" id=\"litag\"><div id=\"litagdiv\"><div id=\"imgdiv\"><img id=\"listimg\" alt=\"picture\" src="+file_image+"></div><img id=\"help_picture\"  src=\"images/call_icon_list_black.png\"><div id=\"datadiv\"><div id=\"distance\">"+final_distance+" mts"+"</div><div id=\"gulpname\">"+file_name+"</div><br><div id=\"gulpaddress\">"+file_address+"</div><div id=\"time\">Open till "+""+file_time+"</div></div></div></li>"));

I am looking to pass the file_address, file_name, and image to another HTML page.

Any assistance would be greatly appreciated. Thank you.

javascriptjqueryhtmlcsstizen-web-app

Answer №1

Utilize local storage for storing values :

var gulpaddress = $('#gulpaddress').text();
localStorage.setItem("file_address", gulpaddress );

Retrieve the saved item :

localStorage.getItem("file_address");

Upgraded

If you have multiple elements that need to share the same identifier, such as an id, use a class instead; otherwise, only the first matched element will be returned. Check out the example below :

Replace this :

<li onclick=\"next(this.id);\" id=\"litag\">..
<div id=\"gulpaddress\">..

With this(remove inline js and id attribute) :

<li class=\"litag\">..
<div class=\"gulpaddress\">..

Then update your javascript :

// Register event handler to all matching classes
$('#ultag').on('click','.litag', function () {
    // Find descendants of the clicked element
    var gulpaddress = $(this).find('.gulpaddress').text();
    ..... 
    localStorage.setItem("file_address", gulpaddress );
    .......
    .......
});

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

Utilizing the controller specified in the template that has been included

Within this snippet of code, I am attempting to utilize a controller named FooCtrl that is defined in the included template app/foo.html, using the directive common.script. angular.module('common.script', []).directive('script', func ...

javascriptangularjslazy-loadingangularjs-ng-include

Sending Data From Child Component to Parent Component in React Using a onClick Event

I am a newcomer to using React and am currently immersed in a React Rails application. <h1><img src={activity.image_url}/></h1> <p> {activity.name} </p> <p> Rating: {activity.rating} </p> ...

javascriptreactjs

Angular ng-repeat encounters difficulty in parsing Arabic object

As I create a JSON object that contains Arabic content shown below $scope.arabicContent = ["ردهة","قاعة الاجتماعات","مبرمجين الجوال","المدراء","المحاسبة","المحاسبة","المبرمجين‎","مطبخ‎ ...

javascriptangularjsangularjs-ng-repeat

What is the best method for hashing CSS module class names in the latest version of Nextjs?

Is there a way to modify/minify/encrypt/conceal/obscure CSS class names in Next JS? I've attempted various methods, including referencing this discussion. Encountering the following issues while experimenting with this proposed solution: yarn bu ...

javascriptnode.jstypescriptnext.jsnext.js13

Achieve successful Angular2 routing implementation on IIS 7.5

Recently, I have been delving into Angular2 and I must say, the routing feature works flawlessly when running on the nodejs lite-server. Whether I navigate to the main page (localhost:3000) or enter localhost:3000/employee, the application flows smoothly. ...

htmlangulariis-7.5

What is the best way to navigate to a particular div within an iframe?

In one of my div elements, I have embedded an iframe with a source URL like this: <div> <iframe ng-src="{{somesourceurl}}"></iframe> </div> The content loaded by the iframe contains HTML with uniquely identified div tags as sh ...

javascripthtmlangularjsiframe

Contrasting importing CSS directly in index.html versus using styleUrls in Angular 5

My landing page and dashboard components have different CSS styling, causing one of them to not function properly depending on the CSS. I tried removing these two lines from index.html: <link href="./assets/css/bootstrap.min.css" rel="stylesheet" /&g ...

cssangulartypescriptbootstrap-4angular5

Discover the correct steps to transition from using particles.js to the react-tsparticles package

Migrating from react-particles-js to react-tsparticles-js Hi there! I'm currently facing an issue with my ReactJS website here, which is deployed using Netlify. The error code below keeps popping up, and I believe it's related to the transition ...

javascriptnode.jsreactjsnpm

What is the best way to ensure uniform header height on cards or similar elements using flexbox?

Avoid using hacks Do not hard code the solution. The goal is to create a solution that works for dynamic content and responsive screen sizes, rather than just one specific case. The issue lies in the fact that the headers are not direct children of the e ...

jquerytwitter-bootstrapcssflexbox

How to send a PHP array to AJAX and show it on the webpage

Looking to enhance the interactivity of my website by showing icons (either correct or false) after users submit a registration form. This way, they can easily identify any incorrect fields. To achieve this, I understand that I'll need to utilize jso ...

javascriptphpajax

What could be the reason for Selenium refusing to accept dynamic variables in this specific function?

What is the reason for the difference in behavior between these two code snippets? monday_div = driver.find_element(By.XPATH, '//*[@id="GXPMonday"]') And why does this one not work as expected? weekdays = ['Monday', 'Tue ...

pythonhtmlselenium

OnPush strategy and template updates: Propagating modifications to the parent component

I am currently facing an issue with a parent component that consists of two templates. The first template simply displays data-bound text, while the second template contains a child component responsible for updating the data model. Both the parent and chi ...

javascriptangulartypescript

Is there a problem with the -webkit-transition property not functioning properly within a bubble element?

As I was developing my portfolio, I had an idea to add a unique hover effect. I wanted a bubble with an arrow to appear when someone hovers over my name. While I managed to create the basic functionality, I encountered an issue with the -webkit-transition ...

htmlcsshoverwebkit-transition

What could be causing my grid to malfunction once the media query is triggered?

I am in the process of creating a straightforward navigation bar. My goal is to have the <nav> content, which includes the navigation links, positioned inside the header along with the logo (a random image from unsplash.it). To achieve this layout, I ...

htmlcssmedia-queriescss-grid

The class within the div element will fail to pick up the specified CSS styles

I've been troubleshooting an issue with a newly created div that's not picking up its corresponding styles from the stylesheet. It's frustrating and I could really use some help. Here is the HTML: <div class="2columnlayout"> < ...

htmlcss

Steps for opening a clicked link in a new tab:

I have a link on my page that I would like to open in a new tab when clicked, but it doesn't seem to be working. Can anyone offer some suggestions or help? So far, I've tried the following code: <a target="_BLANK" ng-href="{{news.url ...

javascripthtmlangularjshref

Expand the element's functionality to encompass the overscroll area on OS X

I have a webpage with a fixed background and a floating footer at the bottom. When users on OS X overscroll, they can see the background below the footer. Rather than disabling overscrolling for my page, I want to extend the bottom div to cover the backgro ...

javascripthtmlcssmacosoverscroll

Trouble with JQuery AJAX form submission function not activating during timeout

I have a function that is responsible for submitting forms: function post_form(form_id, type, redir_url) { $( form_id ).submit(function(e) { CheckRequired(e); var postData = $(this).serializeArray(); var formURL = $(this).attr( ...

jqueryajax

Passing backend variables/data to AngularJS in Express JS

As a newcomer to express js, I appreciate your patience with me. I've been diving into "MEAN Web Development" by Amos Q. Haviv and finding it to be an excellent read. However, there's one part that's leaving me puzzled. It seems that in or ...

javascriptangularjsnode.jsexpress

Having difficulty extracting the specific value of a cell in a table using JavaScript

My current task involves fetching the values from a specific cell within a table using this code: function addCatAttr() { var tbl = document.getElementById("tblAttributes1"); if (tbl.rows.length > 1) { for ( var i = 1 ; i < tbl.rows.l ...

javascripthtml