jquery-gridly, drag drop en rename...
Iedere pictureset bestaat uit 9 graphics welke ik op de juiste volgorde wil zetten.
op moment dat de graphics op de juiste positie zijn gedragged/dropped, Wil ik de positie van de graphic kunnen uitlezen en via een php script, de file laten renamen naar de juiste positie.
Dus met andere woorden, als 1.jpg op de positie van graphic9 (9.jpg) komt te staan betekent, dit dat alle graphics renamed moeten worden. Ik kan die rename starten op moment van klikken op de button 'rename' of op moment dat de graphic wordt gedropped op z'n nieuwe locatie.. maar hoe pak ik dit in aan met jquery, waar ik nog nooit mee geprogrammeerd heb (buiten het herbruiken van wat scripts).
Mijn vraag is dus concreet. hoe pak ik dit aan?
Hier staat info van de plugin: https://github.com/ksylvest/jquery-gridly
Dit is de html code:
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
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
<!DOCTYPE html>
<html>
<head>
<link href="include/gridly_renameandorder.css" rel="stylesheet" type="text/css">
<link href="include/jquery.gridly.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="include/jquery.gridly.js" type="text/javascript"></script>
</head>
<body>
<?php $thisdir = 'Pictureset1'; //target the directory where the pictures reside. ?>
<div class="gridly">
<div class="picture"><img src="<?php echo $thisdir.'/1.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/2.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/3.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/4.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/5.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/6.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/7.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/8.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/9.jpg'; ?>" ></div>
</div>
<!-- with the rename button I want to compare the initial ordering with the reordered and use a PHP rename scipt to rename the images. -->
<button type="button">Rename</button>
<script>
var reordering = function($elements) {
// Called before the drag and drop starts with the elements in their starting position.
$elements.each(function() {
console.debug($(this).data('position'));
});
};
var reordered = function($elements) {
// Called after the drag and drop ends with the elements in their ending position.
$elements.each(function() {
console.debug($(this).data('position'));
});
};
$('.gridly').gridly({
base: 60, // px base: The number of pixels for a single column span.
gutter: 20, // px - gutter: The number of pixels between columns.
columns: 12 // columns: The total number of columns allowed across.
});
</script>
</body>
</html>
<html>
<head>
<link href="include/gridly_renameandorder.css" rel="stylesheet" type="text/css">
<link href="include/jquery.gridly.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="include/jquery.gridly.js" type="text/javascript"></script>
</head>
<body>
<?php $thisdir = 'Pictureset1'; //target the directory where the pictures reside. ?>
<div class="gridly">
<div class="picture"><img src="<?php echo $thisdir.'/1.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/2.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/3.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/4.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/5.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/6.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/7.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/8.jpg'; ?>" ></div>
<div class="picture"><img src="<?php echo $thisdir.'/9.jpg'; ?>" ></div>
</div>
<!-- with the rename button I want to compare the initial ordering with the reordered and use a PHP rename scipt to rename the images. -->
<button type="button">Rename</button>
<script>
var reordering = function($elements) {
// Called before the drag and drop starts with the elements in their starting position.
$elements.each(function() {
console.debug($(this).data('position'));
});
};
var reordered = function($elements) {
// Called after the drag and drop ends with the elements in their ending position.
$elements.each(function() {
console.debug($(this).data('position'));
});
};
$('.gridly').gridly({
base: 60, // px base: The number of pixels for a single column span.
gutter: 20, // px - gutter: The number of pixels between columns.
columns: 12 // columns: The total number of columns allowed across.
});
</script>
</body>
</html>
Edit:
Ik heb code-tags geplaatst. Gelieve dit in het vervolg zelf toe te voegen aan je bericht.
Zie ook: Veel gestelde vragen: Welke UBB-codes kan ik gebruiken.
Zie ook: Veel gestelde vragen: Welke UBB-codes kan ik gebruiken.
Gewijzigd op 23/07/2018 23:58:31 door - Ariën -
Misschien doe je er trouwens ook verstandig aan om in plaats van de bestanden fysiek te hernoemen op een of andere manier de volgorde op te slaan (bijvoorbeeld in een database?). Dat lijkt mij ook een stuk minder foutgevoelig/zwaar dan elke keer te gaan slepen met bestand(snam)en.
Hoe zorg ik ervoor dat ik de (reordered) info terug krijg vanuit javascript (via Ajax) naar PHP? Heb hier geen kennis/ervaring mee.
Ik heb uit info van de plugin wel begrepen dat ik de volgende code moet opnemen in het script om de reordered info terug te krijgen.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
var reordered = function($elements) {
// Called after the drag and drop ends with the elements in their ending position.
$elements.each(function() {
console.debug($(this).data('position'));
});
};
In het bovenstaande fragment zul je nog wel even alle elementen en elementposities bij elkaar moeten sprokkelen, want alle elementen worden daar in afzondering behandeld, en je wilt alle informatie idealiter in 1x doorsturen.
Als je vervolgens die data in een variabele hebt - zeg elementData (object of associatief array oid) - dan kun je als volgt een AJAX-call doen:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
'url': 'doelscript.php', // het script waar de data naartoe gaat
'data': elementData, // de data die je verstuurt
'method': 'POST', // maakt er een POST request van
'dataType': 'json', // indien van toepassing voor het geval je een respons terugkrijgt, deze parameter geeft aan van welk type dat is
'success': function(data) {
// voor het geval het PHP-script nog iets moet terugkoppelen na het opslaan van de volgorde
if (data.success) {
alert('whee!');
} else {
alert('boo!');
}
}
});
'url': 'doelscript.php', // het script waar de data naartoe gaat
'data': elementData, // de data die je verstuurt
'method': 'POST', // maakt er een POST request van
'dataType': 'json', // indien van toepassing voor het geval je een respons terugkrijgt, deze parameter geeft aan van welk type dat is
'success': function(data) {
// voor het geval het PHP-script nog iets moet terugkoppelen na het opslaan van de volgorde
if (data.success) {
alert('whee!');
} else {
alert('boo!');
}
}
});
En doelscript.php ziet er bijvoorbeeld als volgt uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
$success = false;
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// doe je ding hier met $_POST
// bepaal of alles geslaagd is
// ...
$success = true;
}
// stuur JSON response die weer opgevangen wordt in het "success" deel
header('Content-Type: application/json; charset=UTF-8');
echo json_encode(array(
'success' => $success,
));
?>
$success = false;
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// doe je ding hier met $_POST
// bepaal of alles geslaagd is
// ...
$success = true;
}
// stuur JSON response die weer opgevangen wordt in het "success" deel
header('Content-Type: application/json; charset=UTF-8');
echo json_encode(array(
'success' => $success,
));
?>
Van dit soort codesnippets zijn trouwens legio voorbeelden te vinden op het internet.
- als die opslag-operatie in PHP normaal een afgeschermde operatie is zul je in die doelscript.php dus ook controles moeten uitvoeren (bijvoorbeeld het starten van een sessie en het controleren van gebruikersrechten ofzo)
- de success() functie zou je bijvoorbeeld kunnen gebruiken om knoppen opnieuw te activeren, bijvoorbeeld als je op een "opslaan" knop drukt deactiveer je de knop, start je de ajax-call en als deze klaar is activeer je deze weer, abstract:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#formulier').submit(function(e) {
// voorkom het default gedrag van het submitten van de form
e.preventDefault();
// deactiveer submit knop of doe iets anders grafisch
$('#submitbutton').attr('disabled', 'disabled);
// doe de ajax call zoals voorheen
$.ajax({
// ...
'success': function(data) {
// doe dingen
// ...
// zet submitknop weer aan
$('#submitbutton').removeAttr('disabled');
}
});
// [NOOT 3] zie volgende kanttekening voor dit stukje code (na de ajax-call)
}
});
// voorkom het default gedrag van het submitten van de form
e.preventDefault();
// deactiveer submit knop of doe iets anders grafisch
$('#submitbutton').attr('disabled', 'disabled);
// doe de ajax call zoals voorheen
$.ajax({
// ...
'success': function(data) {
// doe dingen
// ...
// zet submitknop weer aan
$('#submitbutton').removeAttr('disabled');
}
});
// [NOOT 3] zie volgende kanttekening voor dit stukje code (na de ajax-call)
}
});
- gotcha bij [NOOT 3] als je code zet na je AJAX-call dan wordt deze meteen uitgevoerd nadat de AJAX-call is aangeroepen, de code "loopt dus gewoon verder" en zal niet wachten op de respons die in "success" mogelijk verder wordt verwerkt, deze call is dus asynchroon, zie het als een apart draadje dat parallel gaat lopen aan de reeds bestaande codeflow; dit heeft mogelijk consequenties voor het design van andere code waarbij acties mogelijk moeten wachten op (de uitkomst van) dit soort evenementen
Gewijzigd op 24/07/2018 22:07:26 door Thomas van den Heuvel