How to use javascript to edit HTML content? - javascript

I have a section in my website where a user can type an answer to a Question. For example the questions states:
Movie I have watched the most times:
Answer: Wedding Crashers
I have an edit button next to the question. When the user clicks on the edit button I want the website to open up a text-box with Wedding Crashers in it in the same place as the original answer box. The user can edit the answer and change it to another movie. There should be a save and cancel button below the text-box. Once the user changes the answer from Wedding Crashers to another movie and clicks save, the text-box disappears and the new answer is displayed on the website. For now I only want to be able to edit the hard-coated HTML content. I will connect to a database later and put a query to update the users database as per his/her answer. I think it is something to do with javascript and the CSS properties of display:block and display:hide. Can anybody help?

Seeing you other question relate to Rails, you can use an edit-in-place solution such as
https://github.com/bernat/best_in_place
is that what you need?

Whoa! Clicking edit button sounds like 1999 for me ...
Did You consider using plain text input (with proper styling, no border etc.) that will appear as editable on hover/focus? You still need a bit of javascript to send a request on enter (AJAX for better UX or normal POST when js is disabled) and remove focus from the field. I do it this way at my work. It works really well.

you can use something like this:
document.getElementById('someid').innerHTML = 'Fred Flinstone';
and for changing CSS properties:
document.getElementById('someid').style.borderWidth = '4px';

Is the textbox absolutely necessary?
You can use the wonder of HTML5 (http://html5demos.com/contenteditable) for browsers that support it.

Related

PDFTron WebViewer - Is there a way to replace the reply box with comment box?

In the PDFTron WebViewer, when clicking the Comment tool in the header and then clicking on the PDF being viewed, the Reply box pops up in the left panel:
If you click on the 3 dots next to the timestamp and then Click "Edit":
You get the Comment box:
Is there a way to have the Comment box show up by default (instead of the Reply box), and have the Reply box permanently hidden?
Looking through the PDFTron WebViewer documentation, I did not find a good way to have the Comment box always show up. The only approach I've found so far is to tack on some JavaScript that appends HTML to the DOM as soon as the left panel comes into view, but this doesn't seem to be too reliable. Perhaps there is some configuration option for this? I had a look at this page: https://www.pdftron.com/documentation/web/guides/hiding-elements but the Reply box does not have a data-element attribute, so it seems you can't hide it in this way.
Also, the Reply box and the Comment box seem to differ slightly in how they send annotations back to the server, so simply editing the text of the Reply box and button to say "Comment" instead doesn't seem like an option.
In the new version of PDFTron WebViewer 6.0, we actually improved this behaviour.
If you add the comment, you are automatically taken to the comment.
Adding Comment
The second action, after completing the comment is reply.
Adding Reply
If you are not the author, the only option is to reply.
You can download the latest from here: https://www.pdftron.com/documentation/web/download/web 6.0 and up.
If you ever want to take a look at the UI code, and modify, we open source the UI here: https://github.com/PDFTron/webviewer-ui.

Is it possible to "pseudo fulfill" the LinkedIn add to profile button?

It seems LinkedIn has changed the previous autofulfill button.
https://addtoprofile.linkedin.com/
My question is. Is it possible, with JavaScript or somehow to fill the form fields with the information so the user can check the info and make the final click?
In my case, I need to add certifications.

Editing Wordpress Template

I have a site for which I use Wordpress. We have a debate group in our class. So the template I use has a feature so that non-members can also post comments with email and name.
I wanted to change that setting but am unable to do it.
Kindly suggest a solution.
If you want only registered and logged in user can comment. It's inside Settings->Discussion there is a checkbox as shown in screenshot. Put a check mark in the box and click Save Changes at the bottom of page. Done.

Saving information of a control in javascript app data

I'll try and ask this as accurate as possible as I don't exactly understand my assignment.
Basically we had to create 3 HTML controls or JS controls and for each control we had to add an event handler that'd read something from a control and show it in a DIV.
Now my question is, how can I save the information shown in that DIV. I really don't understand how to do this. To be more specific, when I close the Build and re-open it after typing something in a textbox that would for example then give me the info from the textbox in a DIV, i'd want to see the same information I typed earlier in the Div again.
Thanks in advance!

JQuery / Javascript popup box and form submission creation

I have a jquery/javascript question. For a site I am working on in PHP/JQuery I have the need to create a dialogue box with an ok/cancel button and a message and then submit a form based on if the user says ok or not. I know in javascript I can create a new window that links to a styled page and then I can do a select for if the user hits the ok button and submit the windows parent form using that but the last time I coded something similar to it I felt like it took a lot of lines of code and was wondering if JQuery supported dialogue box creation and if I could do some similar functionality using it (with hopefully less lines of code since everytime I use jquery instead of standard javascript it seems like it really reduces my codebase). If anyone knows of a resource to learn how to do this I would appreciate a link or a second of your time for some pointers.
Thanks!
I think you are looking for something along the lines of the jquery ui dialog.

Categories