Permanently save ContentEditable changes made? - javascript

The title probably isn't great but there isn't an easy way to explain what I am trying to do.
I have a div with Content editable enabled. I want to make is so that any text written will be saved. I don't want to use localStorage but want to just directly save the text in the html file. I'm not sure if this is possible and I have looked for anything similar and wasn't able to find anything.

No: it is not possible to edit the files you serve to users using only front-end specific technologies. It would be very dangerous.
However, you could trigger an event on text modification and then send changes information to you back-end. There you would have to do some logic to ensure next loading will contain the data changed by your user.

Related

How do I make specific inputs go into another .html file in the project?

I wanted to make specific inputs go into another part of a site (e.g. https://myexamplesite.com/anotherpartofit.html)
And also make those specific inputs be the ones that someone saved it in.
An example of what I think would work is: Get value from input 1 from /apartofit.html and put it in input 2 at /anotherpartofit.html and make it non-editable
If it needs to use a database, I would prefer if you could help me with firebase (Google's Database). But in my knowlege, it probably needs to use javascript, so I'll be tagging it, if it doesn't, let me know!
in visual studio or notepad or every offline web creating spaces you can't but if you buy a domain or simple , online site , you have to crate a page and get the link of that page then open another page create a button set the button's href to link of pervious page finally hit the button !

How to make an interactive website and allow the user to edit website content?

To begin with, I'm fairly knowledgeable with both html5 and css3. Right now I'm trying to create a website that allows visitors to edit website content so that all visitors are able to see the edits. I know about contenteditable but this attribute does not last when the page is refreshed and no other visitors to see the edits. For example:
<p> Edit me please </p>
A visitor would be able to edit the element above by visiting the website and simply selecting and typing. Also I have heard that javascript, jquery, sql, and php can all allow visitors to edit website content but I don't know which is the best.
To sum up, if anyone knows how to allow visitors of a website to edit its' content it would be much appreciated to share their knowledge.
Create a database table (lets call it "strings") , and just define 2 columns - "string_identifier" and "string_value"
When you render the page, simply query the database to fetch the strings and their identifiers. Each editable element should have an attribute containing its identifier.
You can use jquery to capture the click event on all editable elements, and replace it with an input with that text.
Then assign an event handler to that input, so when the enter key is pressed, it sends a request to a php script (with the identifier and new string as data) on the server to update the database with the new string.
If you would like live updates to all other clients (no need to refresh), use jquery to continuously request a file on the server (endless loop), which will return a JSON object containing all the strings. Then go through and replace the text of all editable elements on the data with the new strings you have received from the server.

Insert multimedia message to MySQL database using PHP and Javascript

I was working on a website for which I was designing the conversation system (Post, comment, like, etc.) like what all social networking sites have.
I am trying to provide option for inserting smileys along with the normal text content in a textarea.
My Questions
How do I add images like smileys in a textarea (which accepts only text by default) as and when user selects one from the list or puts in the symbol
Once I have the textarea with smileys and normal text, what is the best way to store it in the MySQL database
When displaying the message with smileys, what is the best way to parse the message from the database
NOTE
I am aware of developing a conversation system with just plain text and files. I am just not sure how to add,store,display smileys.
I am already aware of plugins like Tinymce: http://www.tinymce.com/tryit/basic.php
But I want to know how to make my own.
textarea can't be used to display images,use a contenteditable div instead.
As for the backend,store data in the database regularly (ex: Store :) directly)
and maintain a common table/array where you replace these text with the image/smiley each time you display the data.
Wouldn't having some kind of inline notation help here? You could have something like [::smiley-XXX::] where that represents a particular smile. So long as it's something users are unlikely to type by accident it'll be fine.
Then you need a way of converting that from text into HTML, where you inline the appropriate image.

How can I make modifications to an HTML form that is automatically generated?

I'm creating a webform using a marketing automation platform. I want to add a field that functions with jquery to do an autocomplete. Unfortunately, the forms are generated through a WYSIWYG editor in the software, and then generated and put into the page when it renders. The only code for the form that appears in the HTML for the page is a simple variable placeholder - %%FORM::DEFINITION%% - which is then replaced with the form code when you visit the URL. The software support team tells me that making the change I want to make is impossible, which I see as a challenge.
The only thing I need to be able to do is add an id="autocomplete-dynamic" attribute to the input on the form. I had two ideas how I could achieve this.
The first, and most preferable option, would be some script that runs at the bottom of the page that simply inserts the attribute into the input tag after the page renders out. This would only be a client-side change, but since all this does is make the text field capable of looking up values out of another table, it should be fine. If someone had a script blocker in place, they would not be prevented from typing into the text field normally, it's just that the auto-lookup wouldn't work. We're trying to make it easier to select an item from a list of thousands of possibilities, but if someone had to type in their own entry without the autocomplete, it would not be a disaster. This seems like a clean solution, but I am not sure if it can be done.
The other possibility is to get the form code out of the software and embed it in a separate HTML document, and make the change there. You can extract the raw HTML for the form for use on another page, but pasting this code right back into the landing page causes errors. So, the thought then was that if I have taken the code generated by the software and put it in an HTML page on a separate web server, I could modify it as needed, and then turn around and use an iframe to stick it right back in the landing page. The software shouldn't complain because the form is being used on an external site like it's supposed to be... I have just hidden that external site back inside the platform-hosted page.
Option 1 would still be much easier to implement, I think, provided it is actually possible.
Thanks in advance.
Your first solution seems completely appropriate.
$(function() {
$('#myForm input').attr('id', 'autocomplete-dynamic');
});
This can be added anywhere inside a script tag because it's wrapped in a shorthand document.ready function, which waits to run until the DOM is ready.

How to identify source of data field being updated on web page

I am trying save data from a web site. There are fields in the html that look like this
<td class="data-value" id="v0">yellow</td>
where the text yellow changes as the user moves the mouse on the page. (To be clear, these fields do not appear in the source if I just do "view-source", but if I use Chrome Develpment Tools and do "inspect element" I can see this.)
I want to find and save the source of this text, which I'm pretty sure is coming from JSON somehow, but I'm not that familiar with Ajax and other tools that the site appears to be using.
So, is there a way to identify where this text is coming from and access it? In other words, I'd like to be able to parse the HTML, and identify what call to make to just see the JSON that is populating this text.
The text may be remotely generated, in which case you will have to simulate the same AJAX requests to access all of the cases.
If the text is stored locally (Javascript), you can access it via events. The first step would be to identify the type of event. Is it a onmouseover or onmousemove? What is the event callback attached to? The page, or the elements being "overed"?
After identifying those criteria with a debugger, you will be able to search the html and javascript references for where these events are being attached in code. That will lead you to a callback function (the one making the decision of which text to post). This callback may perform AJAX, it could have a local table, or it could be a different callback for each element. Any way you go, at that point you will know which file to have your script look at to parse out the data you're looking for.

Categories