JS prev-next test

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Jan Koehoorn

Jan Koehoorn

20/02/2008 21:41:00
Quote Anchor link
Hoi PHP vrienden,

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.
 
PHP hulp

PHP hulp

23/01/2020 00:44:39
 
Ceasar Feijen

Ceasar Feijen

20/02/2008 21:52:00
Quote Anchor link
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/
 
Wouter K

Wouter K

20/02/2008 21:54:00
Quote Anchor link
Ja jan het is zeker mooi :) post hem maar als je wil :)
grtz
10/10 jantje de grote meneer =p
 
Jan Koehoorn

Jan Koehoorn

20/02/2008 22:08:00
Quote Anchor link
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/


Ziet er inderdaad mooi uit, maar wat een overhead code! Ik moet eerlijk bekennen dat de lol van het zelf maken ook meespeelt hier.
 
Niek Weevers

Niek Weevers

20/02/2008 22:24:00
Quote Anchor link
moet readonly="true" niet officieel readonly="readonly" zijn?

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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>

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
 
Ceasar Feijen

Ceasar Feijen

20/02/2008 22:47:00
Quote Anchor link
Hai jan,

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
 
Robert Deiman

Robert Deiman

20/02/2008 23:00:00
Quote Anchor link
Ziet er leuk uit Jan, maar als dit uit een database komt, moet het wel een eitje zijn, om voor het 1e veld de knop "omhoog" niet weer te geven, en voor het laatste veld de knop "omlaag" niet.
Dat is netter/ handiger, dan de javascript alert.
 
Crispijn -

Crispijn -

20/02/2008 23:16:00
Quote Anchor link
Chiquert! Dit is vet! Ik ga hem wel even aanpassen naar mijn wensen maar dit is echt heel netjes! Staat inmiddels bij mijn bladwijzers!
 
Jan Koehoorn

Jan Koehoorn

21/02/2008 08:02:00
Quote Anchor link
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

Klopt, maar mootools kun je gebruiken voor alle JavaScript functionaliteit op je hele site. Dat script behandelt alleen die drag & drop.
 
Jacco Engel

Jacco Engel

21/02/2008 08:43:00
Quote Anchor link
Vind het mooi werken jan. Heb wel een vraagje

http://techblog.billkrueger.com/mootools-sortable-list/

Waarom heb je niet voor die oplossing gekozen :)?
 
Jan Koehoorn

Jan Koehoorn

21/02/2008 09:26:00
Quote Anchor link
Omdat dat over een ul met li's erin gaat. Wat ik wil is de items in een formulier herordenen, zodat ik ze in de goede volgorde in de DB kan opslaan.
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
 
Jacco Engel

Jacco Engel

21/02/2008 09:35:00
Quote Anchor link
Volgens mij werkt het met alles zolang je een container hebt met gelijksoortige elementen er in (weet het niet zeker)

Toch eens even de source van scriptaculous sortable create onder de loep nemen
 
Jan Koehoorn

Jan Koehoorn

21/02/2008 09:37:00
Quote Anchor link
Daar lijkt het inderdaad op. Typisch gevalletje van het wiel opnieuw uitvinden dus. Is niet de eerste keer en zal ook zeker niet de laatste zijn ;-)
 
Jacco Engel

Jacco Engel

21/02/2008 10:05:00
Quote Anchor link
hahaha inderdaad. Geef je nog even een seintje over wat je bevindingen zijn over die sortable? (als je er mee bezig gaat that is :P)
 
Lode

Lode

21/02/2008 10:16:00
Quote Anchor link
Je kan ook het wiel nog verbeteren natuurlijk ;)
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!
 
Robert Deiman

Robert Deiman

21/02/2008 10:25:00
Quote Anchor link
@Jan

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.
 
Crispijn -

Crispijn -

01/05/2008 20:02:00
Quote Anchor link
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!
Gewijzigd op 01/01/1970 01:00:00 door Crispijn -
 
Wouter K

Wouter K

01/05/2008 20:47:00
Quote Anchor link
@Cirspijn : Site ligt al enkele dagen uit. Vind het zelf ook erg jammer.
 
Crispijn -

Crispijn -

01/05/2008 22:37:00
Quote Anchor link
Hmmm, dan maar duimen dat Jan weer snel wat tijd vindt om de boel te fixen
 
Jan Koehoorn

Jan Koehoorn

01/05/2008 22:52:00
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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>
 
Crispijn -

Crispijn -

02/05/2008 09:30:00
Quote Anchor link
Dank je Jan! Dan ga ik er mee aan de slag!

Groeten Crispijn
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.