Bear Bibeault

Author and ninkuma
+ Follow
since Jan 10, 2002
Bear likes ...
IntelliJ IDE Java jQuery Mac Mac OS X
Author of:
Secrets of the JavaScript Ninja, 1st and 2nd editions,
jQuery in Action, 1st, 2nd and 3rd editions,
Ajax in Practice, and
Prototype and Scriptaculous in Action
Austin, TX
Cows and Likes
Total received
In last 30 days
Total given
Total received
Received in last 30 days
Total given
Given in last 30 days
Forums and Threads
Scavenger Hunt
expand Ranch Hand Scavenger Hunt Green check
expand Greenhorn Scavenger Hunt Green check

Recent posts by Bear Bibeault

Cezar Apulchro wrote:and load data to fields of my jsp page

Note: by the time it reaches the browser where JavaScript will execute it is no longer a JSP page, rather it is the HTML page that was generated on the server by the JSP.

This is an important distinction as some people mistakenly think that they can still do JSP-ish type things in a page once it is at the browser.
OK, the formatting of the code made me miss where the handler was passed.

No, as it simplest, a POST is mostly used when a non-idempotent operation is to be executed on the server. There's a little more than that to it, but that'll do for our purposes.

Getting data, even if its pre-formatted HTML, is clearly a GET.

And, if the intent is to load the formatted HTML returned as the response into the DOM, that's where the jQuery .load() method is really handy.
4 days ago
In your Ajax logic, where do you do anything with the response?

And why is it a POST?
4 days ago
You got my point exactly. The JSP is evaluated on the server long before the generated page is sent to the browser where JavaScript is executed. So trying to mix JavaScript into the JSP requires temporal anomalies and likely subatomic particles that can cause subspace shifts and phasic distortions¹.

Likely what you need to consider is doing in JavaScript the manipulations that you were thinking about doing in JSP.

¹ Apologies if you're not a Star Trek fan.
4 days ago
What is it that you are trying to do here:?
4 days ago
You are looking for the attribute on the function context (this) in the handler. Is that really where you need to be looking for it?
Then the files are no longer being accessed on your local hard drive. That's what I meant: you need to upload them somewhere to serve them via URL.

You can use a trick here: include the photo as an attachment, and right click to get its URL.
6 days ago
How could coderanch possibly access files on your hard drive? Unless, of course, you are running a file server and use a URL that makes requests to that server.

6 days ago
You enter the URL of a photo posted on the web. For example, I host mine on Dropbox.

For photos, JPEG format is best.
6 days ago
I use macOS and I use virtual desktops (called Spaces) mostly for keeping some programs open in full-screen mode. Especially videos and IDEs.

With trackpads as input devices everywhere, it's a simple swipe gesture to swap between them.
6 days ago

Cody Biggs wrote:Yea they are shown by name, and the handlerecipe function uses index to tell what recipe was clicked on.

Index is a poor way to reference the recipes. Each recipe should have a unique id as part of its data and that's how we reference different recipe entities. But for now, lets stick with index, but be aware that's going to be a problem going forward.

When I say map I am referring to the map that shows my names as a list. If I’m not going to split the object then I need to do the same thing for ingredients/directions as I did for the names?

On a click, you set the selected recipe as selectedRecipe in state. That state property now points to everything you need to display the recipe.

If so can I do that in the same map?

Again, you are using the word map incorrectly. The result of using the .map() method (a verb, not a noun) is a list created from the source list. In this case, a list of names. Not a map. A list. A map (noun) is something else completely.

In the component to show the recipe, you would likely use the .map() method on the ingredient list to show each ingredient. Same with recipe directions. That's the conventional way to convert a list of data to display components. So you are on the right track there.

But look at this line:

toString()? Why? This the the big "what the..."!

You have the list of ingredients as an array. Use the .map() method to iterate over the array and display each one individually.

BUT before we go any further, do you really have all of this in one component?     

This should be broken down into many components: RecipeBox (your React app), RecipeList, RecipeListItem, Recipe, RecipeTitle, RecipeDirectionList, RecipeDirection, RecipeIngredientList, RecipeIngredient, and so on...

Cody Biggs wrote:I have two recipes objects already made.

OK, so you have two objects already in memory.

They are mapped and shown as li’s.

So, you display them as a list, probably just by name. Correct?

When clicked on they display the whole recipe

This should be simple. On the click, you figure out which recipe was clicked on and send it to a component to display it.

What's with all the strings and splits and other stuff? It's all completely unnecessary. You already have the list of ingredients in the ingredients property of the object.

I don’t know how to change my original map that maps out the recipe to include the ingredients/directions as li’s

You keep using the noun map  but I don't see any maps in your object shape. What are you referring to when you say "map". You are likely using the wrong term.

Cody Biggs wrote:Well in my thinking I need the string because you can’t split an object.

This makes no sense to me at all. Why do you need to split anything?

Explain where and how the objects get created in the first place.

Cody Biggs wrote:So the only thing I have experience/knowledge of is to turn the object into a string and split that. Which is why I’m trying to use that logic here.

Herein is the problem. Please explain why you turn objects into strings when what you need are the objects.
You have a fundamental data problem. It makes no sense to fine tune code until it is fixed.

Where is this comma-delimited string coming from? Why is it a comma-delimited string in the first place? Why is it not already a list?

But if there is no getting around getting it as a comma delimited string, you need to transform the unsuitably formatted data to a list as soon as you get it, before it ends up in the view.