AJAX

Soldato
Joined
18 Apr 2004
Posts
2,613
Location
London
I am working on a php tagging thing and I wanted to get feedback on how well or not well written it is. Any obvious problems with the code?

Code:
CREATE TABLE `ajax` (
  `id` int(11) NOT NULL auto_increment,
  `time` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
  `message` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;

Live site

Code to download

Any and all feedback would be appreciated!!!
 
It should ideally 'degrade gracefully'. In other words, there should be a fallback mechanism in place should javascript not be enabled.

You should have regular links to remove a tag in your href attributes e.g. <a href="/removetag.php?id=22">[remove]</a>. Then with javascript you should replace the behaviour (capture the click event) of these links and do it asynchronously.

It would also be better to have cleaner markup, and not use inline event handlers i.e. no onclicks. Add the event with javascript (addEventListener()). Your javascript library should have a cross-browser function for adding events to elements.

For example, with mootools you can add an event to an element with:

Code:
$('a').addEvent('click', function(e) {
  new Event(e).stop(); // Stop the normal click event propagating
  do_this_instead(); // do this instead when the element is clicked on
});
 
Thanks for your reply! I have that working now for the add showTagger() and addTag() but for the removeTag(id) i dont know how I would go about registering an event across all the elements as they are added to and removed etc.. is there a way to say any thing with this class will send its id="" to the function removeTag(id) ????
 
  • Loop through the <a> elements
  • Grab the element's href attribute - prototype gives you element.readAttribute()
    Code:
    var href_val = element.readAttribute('href');
  • Get the id value of the querystring with http://www.prototypejs.org/api/string/toQueryParams
    Code:
    var params = href_val.toQueryParams();
    // params.id will be the id value
  • Attach the event to do stuff with the id value

Remember, when you add a tag, you will also need to add the remove event to the new tag at the same time. Because it will be a new element in the DOM, it won't have your remove event attached to it like the existing elements had when the page first loaded.
 
Back
Top Bottom