JS prev-next test
binnenkort heb ik een voorspeelavond. Daarbij hoort een lijst met leerlingen die in een bepaalde volgorde moeten optreden. Mijn plan is als volgt: haal ze uit de db en zet ze in een form. In dat form verwissel ik ze met JavaScript. Daarna sla ik ze weer op in de DB met een volgnummer.
Ik heb een prev-next script gemaakt. Kunnen jullie even testen? Als mensen het handig vinden, zet ik het in de scriptlib.
Is dit niet handiger. Gebruik ik in mijn cms ook
http://www.isocra.com/2007/07/dragging-and-dropping-table-rows-in-javascript/
grtz
10/10 jantje de grote meneer =p
ceasar schreef op 20.02.2008 21:52:
He jan,
Is dit niet handiger. Gebruik ik in mijn cms ook
http://www.isocra.com/2007/07/dragging-and-dropping-table-rows-in-javascript/
Is dit niet handiger. Gebruik ik in mijn cms ook
http://www.isocra.com/2007/07/dragging-and-dropping-table-rows-in-javascript/
Ziet er inderdaad mooi uit, maar wat een overhead code! Ik moet eerlijk bekennen dat de lol van het zelf maken ook meespeelt hier.
Maar maakt me ook niet zo veel uit.
Ik ben me de laatste tijd meer aan het verdiepen in jQuery. Heel mooi spul is dat.
EN hieronder een voorbeeld die jij misschien ook kan gebruiken Jan.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#myList").sortable({});
});
</script>
<style>ul { list-style: none; }
li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; }</style>
</head>
<body>
<script src="http://dev.jquery.com/view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/1.0.1a/ui.mouse.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/1.0.1a/ui.draggable.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/1.0.1a/ui.droppable.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/1.0.1a/ui.sortable.js"></script>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("#myList").sortable({});
});
</script>
<style>ul { list-style: none; }
li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; }</style>
</head>
<body>
<script src="http://dev.jquery.com/view/trunk/plugins/dimensions/jquery.dimensions.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/1.0.1a/ui.mouse.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/1.0.1a/ui.draggable.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/1.0.1a/ui.droppable.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/1.0.1a/ui.sortable.js"></script>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
</html>
Copy pasten en het werkt al. Wanneer je het wilt gebruiken, zou ik er wel voor zorgen dat de externe bestande even in de buurt opslaat.
Gewijzigd op 01/01/1970 01:00:00 door Niek Weevers
Lijkt me geen overhead code.
Jij gebruik mootools wat nog veel meer code is
Deze code is vele malen kleiner
Ik gebruik de code van die link ook maar een keer in een function.js. Vervolgens kan ik op elke plek waar ik wil die code uitvoeren als volgt
<script type="text/javascript">
var table2 = document.getElementById('table-1');
var tableDnD2 = new TableDnD();
tableDnD2.init(table2);
</script>
Verder heb ik uiteraard er code uitgehaald en met ajax een save functie gemaakt dus veel fun gehad in het zelf maken :)
Hier de ajax save functie
/** This function is called when you drop a row, so redefine it in your code
to do whatever you want, for example use Ajax to update the server */
this.onDrop = function(table, droppedRow) {
// Do nothing for now
var rows = table.tBodies[0].rows;
var filename = document.location.href;
while(filename.indexOf('/') > -1){
filename = filename.substring(filename.indexOf('/')+1,filename.length);
}
var items = '';
var j = 0;
for (var i=0; i<rows.length; i++) {
var row = rows;
var nodrop = row.getAttribute("NoDrop");
var nodrag = row.getAttribute("NoDrag");
if((nodrop == null || nodrop == "undefined") && (nodrag == null || nodrag == "undefined")){
items += ',' + row.id + '-' + j;
j++;
}
}
var url = filename + (filename.indexOf('?') == -1 ? '?' : '&') + 'items=' + items.substring(1,items.length);
xmlhttp = newAjax('GET',url);
xmlhttp.send(null);
}
en hier de newAjax functie
function newAjax(type, url) {
var xmlhttp = false;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest;
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (url.indexOf("?") == -1) {
url += "?time=" + (new Date).getTime();
} else {
url += "&time=" + (new Date).getTime();
}
xmlhttp.open(type, url, true);
if(type.toLowerCase() == 'post'){
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
}
return xmlhttp;
}
Gewijzigd op 01/01/1970 01:00:00 door Ceasar Feijen
Dat is netter/ handiger, dan de javascript alert.
ceasar schreef op 20.02.2008 22:47:
Hai jan,
Lijkt me geen overhead code.
Jij gebruik mootools wat nog veel meer code is
Deze code is vele malen kleiner
Lijkt me geen overhead code.
Jij gebruik mootools wat nog veel meer code is
Deze code is vele malen kleiner
Klopt, maar mootools kun je gebruiken voor alle JavaScript functionaliteit op je hele site. Dat script behandelt alleen die drag & drop.
http://techblog.billkrueger.com/mootools-sortable-list/
Waarom heb je niet voor die oplossing gekozen :)?
Edit:
Ik zie overigens in de broncode van die pagina, dat het waarschijnlijk ook met andere elementen dan li kan. Toch even onderzoeken dus ;-)
Gewijzigd op 01/01/1970 01:00:00 door Jan Koehoorn
Toch eens even de source van scriptaculous sortable create onder de loep nemen
Eerste wiel was ook niet rond... En er komen nog regelmatig nieuwe soorten velgen op de markt geloof ik...
Als het soms alleen maar voor je eigen wensen... En is natuurlijk leerzaam!
Ik zou nog wel even een pointer als cursor doen op de afbeeldingen, en de omhoog bij de bovenste en omlaag bij de onderste weghalen.
Het ziet er in elk geval mooi uit, en werkt prima in FF IE7 IE6.
Gewijzigd op 01/01/1970 01:00:00 door Crispijn -
Crispijn schreef op 01.05.2008 20:02:
ah klote! Net nou ik dit voorbeeld als handvat voor een toepassing wil gebruiken ligt de site van Jan er uit... Jan... Kan jij, Jan, of iemand anders misschien de inhoud van je pagina hier posten? Ik ben er naarstig naar op zoek!
Mijn site is even in onderhoud. Ik heb de scripts gebackupt en ben bezig om het wat handiger in te delen. Hieronder plak ik even de code van het voorbeeld dat jij bedoelt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<?php
ini_set ('display_errors', 1);
error_reporting (E_ALL);
require 'stats.php';
$title = 'Jan Koehoorn | Prev Next List';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jan Koehoorn | <?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" media="screen" href="reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="oop.css" />
<style type="text/css">
div#container {width: 600px;}
div#container li {border: 1px solid #ccc; margin: 5px; padding: 0;}
img.up, img.down {margin: 5px 2px 2px 2px;}
</style>
<script type="text/javascript" src="mootools/mootools.js"></script>
<script type="text/javascript">
window.addEvent ('domready', function () {
$$('img.up').each (function (item) {
item.addEvent ('click', function () {
var p = this.getParent ();
var prev = p.getPrevious ();
if (prev != null) {
p.injectBefore (prev);
}
else {
alert ('Verder omhoog kan niet');
}
});
});
$$('img.down').each (function (item) {
item.addEvent ('click', function () {
var p = this.getParent ();
var next = p.getNext ();
if (next != null) {
p.injectAfter (next);
}
else {
alert ('verder omlaag kan niet');
}
});
});
});
</script>
</head>
<body>
<div id="container">
<h1><?php echo $title; ?></h1>
<form method="post" action="">
<fieldset>
<p>
<img class="up" src="prev_next_up.gif" />
<img class="down" src="prev_next_down.gif" />
<input name="naam[]" type="text" readonly="true" value="jan" />
</p>
<p>
<img class="up" src="prev_next_up.gif" />
<img class="down" src="prev_next_down.gif" />
<input name="naam[]" type="text" readonly="true" value="piet" />
</p>
<p>
<img class="up" src="prev_next_up.gif" />
<img class="down" src="prev_next_down.gif" />
<input name="naam[]" type="text" readonly="true" value="kees" />
</p>
<p>
<img class="up" src="prev_next_up.gif" />
<img class="down" src="prev_next_down.gif" />
<input name="naam[]" type="text" readonly="true" value="natasha" />
</p>
<p>
<img class="up" src="prev_next_up.gif" />
<img class="down" src="prev_next_down.gif" />
<input name="naam[]" type="text" readonly="true" value="els" />
</p>
<p>
<img class="up" src="prev_next_up.gif" />
<img class="down" src="prev_next_down.gif" />
<input name="naam[]" type="text" readonly="true" value="iris" />
</p>
</fieldset>
<fieldset>
<input type="submit" value="verzenden" />
</fieldset>
</form>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
echo '<pre>' . print_r ($_POST, true) . '</pre>';
}
?>
</div>
</body>
</html>
ini_set ('display_errors', 1);
error_reporting (E_ALL);
require 'stats.php';
$title = 'Jan Koehoorn | Prev Next List';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jan Koehoorn | <?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" media="screen" href="reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="oop.css" />
<style type="text/css">
div#container {width: 600px;}
div#container li {border: 1px solid #ccc; margin: 5px; padding: 0;}
img.up, img.down {margin: 5px 2px 2px 2px;}
</style>
<script type="text/javascript" src="mootools/mootools.js"></script>
<script type="text/javascript">
window.addEvent ('domready', function () {
$$('img.up').each (function (item) {
item.addEvent ('click', function () {
var p = this.getParent ();
var prev = p.getPrevious ();
if (prev != null) {
p.injectBefore (prev);
}
else {
alert ('Verder omhoog kan niet');
}
});
});
$$('img.down').each (function (item) {
item.addEvent ('click', function () {
var p = this.getParent ();
var next = p.getNext ();
if (next != null) {
p.injectAfter (next);
}
else {
alert ('verder omlaag kan niet');
}
});
});
});
</script>
</head>
<body>
<div id="container">
<h1><?php echo $title; ?></h1>
<form method="post" action="">
<fieldset>
<p>
<img class="up" src="prev_next_up.gif" />
<img class="down" src="prev_next_down.gif" />
<input name="naam[]" type="text" readonly="true" value="jan" />
</p>
<p>
<img class="up" src="prev_next_up.gif" />
<img class="down" src="prev_next_down.gif" />
<input name="naam[]" type="text" readonly="true" value="piet" />
</p>
<p>
<img class="up" src="prev_next_up.gif" />
<img class="down" src="prev_next_down.gif" />
<input name="naam[]" type="text" readonly="true" value="kees" />
</p>
<p>
<img class="up" src="prev_next_up.gif" />
<img class="down" src="prev_next_down.gif" />
<input name="naam[]" type="text" readonly="true" value="natasha" />
</p>
<p>
<img class="up" src="prev_next_up.gif" />
<img class="down" src="prev_next_down.gif" />
<input name="naam[]" type="text" readonly="true" value="els" />
</p>
<p>
<img class="up" src="prev_next_up.gif" />
<img class="down" src="prev_next_down.gif" />
<input name="naam[]" type="text" readonly="true" value="iris" />
</p>
</fieldset>
<fieldset>
<input type="submit" value="verzenden" />
</fieldset>
</form>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
echo '<pre>' . print_r ($_POST, true) . '</pre>';
}
?>
</div>
</body>
</html>
Groeten Crispijn