I am trying to figure out a sort of “best practice” when it comes to loading forms in to pages.
At the moment there is no code to show as this is still in the planning stage.
The current situation is that i have a post which the url to it is for example: website.com/post/1231(the post id)
What i want to do is to add an edit button to the post that when clicking on it, it will replace the post with a form used for editing posts. The form will have the data of the post already filled in, and the user only has to edit the inputs and click on save, this will switch the form with the updated post output (the way the page started).
I have read as much as i could find, and it seems that most people think that html should not be loaded with ajax but rather with JSON, and the other portion say its perfectly fine to load html.
If i load the forms html with ajax, that would be the simplest and easiest option as far as i can think of, i just send the post id with the ajax request, the file itself would populate the form inputs, and the ajax would just get the contents and insert it all in to an element on the page.
If i chose the JSON route, i’m not sure how this would be done. It seems like i would have to create each input and the whole HTML through JavaScript which seems a bit much and not very efficient.
Another option is to have the form already in the document, just hidden, and when the user clicks on the edit button, the post output will be hidden and the post form will be shown, but this too means that the post output needs to be updated with the new data inserted in to the post form.
Any ideas on which way is more efficient? Another question is how do sites like this one and stack overall work? As far as i can see, they don’t have a hidden form ready in the document.
Start with doing that button push to form entry without JavaScript. Not only will that protect your users from when JavaScript doesn’t work for them, but you will have a good and reliable structure on which to build the JavaScript to improve on this from there.
The whole app is actually built to work without any javascript at all.
I always build what ever the system/section is to work without javascript, in this case the posts system, and once it all works without javascript, i implement javascript and ajax.
So now im at the point where i need to implement the ajax and am trying ot figure out how to load the form, or at least what the best way to handle this is.
… I dont know where you’ve been reading, but JSON doesnt load anything. It’s an object notation (the ON in JSON. No prizes for guessing what the JS stands for.), it can’t DO anything itself.
AJAX is used to make a request to another web resource.
You’ve already got the form, you said so yourself. Don’t reinvent the wheel.
Right, so lets break that down.
What i want to do is to add an edit button to the post
Well, i’m fairly sure you’ve got the HTML skills to add a button to a form.
it will replace the post with a form used for editing posts
Right, and you’ve tagged this thread with jquery, so: Select the element that contains the post. Hide it. Insert at that point an HTML element that contains your editing form.
The form will have the data of the post already filled in
So, select the editing form’s fields, and insert the values from the element you hid a moment ago.
Click on save, this will switch the form with the updated post output
So you wait for the user to fire a click event attached to the save button, that changes the values of the element you hid (and presumably fires an AJAX off to your database to update the post’s data…) , then does the opposite of what the edit button did: Destroy the form element, unhide the post element.
Which of these parts are you struggling with, and what have you attempted so far?
What i mean is that most people/articles that i have read are against the idea of loading HTML through ajax, instead, they say to load JSON with ajax.
I have the form working, the edit form, i have everything working, my question is not about how to code the form and the javascript, but rather, what is the actual best practice for doing this kind of process.
To be clear, i hope its clear, i want to know if which option would be considered the better option for what i wrote above:
a. Load JSON with ajax, and inject the JSON data in to a hidden form that will be unhidden when the user clicks on edit (seems like a lot of work to populate the form with all of the data using javascript)
b. Load the JSON data into javascript created elements (basically creating a form with javascript and putting the JSON data in to it)
c. Have the form in the document, with the data laready ready inside of it, and when the user clicks edit, the post view will be hidden, and the edit form will be shown.
So again, i know how forms work, how html works, javascript, ajax, and json, my question is what is the best route for doing what i am trying to do.
I’m feeling a bit off ATM, please forgive me if this is incorrect, my understanding is
there is an HTML form
upon an “edit” click event, display of the form will change (a type of edit box will appear)
the question is how to go about it
Like Paul, I prefer to start with a minimal working solution then add improvements. In other words.
There’s a page with text content and an “edit” (button, icon, etc.)
A user initiated event triggers an HTTP request.
The server responds with a new / differently displayed page containing the text content in an edit box.
Presumably the text content is coming from and is being saved in a database.
After I felt comfortable that the HTML was valid and the database queries worked as expected, I would then start making improvements.
I could write JavaScript that would “preventDefault” the submit, have AJAX make the HTTP request, and then use the response to change the page’s display.
The question is how much and in what ways should that change depend on JavaScript?
I would be tempted to have all possibly required page elements in the HTML from the start, use CSS to “display: none” the edit box until needed, and use AJAX to work with JSON in the response.
I would most likely not have script that created DOM elements nor have JSON that included HTML elements.
I say “tempted”, “most likely”, because it depends on the specific situation. The main point is to make sure the process works without any JavaScript just in case.
Right, so i have a page at website.com/post/23 for example.
“23” is the post id, this page will simply output the post title, and the posts content.
There will be an edit button on the page that when clicking on it, if there is no JavaScript, will send to a page that will have a form filled with the post content, this form is used for editing the post.
Submitting the form already works with ajax and JSON, that’s fine, i am now only referring to switching the post “view” with the post form.
That’s actually what i have, i built it all to work without JavaScript, now i an improving it as you say, and want to make it work with JavaScript, specifically, to show the form when the user clicks the edit button, but without loading the page, and when the user clicks save, to show the post “view” again with the updated data.
From what i understand, you’re recommending to (if it fits the situation) have the form already on the page, and when a user clicks on the edit button, the form will be shown and the post “view” will be hidden?
Good work. Focusing on the separate page that the button takes you to so that you can fill in the form, it’s helpful if that form is in a separate file. That way the page can get the form from that separate file, and also the ajax request can get the form from that same location too.
If you’re ever tempted to hide HTML elements, it’s best to consider what happens when scripting is not available. Those hidden elements are then never able to be seen. Better solutions exist where the elements start off as being visible, and then scripting is used to initially hide them and reveal them. That way they act like an escalator, that ends up still being usable as stairs when it breaks.
I must find out if we have good examples in regard to this.