PHP sorteren en updaten met JQuery

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: 1 2 volgende »

Henk Jacobse

Henk Jacobse

21/12/2010 07:45:17
Quote Anchor link
Hallo,

Zie deze site.

Ik kan de velden sorteren mbt jquery maar nu zou het mooi zijn als de wijziging (sortering) ook meteen opgeslagen wordt. Wie heeft er een idee hoe ik dit moet doen en kan mijn hierbij helpen?
Gewijzigd op 21/12/2010 07:45:59 door Henk Jacobse
 
PHP hulp

PHP hulp

27/05/2024 05:47:24
 
Vincent Huisman

Vincent Huisman

21/12/2010 08:46:24
Quote Anchor link
via ajax, (linkje)
 
Kris Peeters

Kris Peeters

21/12/2010 08:47:56
Quote Anchor link
Opgeslagen voor wie?
Per gebruiker opslaan in cookies of database (of gewoon in een sessie)?

Wat je zult moeten doen, is de volgorde met AJAX naar de server sturen.
Ik zal eens zien hoe dat ding precies werkt.

O, trouwens, je bent je </body> vergeten.
 
Henk Jacobse

Henk Jacobse

21/12/2010 09:05:45
Quote Anchor link
het gaat om bijv berichten of menu-items waarvan de volgorde van tonen aangepast wordt. Deze volgorde wordt opgeslagen in de database.

Hmmmm, heb helaas geen ervaring met AJAX. Kun jij mij op weg helpen?
 
Vincent Huisman

Vincent Huisman

21/12/2010 09:21:27
Quote Anchor link
zie mijn linkje met voorbeelden onderaan
 
Kris Peeters

Kris Peeters

21/12/2010 09:36:07
Quote Anchor link
Ik zal eerst eens naar de documentatie zien om te zien hoe die volgorde wordt bijgehouden.

Dan toon ik wel hoe je het met Ajax kan regelen.
 
Jelmer -

Jelmer -

21/12/2010 09:43:11
Quote Anchor link
De volgorde wordt gewoon bijgehouden in de DOM. What you see is what you get, de volgorde van je <li>'s die je ziet is dezelfde als die van jQuery('#sortable1 li').

Daarnaast heeft jQuery UI's sortable extensie ook nog een leuke extra method: serialize. Als je al je li's een id meegeeft, kan je ze heel gemakkelijk identificeren.

Combineer dat met je update event en jQuery.post en je bent er al.
 
Kris Peeters

Kris Peeters

21/12/2010 09:59:38
Quote Anchor link
Ah, nog simpeler, dan.

Ik moet even weg; dat komt vandaag nog in orde.
 
Henk Jacobse

Henk Jacobse

21/12/2010 10:19:05
Quote Anchor link
Oke heren,

Ik heb het voor elkaar, echter wil ik nu graag ook nog de values van de listItems meegeven aan mijn php-file?

Kan dat?
Gewijzigd op 21/12/2010 16:22:21 door Henk Jacobse
 
Kris Peeters

Kris Peeters

21/12/2010 16:41:38
Quote Anchor link
Een voorbeeld

index.php
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
<!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" lang="en" xml:lang="en">
  <head>
    <base href="http://www.regelmijnaankoop.nl/" />
    <link rel="stylesheet" href="themes/base/jquery.ui.all.css">
    <link rel="stylesheet" type="text/css" href="/css/tst.css" />
    <link rel="stylesheet" type="text/css" href="/css/ui.css" />
    <script src="js/jquery-1.4.4.js"></script>
    <script src="ui/jquery.ui.core.js"></script>
    <script src="ui/jquery.ui.widget.js"></script>
    <script src="ui/jquery.ui.mouse.js"></script>
    <script src="ui/jquery.ui.sortable.js"></script>  
    <link rel="shortcut icon" href="favicon.ico" />
    <script>
    $(function() {
      var urlstring ="";
      $( "#sortable1, #sortable2" ).sortable({
        connectWith: ".connectedSortable"
      }).disableSelection();
      // on click => ...
      $('#show_items').click(function(e) {
        var items_sortable1 = Array();
        var items_sortable2 = Array();
        $('#message').html('<div></div>');
        var datastring_sortable1 ="";
        var datastring_sortable2 ="";
        
        $("#sortable1 li").each(function (key, item) {
          datastring_sortable1 += (key > 0 ? ',' : '' ) + $(item).attr('id');
        });
        $("#sortable2 li").each(function (key, item) {
          datastring_sortable2 += (key > 0 ? ',' : '' ) + $(item).attr('id');
        });
        var datastring = "items_sortable1="+ escape(datastring_sortable1) +"&items_sortable2="+ escape(datastring_sortable2);
        
        $.ajax({
          url: "http://www.regelmijnaankoop.nl/response.php",
          type: "POST",
          data: datastring,
          success: function (data) {
            $('#message').html(data);
          }
        });
      });
    });
    </script>  
    <style>
      #message {clear: both;}
    </style>
  </head>
  <body>
    <div class="demo">
      <ul id="sortable1" class="connectedSortable">
        <li class="ui-state-default" id="item_1">Item 1</li>
        <li class="ui-state-default" id="item_2">Item 2</li>
        <li class="ui-state-default" id="item_3">Item 3</li>
        <li class="ui-state-default" id="item_4">Item 4</li>
        <li class="ui-state-default" id="item_5">Item 5</li>
      </ul>
      <ul id="sortable2" class="connectedSortable">
        <li class="ui-state-highlight" id="item_6">Item 1</li>
        <li class="ui-state-highlight" id="item_7">Item 2</li>
        <li class="ui-state-highlight" id="item_8">Item 3</li>
        <li class="ui-state-highlight" id="item_9">Item 4</li>
        <li class="ui-state-highlight" id="item_10">Item 5</li>
      </ul>
    </div>
    <div id="message"></div>
    <input type="button" id="show_items" value="klik"/>
  </body>
