View Demo»
To Do List
- Create a dummy file with content
- Read the file and print the contents to be edited
- When the user clicks on the content, place a text area on top of that with the contents inside so that the user can edit it
- Repeat the previous step for every contents that could be editable
- Have a button at the bottom initially disabled which will use "ajax" for updating the contents
- The Edit or save button should be enabled whenever the user makes any changes to the contents and become disabled after successfully updating the changed contents
Journal
Monday, May 1, 2006 - Create, read and print file contents
Just to keep things simple, I'll be reading and writing to a file instead of using a database for the contents. The technique is same. There'll be separate files which will make up the contents such as Title, short description / objective (for resume), first paragraph, 2nd paragraph etc. All of these could be in the same file, but I don't want to do any parsing to find out which part is the title and which part is the objective and so on. That's not the main point of this project. If using a database, these contents could be in a table. Anyways... let's get started
Time: 15 min
Everything went smoothly. No problem yet. great start although I was distracted by Google Base service while looking for dummy contents. Didn't know about Google Base before. Pretty neat. Who knows what's the next service they are gonna offer
Monday, May 1, 2006 - Add basic JS
While printing the contents of the files, I need to add javascript event handler so that when the user clicks on the content, a text area shows up in that place allowing the user edit the text. Simply add onclick event on the tags that are holding the file contents and then using javascript find where this clicked object is located and how big it is. Then place a text area at the same place with same size and the contents within it.
Time: about 2 hours
For the first time ever, things changed. Everything works just fine the way I wanted in IE, but not in Firefox. It also works 100% in Opera 9. The problem is that when the textarea is added, it doesn't show up at the proper place even though I have used css position: absolute. Secondly, the width and the height of the textarea is also not working in Firefox.
Hahaha... while writing this feedback, I wanted to check the dom for the style of the textarea that was created dynamically using javascript. It appeared that, the height, width, and the location didn't get any value passed in. Then I realized that when setting those values, I only set the integer, so, I added the string "px" at the end. Now everything works just fine. This small thing wasted two hours or else it would've been done by 30 min. Well... here's the lesson, if setting up style of any element through javascript then don't forget to put the unit after the integer value. Or else it won't work in Firefox. Gotta go sleep now.
Tuesday, May 2, 2006 - Hide and Seek
The way things are working right now is that, whichever paragraph or heading is clicked, a text area appears at that place with the contents inside so that the user can edit it. But the text area should disappear whenever another paragraph is clicked and appear in that one, instead of having textarea showd up in both places. Also, placing text area is on top of the paragraph is not enough. The paragraph should be hidden because right now, even though the text area is on top of the paragraph, the click event still kicks in when the user clicks on anywhere within the text area and thus the text appears twice in the text area.
Time: 30 min.
Sweet... I thought this would take a while, but appearantly, everything went smootly. The only problem is that if I edit the content, it's not being saved for some reason. I'm sure there's a minor mistake somewhere. And once again, surprisingly this works just fine in IE but not in firefox. But this time it works ONLY in IE. Even Opera is acting like firefox, so that could be a bug in IE.
hmm..., just like before, while writing this feedback, I fixed the problem. What's goin on here? Anyways... The problem was that I was using the textarea's innerHTML to save the contents. But it appears that in firefox and opera, innerHTML is always the default value that the textarea started with. So, I used textareaObject.value, which contains the typed contents. And this works in IE as well. However a new layout problem appeared now. If the presently typed content is shorter than the old value then the layout gets cluttered, but it changes fine if clicked on it later again. Also, I need to set some value for the textarea so that if editing content was one line only and the user is typing more content, then the textarea should expand vertically instead of keep typing in one line. Looks like this project will work out fine. Gotta get ready for class. later...
Tuesday, May 2, 2006 - Hide and Seek II
As mentioned in the previous post, one of the problem that still hasn't been fixed was that when the textarea loses focus, then it should disappear and save the content. Off the top of my head, I remember an event called onFocus for html elements. Let's see how this can be solved. I might have to do some research
Time: 2 hours
Couldn't solve the problem. The event is called onBlur, but the problem was how to add it dynamically when the textarea is being created. I had this problem of dyanmically adding event when I was working on tabBrowser project, but there I solved it by using innerHTML trick. In other words, wherever the element is supposed to be, add innerHTML with that element... But I want to do it by using createElement method. I submitted my problem to a forum, hopefully I'll get some help from there. But it appears that I have to move on to the next step even if I can't fix it.
Ok, this is really getting creepy. For the third time in a row, I fixed my problem while writing the feedback. This doesn't make any sense. I checked the forum to see if anyone replied to my post, but someone else was having a similar problem and I tried the suggestion from that post. I already tried it that way at the beginning but I just had the wrong syntax. Here's the code I had to use:
editContent.onblur = function() { return lostFocus(this) } ;
Sunday, May 7, 2006 - Save Contents
Today I'll be working on saving the contents to the file. This would be normal php file that will take the filename and the contents, which will then be written to that file. This php file then will be connected to via ajax from the main page to save the contents. But right now, I'll just make the php file that will be saving the actual files.
Time: 30 min
The php file to write the data to a file is done. I didn't test because I didn't wanna make another script to test it since I have to create ajax to test it anyways. But I'm pretty sure it'll work.
Sunday, May 7, 2006 - Create AJAX
Now, I will creat the ajax component to connect to the php file that was made earlier and post the data to it so that that file can write the data to appropriate file and thus save the contents.
Time: 2 hours
Well... I have all the functions done, but for some reason, the data are not being sent to the server. I just don't know why. The code looks alright. I took the mozilla tutorial and modified it to break it down into smaller functions. I know if I do everything in one function then it'll work, but I don't wanna do it that way. May be I'll do it if I can't solve it so that I can at least finish this project. I posted my problem to webdeveloper.com forum. Let's see if anyone can pinpoint the problem.
Tuesday, May 9, 2006 - Fix AJAX problem
In the previous post I mentioned that I was having problem with the ajax sending data to the server. I posted my problem in a forum and I just got the reply and guess what the problem was. I just misspelled the veriable name when I was calling a function. I'm really pissed off right now. Such a simple mistake wasted 1 hour.
Time: 5 min
Well.... the major part of the project is done. When the save button is clicked, it sends the information to the server using ajax and saves the contents. Now it's about making it look pretty and fixing some small problem with the textarea. I will describe those later when I work on it.
Tuesday, May 9, 2006 - Sexify Output
Well..., the ajax thing is working fine although I didn't check it on IE yet. I'll check it right now. brb.... yeap, it works. I will just work on making the ajax output a little nicer. Right now the 'saveFile.php', which we connect to via ajax and send data to save to a file, prints everything as a separate html file. But since, I'm getting the output through ajax, I don't need to have <html>, <head> and these kinda tags in that page. Although I could leave it in there to make this javascript degradable, and after getting the output as xml format, I could easily take the nodes that I need, but I won't go for it. Also, I'll need to work on the css to make the output a little nicer looking. I'll have the output in a box model, which will rise from the bottom right hand corner and after 1/2 min. it will go down again. Something tells me, this will take a while to finish. Oh well... the major parts are done anyways...
Time: 3 hours
Yea, just like I expected. It took too long. I didn't time it properly, but that was just a rough estimate. I was talking to my "colorcoded" pals over msn while working on this, so that was kinda distracting. Also, I was having trouble placing the div at the bottom right corner of the window since there's no way of doing it through css unless the <body> takes 100% width of the window. Also, the value of window's width and height is retrieved differently in IE and FF. So, that was another place where I had to spend some time. Anyways... it's working now. All that is left right now, is to show the same format in the textarea as the content that is being edited. I'll probably skip this one. But the ones that has to be done is:
- disable the save button, after the contents have been saved through ajax
- remove the textarea and save the contents temporarily
- activate the cancel button so that when it is clicked, all changes will be undone. and disable the save button again
- fix the textarea's onchange and onfocus functionalities.
Monday, July 17, 2006 - Visual Effects for editable region
Haven't worked on this for a long time. Anyways... what I plan to do now is to show some visual effects when the user moves mouse pointer over the editable region. This way, if the user hovers on the editable text, they'll get the feeling that this area can be edited by just clicking on it.
Time: 1 hour
This should not have taken 1 hour at all. It was mainly about CSS. First I added a line of javascript expression so that the class name of the paragraphs change according to mouse over or mouse out. The rest was just a few lines of CSS that simply adds a border around the paragraph or removes the border when user moves mouse pointer away from the text. Very simple thing to do. But for some reason, IE was acting wired. For the paragraph, it was only adding the border to the first character of the paragraph where as firefox was working fine by adding border around the entire paragraph. I don't know why this was happening. Didn't do anything special either. This is extremely simple css; the paragraph has a class name and the css just adds a border around the paragraph. Anyways.... I fixed it by using p.className{...} in the css instead of just saying .className{...}
Now I'll be working on the lost focus function that I left uncompleted before. Without this function, the textare will stay on the page even when the user clicks outside of the editable region after editing the contents and saving the contents. So, now this function will remove the textarea from the page if the user clicks outside of editable region.
Time: 15 mins.
Interestingly this one didn't take much time to finish. I remember trying to finish it before but had some problems, which is why I left it uncompleted. Anyways... it's working now.
