Saving data using Jquery or Javascript - javascript

Is there any way to save variables using Jquery or javascript, besides setlocalstorage?
For example: I have a product catalog website online. I made administration rights features like a window where you can add the name, picture and price of an item. That item data goes into the array using push(). But it only works locally. I want the items I add to be seen by anyone who visits my website.
var products=[["fishing rod","https://i.pinimg.com/originals/d1/1c/41/d11c419d0c75307b18e388a0c2d64907.jpg",10.99],["fishing line","https://s7d2.scene7.com/is/image/dkscdn/15SFXUSFXSG330YD6FLI_Clear_is/",3.99]];
I have 3 inputs on my window, 1 for name, 1 for img src and the last one for the price. When I click 'OK' it pushes that new array into my products array. But I want to save that array inside the folder of my online website. So that more people with admin rights can add more products and that I can see the changes online.
I hope I made myself clear.

You should use a backend that store this data in some kind of database (SQL or nosql).
Then you access it a display the content to all the users.

Related

Images doesn't get updated with computed method NuxtJS + working example

I've created a bookmark list, & I used local storage to save user choices as a bookmark
after one coin get's added to the bookmark list I sort them based on this event and added coins gets on top of the list
My issue is when I reload the page images & links doesn't get updated base of data change but anything else will
I've created a working example on the code sandbox website
https://codesandbox.io/s/sleepy-chandrasekhar-pt3pm?file=/pages/index.vue
Here is an example on our online website(This is for the advanced trade page):
https://app1.tabachain.com/trade?market=DOGE_USDT

How to fetch data from Firebase Firestore to card views on html

I am new to web development and recently, I am making a music streaming website. I want to get data from firestore to card views.
Let me explain my issue using an example,
I have a collection named Musicians in firestore.
This is an example of my data structure,
Musicians---
Random_ID_01--
Artist_name:"Isuru"
Image_URL:"url"
Random_ID_02--
Artist_name:"Jonny"
Image_URL:"url"
Random_ID_03--
Artist_name:"Alex"
Image_URL:"url"
I want to paginate these data like below,
db.collection("Musicians").orderBy("Artist_name").startAt(first_letter_of_name).endAt(first_letter_of_name +'\uf88ff');
I am using Boostrap alphabetical pagination bar to get the clicked value.
When the user clicks button "A" I want to fetch all the artists which the first letter starting "A".
I tried using many methods like cloneNode(true) but it wasn't like what I wanted because it was adding all the data to the same page while old data remaining.
The way I want to display artist data is when the user clicks button "A" Alex's card should appear on the page and when the user clicks button "J" Jonny's card should appear on the page but Alex's card should not be there.
I would be greatly appreciated, If you can explain to me using js or Jquery source codes

Do clock event on a collection of items in a html page by javascript

I am working on a web project. In order to get information about each contact in contact list, I have to click on their name, then the webpage by a jquery or javascript approach adds some new DIVs to the page which have the contact information. So, it seems I have to write a JavaScript function make an automatic clicks on each of contact list items and wait few seconds and fetch the added DIVs. Unfortunately, I do not know that how is it possible?
It is not a good approach what you are asking for,
I have a suggestion
1) Try to populate the information along with the contact list itself
(If you are populating the contact list from an api you must need to be provided with the information corresponding to each contact. It would be better than what you are trying)
Try to get Contact details along with contact list and store it in some session or local storage or even in some global variable. Then on clicking the contact list based on Contact name ID filter data from session and display it where ever you want

Dealing with search results and bootstrap modal

I have a php file that searches for a keyword in a MySQL database table. This script builds a page with a lot of products organized by brands… When you click a product it shows a bootstrap modal with more info (calling another php file that looks for the particular id of the product). The modal has two buttons and needs to be able to go to the previous and the next product of that brand and this buttons should be disable when reaching the first or last product.
This is what I’ve been doing:
While inserting the data from the products in the page I generate an XML file with all the brands and inside each brand, all the ids of the DIVs corresponding to the product. Then I have to build arrays in Javascript to handle this data. The code is getting really messy so I’ve been wondering:
What’s the best way to link all the products so I can go back and forward in my modal?
I ended up building something like this:
<div id='231' data-brand='somebrand' data-brand-index='3'>
then i can get the id with jquery:
var x = $("div[data-brand='somebrand'][data-brand-index='2']");
alert(x.attr("id")); //shows 231

Is it possible to use Javascript to temporarily store data while User adjusts, and then pass as Hash to Rails Controller?

At a high level, building an application that allows User to request Items from other Users located in the same county as the requesting User. User and Item are both models with associated databases.
On the request page, I'm trying to build 3 components.
1) A map that shows
A marker for each other User
When clicked on, the marker displays a popup that lists the Items that that User has. The requesting user can click on each Item to add it to the list of Items s/he would like to request
2) A set of search fields that allows the requesting user to filter the markers for Users and Items on the map, for example, perhaps by dates_available.
3) A "cart" (not literally since this is not about e-commerce) that shows the Items the requesting User has currently added, with a final submit button. Note, dates_available should not only be a search field, but also part of this Request
A not perfect example is this screenshot from Getaround:
I'm pretty new to coding in general, so always want to think through plugins, APIs, shortcuts, etc. The below is just for reference, but if you have comments on how to implement this better, PLEASE do tell me! Right now, I am currently thinking of using:
For the map:
Openlayers.org
Gmaps.js
For the search (which is really a filtering capability):
Ransack gem (https://github.com/activerecord-hackery/ransack)
THE KEY QUESTION
For the "cart" and the click Item to add to "queue" part, I realize that while I can do this in Rails purely, it might be less of a positive UX experience since the page would constantly re-render every time a new item were added, not to mention it'd potentially result in excessive pings to the database or records to be created. I'm thinking of using Javascript to basically make the "cart/queue" a staging area for temporary storage, where the User populates it with whatever Items s/he wants and edits as needed, but it's not until the final submit click that the entire group of Items is passed as a Hash to the Rails Controller to be saved.
Now, since I don't really know JS very well, any resources on how to do this (easy plug-in solutions, other considerations I may have missed) or if it's not possible (in which case pray tell) would be greatly appreciated.
Thanks!
You may try Javascript localStorage.
localStorage.myTempValue = "my temp value";
or
localStorage("key", "value");
You can store object:
var person = { name: "xxxxx", age: 35 };
localStorage.Person = person;
Hope my answer may trigger an idea in you!

Categories

Resources