i'm working on an app that will have a listing of the data you've saved previously. if you have a typo, didn't enter all the data points originally, etc. you'll have the opportunity to edit the data chunk.
right now i have javascript getting the values of each element (that was created via foreach loop in php with data from the server) within a given chunk, saving it to an object and then replacing those elements (<p>) with textarea inputs then filling it with the data from the js object that grabbed it previously.
for one i'm having issues with escaping quotes from the dynamic content but also it feels like this may not be the most elegant solution.
in comes contenteditable.
basically: should i go that route and just make each of the elements in the data chunk contenteditable='true' on click of 'edit' button or is that too fishy with browser support?
is my current course a solid plan?
or is there a third (fourth, fifth, etc.) option?
thanks!
Unless you specifically need the user to edit HTML content (or do complex syntax hilighting etc), go with input/textarea solution. Much cleaner, much more lightweight and easier to do. Contenteditable gets complicated really quickly and using something like tinyMCE or similar would probably be an overkill.
If you've used JSfiddle, you know how well contentedible works. That's what they use. You can use a jQuery plugin for the syntax highlighting if you need it (Snippet, jquery-syntaxhighlighter).
Related
I have an about box on a profile page I'm working on (see below). Now that area shown by the textarea will have a PHP variable (about user column) produced in the space.
What I want to do is when a user clicks edit the paragraph content produced becomes an editable <textarea> which I can then save and it will write the new data to my PostGreSQL database and instantly show the new edit.
Basically I'm looking for a dynamically editable paragraph/textarea combo which will automatically update the database storing the original textual data in an about user column.
I have researched many JQuery examples like this on jsfiddle - http://jsfiddle.net/BenjaminRH/467S5/ but that doesn't have the database functionality I am looking for.
In essence, the HTML5 ContentEditable attribute could be perfect here.
This won't automatically update any databases, or anything for that matter, but nor will any other control that isn't some kind of composite made specifically for (and even genericised to handle) certain database types and scenarios and frameworks etc.
Therefore, in order to get this (a control that does it all) you're likely going to need to hunt down a third party product - there may be a free one (I've not seen one for the likes of PHP or ASP.NET or other major frameworks, and frankly I'm glad), or you may be stuck with having to buy one. As expected, I personally can't vouch for any, and wouldn't recommend such a plug n' play control anyway.
But, as per my first suggestion, there's half the task done - just write the code-behind in a reusable class and hook it up some how.
Okay. So I don't have any example code to show, but after doing a bit of research and learning the basics of PHP, I think the answer to my question should be pretty simple.
Here is the scenario, as I would like it to be:
On the homepage there will be several team names, with scores next to them. Like "house-points" in Harry Potter.
Below the score is a small text-field. Below that is a submit button.
The user will put a number in the text-field, press submit, and that number will be added to the team's total score.
NOW. I know how to achieve all of that with JavaScript. Easy. What I want to know IS:
How do I make that new number (the new score total) STAY there. I need to permanently alter the HTML when that submit button is pressed.
All I know is that I need to use PHP. I know the basics of PHP, so whatever the answer is, just throw it at me and I'll figure it out.
Sounds like what you want to do is submitting forms. First drop the JavaScript, you won't need it. What you need is to put your text fields in a form and when you submit you can fetch your values with $_<GET|POST|REQUEST>['<name_of_field>'].
Then you will need to store it somehow. The best way to do it is to use a database like MySQL or MongoDB to store it, but it could be a bit tricky if you are just learning this, so maybe you would like to stick to files. You could do this with INI files and PHP's INI functions.
Lastly you will need to print out the correct values to the website. Now this is easy: Just edit your HTML file to do something like
<?php echo $score['team1']; ?>
for each team after retrieving the correct values at the top or something. (Don't forget to rename the HTML file to .php as well).
Now you should be all set to save your scores. =)
If you mean really permanent you'll have to send it to a database via Ajax (combination of PHP and Javascript). OR write it to a text-document, which is less good.
I have a webpage that the user inputs data into a textarea and then process and display it with some javascript. For example if the user types:
_Hello_ *World* it would do something like:
<underline>Hello</underline> <b>World</b>
Or something like that, the details aren't important. Now the user can "save" the page to make it something like site.com/page#_Hello_%20*World* and share that link with others.
My question is: Is this the best way to do this? Is there a limit on a url that I should be worried about? Should I do something like what jsfiddle does?
I would prefer not to as the site would work offline if the full text would be in the hash, and as the nature of the site is to be used offline, the user would have to first cache the jsfiddle-like hash before they could use it.
What's the best way to do this?
EDIT: Ok the example I gave is nothing similar to what I'm actually doing. I'm not cloning markdown or using underline or b tags, just wanted to illustrate what I wanted
Instead of trying to save stuff in the URL, you should use the same approach that is common in pastebins: you store the data , can provide use with url, containing an unique string to identify stored document. Something like http://foo.bar/g4jg64
From URL you get state or identifiers, not the data.
URLs are typically limited to 2KB total, but there is no officially designated limit. It is browser-dependent.
Other than that, make sure you properly URL encode what you're putting up there, and you're fine... although I certainly would not want to deal with obnoxiously long URLs. I might suggest you also avoid tags such as <underline> and <b>, as they have been deprecated for a very, very long time.
Use javascript function:
encodeURIComponent('_Hello_ *World*');
I have an HTML table with contents, I would like to have an feature of Edit/Delete to that table. How do I do it with PHP?
I actually think that this sounds more like a job for JavaScript, which can edit/remove rows on-the-fly and with much less code. (Implement some AJAX too, and you can edit/remove rows in database too).
But if you insist on using PHP, you might just want to add some GET parameters to the Edit/Delete links that would delete or edit those rows.
Well, there is a pure PHP way to do it, and then there is a combination of Javascript and PHP. You must use PHP one way or another if you want your changes to the database to be permanent as that is your gateway to communicating with the database (as far as I know you cannot do that with Javascript as that is client-based and runs entirely in your web browser).
If using just PHP, you must generate HTML documents for each change. E.g., you click on one cell in the table and that gets you to a new HTML page where the field is editable through an input element; or you can list all fields at once for that row and edit them all at the same time. The fields are then posted in a form to a PHP page which will take the new values and update the database (or insert new values or however you wish it to behave). Here's a tutorial for how to do this:
http://www.freewebmasterhelp.com/tutorials/phpmysql/1
You can also mix in some Javascript which allows a more interactive interface to modifying the values in a cell. However, this obviously requires more code and may be overkill for what you're trying to do. Nonetheless, here is a link which demonstrates just that and also shows the code:
http://www.java2s.com/Code/JavaScript/GUI-Components/Editabletablecell.htm
Hope this is what you're looking for.
EDIT:
Forgot that you also wished to delete content in the table. That is also explained in the first link.
If you intend to work with databases, and it seems like you have little understanding of how they work, pick up a good book like: SQL - The Complete Reference. When you have enough knowledge of SQL, look at PHP's PDO extension: http://php.net/manual/en/book.pdo.php
I am recently working in a project. There I need to convert language from English to Japanese by button click event. The text is in a div. Like this:
"<div id="sampletext"> here is the text </div>"
"<div id="normaltext"> here is the text </div>"
The text is come from database. How can I convert this text easily?
Assuming that you have both the English and the Japanese version in the database, you can do two things:
Use AJAX to load the correct text from the database and replace the contents of the div. There are tons and tons of tutorials on the internet about AJAX content replacement.
Put both languages on the website and hide one using CSS display:none. Then use some JavaScript to hide/display the correct div when a button is clicked.
The first is technically more complex but keeps your page size small. The second one is very easy to do, but your page size is larger because you need to send both languages.
If the div is small and there is only one or two of these on the page, I recommend number two, the CSS technique. If the div is large (i.e. a complete article) or there are many of them then use the first method.
If you mean translating the text, you cannot do it easily. To get some idea of the best attempts that software can make at translating natural languages, go to Google Translate or Babelfish. It's not that good, but it's sometimes an intelligible starting point.
If you just mean setting the language attribute on an element, then assign a new language code to the lang property of the div element object.
document.getElementById("normaltext").lang = "en-US";
I don't know the language code for Japanese; possibly ja-ja.
Assuming your literals have an id in your database you could put that id as a class in your div. Then with jquery fetch the ID, send it to your Ajax back-end and fetch the translated one.
First, if you have the texts in a database it really doesn't matter if you render it in divs, tables or whatever.
First you need a php api for some translation service. Here is just an example that might give you some ideas.
$textArray = getTextForThisPage();
?>
...
english_to_japanese($textArray["text1"]);?>
...