</html>


response.php (zetten op http://www.regelmijnaankoop.nl/response.php)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
echo '<pre>'. print_r($_POST, 1)  .'</pre>';
?>


Sowieso nog niet wat je wil, maar zie al eens of het werkt bij jou en we zien dan wel wat je er precies mee wil doen.
Gewijzigd op 21/12/2010 16:43:50 door Kris Peeters
 
Henk Jacobse

Henk Jacobse

22/12/2010 11:27:58
Quote Anchor link
Het werkt, hier kan ik in ieder geval verder mee.

Alleen zou het nu mooi zijn als ik op een of andere manier de layout van het blokje ook kan veranderen.

Bijv. als ik een blokje vanuit de rechterrij naar de linkerrij verplaats is het uiterlijk verschillend. Kan dit dan ook automatisch veranderen?
 
Kris Peeters

Kris Peeters

22/12/2010 13:14:12
Quote Anchor link
Jaja, dat is allemaal mogelijk.

Nu, wat wil je er precies mee doen?

Dan kunnen we naar die oplossing toe werken.
 
Kevin de Groot

Kevin de Groot

22/12/2010 13:16:28
Quote Anchor link
Ik weet niet precies hoe, maar je moet kijken of er een <li> wordt gesleept naar de <ul> met id 'sortable1'. Is dit het geval, dan moet je waarschijnlijk iets doen met addClass() (of welke functie jQuery daar ook voor bied).
 
Kris Peeters

Kris Peeters

22/12/2010 13:24:09
Quote Anchor link
Ja.
removeClass() en addClass()
 
Maarten PHP

Maarten PHP

22/12/2010 15:24:04
Quote Anchor link
kan je hier nog wat aandoen:

Warning: Invalid argument supplied for foreach() in /public/sites/www.regelmijnaankoop.nl/process-sortable.php on line 5
 
Kris Peeters

Kris Peeters

22/12/2010 15:27:51
Quote Anchor link
foreach ($iets as $key => $item) { ...

$iets moet hier een array zijn. Daar zal iets anders dan een array staan bij jou.
 
Henk Jacobse

Henk Jacobse

23/12/2010 06:25:51
Quote Anchor link
Oke,

aangepast, is de foutmelding nu weg?

In de linkerrij staan de items die actief zijn en dus getoond worden op een site. In de andere rij (rechts) staan de items die niet actief zijn, deze worden met een andere kleur aangegeven.

Dus als ik een blok van links naar rechts sleep zou de kleur ook meteen moeten veranderen.
 
Maarten PHP

Maarten PHP

23/12/2010 06:58:18
 
Henk Jacobse

Henk Jacobse

23/12/2010 07:08:04
Quote Anchor link
Klopt,

Maar test het script nu eens:

http://www.regelmijnaankoop.nl

Verandering van de layout heb ik nu ook werkend, uiteraard na de goeie tip van Kevin en Kris. Top!!!!
Gewijzigd op 23/12/2010 07:10:28 door Henk Jacobse
 
Kris Peeters

Kris Peeters

23/12/2010 09:08:45
Quote Anchor link
Moet je verder nog iets met die gegevens doen op server-niveau?
Of raak je daar wel uit?
 
Henk Jacobse

Henk Jacobse

23/12/2010 10:51:04
Quote Anchor link
Nou voorlopig redt ik me wel, mocht ik nog problemen tegenkomen dan laat ik het wel weten.

Nogmaals, bedankt voor de hulp!

Toevoeging op 23/12/2010 13:34:05:

Toch nog een vraagje:

Zie wederom http://www.regelmijnaankoop.nl

ik wil een melding krijgen wanneer ik op een edit button druk. In de melding moet ook nog het id gegeven worden van de button die ik indruk.

Ik dacht deze code te kunnen gebruiken:

$('a.menu-update-item').click(function(e) {
$msg = "U heeft edit-button = " + document.getElementsById("sortable1") + " ingedrukt";
alert($msg);
});

Helaas dit werkt niet, wie heeft er een idee.

+ this.id + lijkt beter te werken!!!
Gewijzigd op 23/12/2010 13:44:44 door Henk Jacobse
 

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.