Insert multimedia message to MySQL database using PHP and Javascript - 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.

Related

Permanently save ContentEditable changes made?

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.

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.

posting data that is not an input field or a form, looking for a way to submit calculated data

I have a web application that used textareas and buttons to gather data that is processed (calculations, filtering and concatenation into a string) into an array. The buttons and textareas are part of a form. This array can grow up to several hundred entries. This data is also displayed to the screen by setting innerhtml to a div, this data is highlighted at key points using with italic and color. I was using some Javascript to make a mailto link and write this to a div so that the user could email the data. The problem is that this mailto will only work if a mail client is set up on the machine, it will not work for a webmail system.
I have made a textarea in the form and using some javascript onsubmit() I write the array to this text area after joining the array together with \n , submit then posts the form to a PHP script on the server that then emails the data.
The text area is deliberately small as it has no use other than acting as a go between and I do not want it to take up space and be a distractionon an already cluttered screen.
Reading around it appears that should I have in an attempt to not pollute my screen display:none for this go between textarea that some browsers will not let this non displayed textarea be posted to the PHP script as part of the form.
Have I any other way of sending this array data to a PHP script?
I could make the textarea very small, have no border, background and text color the same white and tuck it away, make it read only but that seems very clunky.
I would appreciate suggestions. Many thanks.
You could use DOMDocument and get the relevant form elements, thus obtaining their values using node->nodeValue?

Javascript: Getting and saving text selection ranges in a database

I'm building a gramma-checker system for a client, where users can add comments/suggestions to a given text. When a user selects some text, a button appear to create a comment/suggestion to that given text selection. My problem comes when I want to save the text selection range in a database, along with the comment/suggestion.
I'm currently trying to solve the problem by using Rangy (http://rangy.googlecode.com/).
These are the ideas I'v tried so far:
Using the rangy serializer to serialize the range. The problem with
this approach is that the DOM is changing each time a new
comment/suggestion is added, and therfore not allowing for a
successful deserialization.
Using the rangy selection wrapper and save that directly in the
database, but like the idea above, the target elements content is
changing with each comment/suggestion, which again makes the approach
not work as intended.
Any suggestions to how I could solve this problem would be appriciated.
I haven't used rangy. But here is one way I would approach it.
Get a selected text from a element (tutorial here)
Then add a wrapper span with a specific id to it. (You might want to fetch a unique id from your server)
Then show a form to enter comments.
On Submit, send the span id and comment to server and store it in database.
When re rendering you can easily assign a class to this span to mark it and show comments on hover using css.
This will give you a system like google document where you can comment on text.
Let me know if that helps or you need more explanation on how to accomplish individual steps.
Advantage of this is you dont need to send the selected text back to server or worry about serializing. Just the id of span you wrapped it in.

How to prepopulate few fields in a form, in a survey

I have a share point survey. When we responding to the survey, as we know, it will open NewForm.aspx. this page contains a ListFormWebpart in which questions from survey list will be displayed.
Now, i need to add few labels before the questions and these label values should be prepopulated from query string. What i am trying to achieve from this is, i wll created a link
with some values in query string and send to specific users. different users might have different values in query string. Whenever they click on the link, it should open the survey with prepopulated label values along with questions in list.
I am not sure, how to do it. I have tried to add some html control to web part(using share point designer) and through JavaScript i have tried to set query string values. Then i tried to put asp controls and trued. it didn't work. I am trying since last 2 days. No progress. I am using SharePoint 2003, WSS2.0
Can anybody, please help me to implement this solution.
You may find it easier to create a webpart with a custom form that enters data into the survey list.
The survey lists are useful as they are quite flexible, but your solution will likely make it hard to change your list in future. That means that a webpart specific for this survey may be a valid design decision for you.
An issue with your current implementation is that passing values specific to different users through the query string does not give you any guarantee that enterprising users will not change those values.
This may not really be an issue depending on your situation, but a custom control will allow you to query the current user and make decisions that way.
I have written some Java Script for reading query string, parsing and assigning values to controls based on their ControlID. I have used Content Editor Web Part to add this JavaScript to the Existing Survey page. Then this script has done job of prepopulating the fields.

Categories