Save a DOM item to a list? - javascript

I have to design a CRUD but the next thing is to create a figure of grids and that when you click on a grid it is painted and give it a name and save it
And after that list them, that as they are added to put the last and so on
I should do this using React and if possible implement it with redux.
What makes me stupid is that I don't know how to save an html element locally as a photo or something like that, I'm new to React and I don't know how to implement it

Related

Django update content of HTML element on same page based on selected item

The title is a bit vague as I couldn't think of a way to summarise this.
I have 3 django models. Let's call them root, branch leaf to make it easy. A root can have multiple branches and each branch can have multiple leaves.
In my template I am displaying buttons that are populated from the root objects. When a user clicks one of these buttons I would like to update the content of another element on the same page with all the branches that are children of that root. When a branch is clicked, i'd like to update another element with all the leaves. I'm assuming the process would be the same for the two updates.
I am pretty new to Django but not to programming and I can't seem to find a good explanation of how to detect which 'root' has been clicked and pass that back to django in order to populate the branch elements.
Can anyone offer some guidance? I probably don't need code, just more of an idea of what the workflow is. E.G use onclick to send the name of the clicked item to a javascript function, call out to a python function that gets all the branches, do some magic.......
Thanks
Mick
This is more of a JS thing than Django. There are two options, as far as I know, for the kind of dynamic content you want:
You can load the whole "tree" (all roots, branches and leaves) with the display style as none and then make change the appropiate ones to another value (block or inline) via javascript when a button is pressed. The onClick function would look something like this for a branch.
function displayBranch(branchId){
for(let branch of document.getElementsByClass("branch-class"){
branch.style.display = "none"
if(branch.id == branchId) branch.style.display = "block"
}
}
Or you can load none, but add endpoints to your Django API to send branches and leaves, then use AJAX calls to retrieve them on a button press. This one requires more code, so I won't include code, but assume that you know basic AJAX and how to create new endpoints in your app.

retrieving single object from json in react

I have searched far and wide, I have a long history with Angular and am sorta new to the world of React. I am looking to retrieve a single item at a time from my json file. The data is synced and it loops into render flawlessly. This would be .map(), however I do not wish to display all items in the json at once. I would like to show 1 item, then click through with navigation I have set up to show each one individually. In Angular this is done by doing something like this data[0].item index item displays.
Any ideas? Thank You

React Native Multi Component Form

Trying to think of a good solution to this issue, I am trying to create a Form which would exist on multiple pages. At one point if you press an option on one of the buttons on page 1, it will bring you to page 2 where you select something, and then go back to page 1. The issue I am having is writing the code so that it will rember what was currently on page 1, and can pass the information from page 2 to page 1.
I am assuming I am going to have to use some sort of state management system to pull this off, but honestly have no clue. RIght now all I use is react native flux for navigation for page to page.. and thought about just passing everything as props.. but that seems clunky
Any help would be awesome!
Well, if your form is simple and you do need to have multiple screens, I see no reason not to use the props injected by react-native-router-flux. But if you are looking for something that can scale a bit better, why not try to put your form data in a temporal object inside your state manager. For the sake of the example, let's say redux. Create a reducer that stores an object with all the form data, and bind your different screens so that they can access it. Then, through actions, update the values when the user inputs something. There might be a few tricky edge cases, such as clearing all data when the form is submitted, what happens if the user cancels the action, etc... Sure, it looks a bit cumbersome to handle data in such a way, but I think it could be a nice solution.

living web page elements

I have a simple rails app with a model Task, which has 10 rows. It does not matter what's inside this table. On the index page I can see all 10 elements and I need to arrange them in proper sequence, when I did this, I should see a message "Done".
If I understand correctly this should be implemented in javascript, because page should not be reloaded, right?
I want to be able to rearrange the elements via drag and drop.
How I can realize that function?
I would start with here -> http://jqueryui.com/demos/sortable/
You can sort and its quite simple as there great examples on the site how to do this and hook into events.

How to implement dynamic taxonomy navigation / hierarchical drop down list using ajax/jQuery?

I'd like to provide my users a way to navigate a taxonomy by successively drill down ono drop down lists.
A simple example would be something like ebay's categories. Say you pick the category "Clothing", the next drop down list would display all the sub-categories under Clothing such as "Shorts", "Pants", "Coats" etc. And this can go on arbitrarily deep.
I looked at the jQuery plug-in mcDropdown. The interface looks really nice. However it seems to require the entire taxonomy to be passed to the plug-in in one go. Other plug-ins I looked at also have this limitation.
I need somethinig that retrieves & displays data dynamically. So after the user picks "Clothing", the UI sends that selection back to the server, which then sends back a list of sub-categories of "Clothing", so on and so forth.
Is there any jQuery plug-in that does that? Or what would it take to implement that in plain jQuery?
I'd prefer jQuery, but other frameworks would be fine too.
I do not know of some plugin for this so here is a breakdown of the process..
Should not take long to implement.. (i do not attempt it as it relies on your server-side technology and preference between html/xml/json for the ajax call returns..)
jquery Ajax call to bring 1st level data
create dropdown with jquery and add fetched data to it
List item
use jquery .data() method on the new dropdown a autoincrementing counter (will be used to remove all later instances when you change something in a dropdown that is not the last)
bind a handler to the .change() event of the new dropdown that will repeat the entire process, passing as parameter to the ajax call the id of the selection (should create the logic once and just invoke it manually the first time..)
in the same handler, check if the counter of the select box is not the last one, find all dropdowns and remove those with counter greater than this dropdown..
add the new dropdown in the DOM..
I hope it makes some sense..
I once wrote a plugin that might be what you're looking for; if not, at least it should give you a good place to start coding from (hopefully :)

Categories