in place edits and sortables stop working

[gesmith1031]

Background:I'm working on a simple todo/project list using prototype.js and the scriptaculous library. I'm using PHP as my server side scripting language and mysql as the back end.

I've almost got everything working, drag and drop, entering new task items via Ajax.Request, and edit-it-place. The problem is that whenever I delete a record or add a new entry my edit-in-place and sortable stop working. I'm fairly sure that the problem is how I'm showing the updated data after server has completed the operation with my php script. If anyone could point me where I'm wrong in my thinking I'd be greatly appreciative:

Here is the javascript for sending new records to the server

//ajax for entering new notes entry
function createProject(proj_desc, proj_title) {
 var pars = 'proj_title=' + $(proj_title).value + '&proj_desc=' + $(proj_desc).value;
 var myAjax = new Ajax.Request('process.php', {
 method: 'post',
 parameters: pars,
 onComplete: showProjectResponse
 });
 $(proj_desc).value = "";
 $(proj_title).value = "";
 $(proj_title).focus();
}

Relevant code from class in process.php

function procCreateProject() {
 global $database, $session, $projects, $form;
 //get/set vars
 $proj_title = $_POST['proj_title'];
 $proj_desc = $_POST['proj_desc'];
 $username = $session->username;
 $start_date = time();
 $return_msg = ""; //initialize return var
 //Make sure title is not blank
 $field = "test";
 if(!$proj_title ¦¦ strlen($proj_title = trim($proj_title)) == 0 ¦¦ $proj_title === ""){
 $return_msg .= "<div id='error'><p><font size=\"2\" color=\"#ff0000\">* ATTENTION: Please "
 ."enter a title for your project.</font></p></div>";
 echo $return_msg;
 exit;
 }
 //Return if form errors exist
 if($form->num_errors > 0){
 return false;
 }
 //add record into db
 $q = "INSERT INTO projects (project_title, project_desc, username, start_date, bool_active) VALUES "
 ."('$proj_title', '$proj_desc', '$username', '$start_date', 'y')";
 mysql_query($q, $database->connection) or die(mysql_error());
 echo $projects->currentProjects();
 }

Relevant code from project.class. I think this is probably the problem. I fresh the entire task list instead of the new task only. I'm to brain dead to figure out how to find a good way of doing this.

function currentProjects() {
 global $database, $session;
 $q = "SELECT * FROM projects ORDER By sort_id,lower(project_id)";
 $result = mysql_query($q);
 $return_var = "<ul class='project_list' id='ul_project_parent'>";
 while($row = mysql_fetch_assoc($result)) {
 $return_var .= '<li id="project_'.$row['project_id'].'">';
 $return_var .= "<a onclick=\"if (confirm('Are you sure you want to "
 ."delete this todo item?')) { projectDelete(".$row['project_id']
 ."); }\" >";
 $return_var .= '<img src="images/delete_me.gif" alt="delete" '
 .'class="delete_me" id="img_'.$row['project_id']
 .'"/></a><input type="checkbox" /> <strong>'.$row['project_title'].'</strong>';
 if(!$row['project_desc'] == "") {
 $return_var .= " - ".$row['project_desc']."</li>";
 }
 }
 $return_var .= "</ul>";
 echo $return_var;
 }

[gesmith1031]

I fixed most of my problems by reading and practicing up on DOM. I'm new to javascript and have a bit of learning to do.

I am still having problems with my sortable list though. Here is what I'm currently doing:

1. create a sortable list when the page loads.
2. I then add a new record to that list and have it inserted into the web page via javascript/DOM from the server's response.
3. All the items in my list that were setup to be sortable when the page loaded are still sortable. However any new item in my list are not.

How does one go about fixing this? Am I taking the wrong approach?

[daveVk]

You need a tool to look at the generated source, the difference between the original and inserted list entries will hopefully become obvious. Firefox with programmers toolkit, or DOM inspector in the new IE maybe.

[gesmith1031]

Man I can't believe I finally got this working right. I needed to have scriptaculous's sortable.create use the containment option like so after I added my new record to the page:

Sortable.create( 'ul_project_parent',{ onUpdate: updateOrder, containment: ['ul_project_parent'] });

[geofflee]

On a slightly unrelated topic, I hope project.class isn't a PHP file that is accessible from the web. Otherwise, if somebody could guess that filename, they'd be able to see all of its contents and gain a lot of dangerous information.

[gesmith1031]

@geofflee

No it's not public. Care to elaborate? I am learning and would appreciate any advice.

[gesmith1031]

Since I can't get a response from geofflee I was wondering if anyone else knows what I'm doing wrong in the above code that would make the site insecure if it was public and assuming his remark is correct.

Here's is what I think I could have done wrong. First, I'm trying hard to break the whole procedural mind set that I'm used in my past scripts. I'm a networking guy who writes scripts to save time an not a programmer. This said I think maybe I probably shouldn't have my classes echoing anything directly? Or is it that I'm having it echo and setting other declared classes as global? If someone can at least point me to the path of secure coding I'd be grateful.

Regardless, I have come to realize that even though I'm using the syntax for oop that php provides I'm have still used it in a very procedural way. It's more like I'm using classes for the sake of holding functions only. :P