Help with MIT assignment(languages: PHP, AJAX, JS, HTML, CSS)

christiandb · Dec 15, 2010

I've managed to fix everything, but I can't manage to let ajax call the remove line function (delete top item button). You can see the working here: TODO-list.

EDIT: don't say it can be done easier with only PHP etc, just try to fix it the way its scripted right now.

HTML:

Code:

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>TODO-list</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="todolist.css" type="text/css" rel="stylesheet" />
    <script src="http://www.st.ewi.tudelft.nl/~hidders/wdbt/scriptaculous/prototype.js" type="text/javascript"></script>
    <script src="http://www.st.ewi.tudelft.nl/~hidders/wdbt/scriptaculous/scriptaculous.js" type="text/javascript"></script>
    <script src="todolist.js" type="text/javascript"></script>
  </head>
  <body>
      <h1>To-DO List</h1>
      <div id="center">
      <form method="get" action="">
          <input type="text" id ="nieuwTodo" name="todo"/> <input type="button" name="add" value="Add to bottom" onclick="postToDo(); return false;"/> <input type="button" name="delete" value="Delete top item" onclick="delToDo(); return false;"/>
      </form>
      <fieldset>
          <legend>To-Do items:</legend>
                <ol id="list">
                </ol>
      </fieldset>
      </div>
      		<div id="w3c">
			<a href="http://validator.w3.org/check/referer">
				<img class="w3c" src="http://www.st.ewi.tudelft.nl/~hidders/wdbt/pract/images/w3c-xhtml.png" alt="Valid XHTML 1.1" /></a>

			<a href="http://jigsaw.w3.org/css-validator/check/referer">
				<img class="w3c" src="http://www.st.ewi.tudelft.nl/~hidders/wdbt/pract/images/w3c-css.png" alt="Valid CSS" /></a>

			<a href="https://webster.cs.washington.edu/jslint?referer">
				<img src="http://www.st.ewi.tudelft.nl/~hidders/wdbt/pract/images/jslint.png" alt="JavaScript Lint" /></a>
		</div>
  </body>
</html>

CSS:

Code:

body {
    font-family: sans-serif;
}
h1 {
    text-align: center;
}
fieldset {
    width: 500px;
}
input[type=button] {
    font-weight: bold;
    font-size: 14pt;
}
#center {
    margin-left:auto;
    margin-right:auto;
    width:500px;
}
#w3c {
    margin-top: 3em;
    text-align: right;
}

#w3c img {
    border: 0;
}
#todoitem:hover {
    color:#FF00FF
}

JS:

Code:

var WEB_APP = "todolist.php";   // URL of web app to contact

document.observe("dom:loaded", function() {
    loadFile();
});

function loadFile() {
    new Ajax.Request(WEB_APP, {
        method: "get",
        onSuccess: fillToDo,
        onFailure: ajaxFailure,
        onExeption: ajaxFailure
    });
}
function fillToDo(ajax){
    var Array = getToDoArray(ajax.responseText);
    for(i=0;i<Array.length;i++) {
        var s = '<li>' + Array[i] + '</li>\n';
        $("list").insert(s);
    }
    Sortable.create('list', {onUpdate:updateText});
}

function postToDo() {
    $("list").insert('<li>' + $('nieuwTodo').getValue() + '</li>\n');
    new Ajax.Request(WEB_APP, {
        method: "post",
        onSuccess: function() { },
        onFailure: ajaxFailure,
        onExeption: ajaxFailure,
        parameters: {todo : $('nieuwTodo').getValue()}
    });
    Sortable.create('list', {onUpdate:updateText});
}

function updateText() {
    new Ajax.Request(WEB_APP, {
        method: "post",
        onSuccess: function() { },
        onFailure: ajaxFailure,
        onExeption: ajaxFailure,
        parameters: {remove : blabla}
    });
}

function delToDo() {
    var Array = $$('#list li')
    for(i=0;i<1;i++) {
        Array[i].remove();
        $toremove = Array[i];
    }
    updateText();
}

function getToDoArray(todoString) {
    return todoString.strip().split("\n");
}

function ajaxFailure(ajax, exception) {
    alert("Error making Ajax request:" +
          "\n\nServer status:\n" + ajax.status + " " + ajax.statusText +
          "\n\nServer response text:\n" + ajax.responseText);
    if (exception) {
        throw exception;
    }
}

PHP:

Code:

<?php
// === Delay
if(isset($_GET['delay']))
	sleep($_GET['delay'] * 1000);

// === Handle actions
if($_SERVER['REQUEST_METHOD'] == "GET") {
	echo file_get_contents("file.txt");
	exit();
}
if($_SERVER['REQUEST_METHOD'] == "POST")
{
    if(isset($_POST['todo']))
    {
        echo file_put_contents("file.txt", file_get_contents("file.txt") .$_POST['todo'] . "\n");
        exit();
    }
    else
    {
        $files = file_get_contents("file.txt");
        $fp = fopen("file.txt", w);
        $lines = explode("\n", $files);
        unset($lines[0]);
        $b = array_values($lines);
        foreach($b as $item)
        {
            $string = $item . "\n";
            fwrite($fp, $string);
        }
    }        
}
?>

christiandb · Dec 16, 2010

PhoOwned · Dec 16, 2010

Did you check if it is PHP or AJAX bug?
If it's problem with PHP you can try to replace:

PHP:

    else
    {
        $files = file_get_contents("file.txt");
        $fp = fopen("file.txt", w);
        $lines = explode("\n", $files);
        unset($lines[0]);
        $b = array_values($lines);
        foreach($b as $item)
        {
            $string = $item . "\n";
            fwrite($fp, $string);
        }
    }

with:

PHP:

    else
    {
        $files = file_get_contents("file.txt");
        $lines = explode("\n", $files);
        unset($lines[0]);
        file_put_contents("file.txt", implode("\n", $lines))
    }

christiandb · Dec 16, 2010

The PHP code is correct, I tried to execute it seperately in a test file. It just doesn't call the code from the JS file.

christiandb · Dec 16, 2010

fixed it, can be closed

Help with MIT assignment(languages: PHP, AJAX, JS, HTML, CSS)

christiandb

Member

christiandb

Member

PhoOwned

^_^

christiandb

Member

christiandb

Member

Similar threads