Poelsnip
Gevestigd lid
- Lid geworden
- 24 sep 2013
- Berichten
- 483
- Waarderingsscore
- 0
Ik ben bezig met een tamelijk simpele agenda/todolijst in php+sqlite. Werkt allemaal prima... toevoegen, aanpassen, verwijderen.
Nu wil het zo maken dat je op een datumveld of omschijving klikt en de aanpassing dan via ajax aangepast wordt. Er is genoeg te vinden op het internet alleen blijken de meeste gebruik te maken van jquery en ik wil het in plain javascript voor elkaar zien te krijgen.
Met ajax heb ik niet veel gedaan, af en toe wat code knippen en plakken om divs te vernieuwen.
Mijn idee is het het ongeveer zoals onderstaande structuur moet worden. Misschien kan iemand me een duw in de juiste richting geven.
page.php:
actions.php
function.js
---------- Bericht toegevoegd op 22:23 ---------- Vorige bericht was op 22:52 ----------
Nou, ik ben al een stuk opgeschoten. Ik heb een werkend systeem met mysql.
Nu nog omzetten naar sqlite en dan uitpuzzelen hoe dit slim te verwerken is in een lijst met todo's.
Nu wil het zo maken dat je op een datumveld of omschijving klikt en de aanpassing dan via ajax aangepast wordt. Er is genoeg te vinden op het internet alleen blijken de meeste gebruik te maken van jquery en ik wil het in plain javascript voor elkaar zien te krijgen.
Met ajax heb ik niet veel gedaan, af en toe wat code knippen en plakken om divs te vernieuwen.
Mijn idee is het het ongeveer zoals onderstaande structuur moet worden. Misschien kan iemand me een duw in de juiste richting geven.
page.php:
Code:
<table>
...
<tr class="today">
<td id="dateid-72" name="dateid-72" contentEditable="true" onblur="doDate(72)">20 Apr 2014</td>
<td id="timeid-72" name="timeid-72" contentEditable="true" onblur="doTime(72)">00:00</td>
<td id="taskid-72" name="taskid-72" contentEditable="true" onblur="doTask(72)">Een nieuwe taak</td>
<td>
<a href="edit.php?id=72" >edit</a> <!-- deze kan weg als ajax werkt -->
<a href="action.php?do=change&id=72">change</a> <!-- status veranderen -->
<a href="action.php?do=del&id=72">del</a> <!-- verwijderen -->
</td>
...
</table>actions.php
Code:
if post = doTask(id) {
$sql = "UPDATE
todo
SET
task = :task
WHERE
id = :id";
$stmt = $db->prepare($sql);
$stmt->bindParam(':task', $_POST['taskid-id']);
$stmt->bindParam(':id', $_POST['id']);
...
}function.js
Code:
function doTask(id) {
$.ajax({
type: "POST",
url: "actions.php?id=id",
data: $task,
success: function(){
// hier een boodschap?
}
});
return false;
}---------- Bericht toegevoegd op 22:23 ---------- Vorige bericht was op 22:52 ----------
Nou, ik ben al een stuk opgeschoten. Ik heb een werkend systeem met mysql.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet/css" href="style.css">
<script type="text/javascript">
function doThis() {
var request = new XMLHttpRequest();
// waarde uit de div halen
var ts = document.getElementById('task1').innerHTML;
// data verzamelen voor verzenden... file.php?task=
var data = "task="+ts;
request.open('POST', 'actions.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.send(data);
// klaar? Dan melding tonen
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status==200) {
document.getElementById('message').innerHTML = request.responseText;
}
}
}
</script>
</head>
<body>
<div id="task1" name="task1" contentEditable="true" onblur="doThis()">Hier komt de tekst...</div>
<div id="message"><div>
</body>
</html>
PHP:
<?php
if (isset($_POST['task'])) {
$des = trim($_POST['task']);
$db = '';
$dbuser = '';
$dbpass = '';
$dbhost = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}
$sql = "UPDATE cont_edit SET tekst = '". $des ."' WHERE naam='naam'";
mysql_select_db('test');
$retval = mysql_query( $sql, $conn );
if(! $retval )
{
die('Could not update data: ' . mysql_error());
}
echo "Updated data successfully\n";
mysql_close($conn);
}
?>Nu nog omzetten naar sqlite en dan uitpuzzelen hoe dit slim te verwerken is in een lijst met todo's.
Laatst bewerkt door een moderator:
