Sortable menu via JSON opslaan
ik heb het volgende. Een sortable menu die ik wil opslaan in de database. (volgorde).
Het menu bouwt zich op deze manier op:
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
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
<script type="text/javascript">
$(document).ready(function()
{
var updateOutput = function(e)
{
var list = e.length ? e : $(e.target), output = list.data('output');
output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
var consolelog = window.JSON.stringify(list.nestable('serialize'));//, null, 2));
};
// activate Nestable for list 1
$('#nestable').nestable({
group: 1
})
.on('change', updateOutput);
// output initial serialised data
updateOutput($('#nestable').data('output', $('#nestable-output')));
</script>
$(document).ready(function()
{
var updateOutput = function(e)
{
var list = e.length ? e : $(e.target), output = list.data('output');
output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
var consolelog = window.JSON.stringify(list.nestable('serialize'));//, null, 2));
};
// activate Nestable for list 1
$('#nestable').nestable({
group: 1
})
.on('change', updateOutput);
// output initial serialised data
updateOutput($('#nestable').data('output', $('#nestable-output')));
</script>
Ik heb de ajax voor het updaten:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$.ajax({
url: 'php/menu-wijzigen.php',
type: 'GET',
dataType: 'json',
data: consolelog,
success: function(result) {
$.each(result, function(key, value){
//console.log(key, value);
$.each(value, function(key, value){
console.log(key, value);
});
});
},
error: function(req, err){ console.log('my message ' + err + req); }
});
url: 'php/menu-wijzigen.php',
type: 'GET',
dataType: 'json',
data: consolelog,
success: function(result) {
$.each(result, function(key, value){
//console.log(key, value);
$.each(value, function(key, value){
console.log(key, value);
});
});
},
error: function(req, err){ console.log('my message ' + err + req); }
});
Nu wordt er een json code uitgepoept in een textveld d.m.v: updateOutput($('#nestable').data('output', $('#nestable-output')));
Je kan op deze site het voorbeeld zien: http://www.fleischer.nl/Cms/test2/
Hoe krijg ik in godsnaam de json string bewerkbaar zodat ik dat ding op kan slaan in een database?
Hieronder de volledige scripting:
Navigatie.php
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<?php
if(basename($_SERVER['PHP_SELF']) != basename(__FILE__)):
if ($login->isUserLoggedIn() == true) {
if(empty($_GET['nieuw']) && empty($_GET['edit'])) // Als er geen actie is ondernomen
{
?>
<script type="text/javascript" src="js/sort.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var updateOutput = function(e)
{
var list = e.length ? e : $(e.target), output = list.data('output');
output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
var consolelog = window.JSON.stringify(list.nestable('serialize'));//, null, 2));
};
// activate Nestable for list 1
$('#nestable').nestable({
group: 1
})
.on('change', updateOutput);
// output initial serialised data
updateOutput($('#nestable').data('output', $('#nestable-output')));
$('#submit').click(function() {
var consolelog = $('#nestable-output');
$.ajax({
url: 'php/menu-wijzigen.php',
type: 'GET',
dataType: 'json',
data: consolelog,
success: function(result) {
$.each(result, function(key, value){
//console.log(key, value);
$.each(value, function(key, value){
console.log(key, value);
});
});
},
error: function(req, err){ console.log('my message ' + err + req); }
});
return false;
});
});
</script>
<form method="GET" id="menuwijzigen" name="menuwijzigen">
<div class="cf nestable-lists">
<div class="dd" id="nestable">
<ol class="dd-list">
<li class="dd-item dd3-item" data-id="1">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 1</div>
</li>
<li class="dd-item dd3-item" data-id="2">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 2</div>
</li>
<li class="dd-item dd3-item" data-id="3">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 3</div>
</li>
<li class="dd-item dd3-item" data-id="4">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 4</div>
</li>
<li class="dd-item dd3-item" data-id="5">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 5</div>
</li>
<li class="dd-item dd3-item" data-id="6">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 6</div>
</li>
</ol>
</div>
</div>
<input type="text" name="nestable-output" id="nestable-output">
<input type="submit" class="gradient bericht submit blue" id="submit" name="submit" value="Opslaan" />
</form>
<?php
} // Einde Als er geen actie is ondernomen
elseif(!empty($_GET['nieuw']) && $_GET['nieuw'] == "bericht") // Als de actie nieuw "pagina" is.
{
?>
Hoi
<?php
} // Einde Als de actie nieuw "pakket" is.
elseif(!empty($_GET['edit']) && $_GET['edit'] == "bericht") // Als de actie edit "pagina" is.
{
$id = $mysqli->real_escape_string($_GET['id']);
$sql = "SELECT * FROM content WHERE id = '".$id."'";
if(!$result = $mysqli->query($sql))
{
trigger_error('Fout in query: '.$mysqli->error);
}
else
{
while($row = $result->fetch_assoc())
{
?>
Ophalen
<?php
}
}
} // Einde Als de actie edit "pagina" is.
else //Als de bovenstaande allemaal niet van toepassing is.
{
// Handle
}
}
else {
echo '<div class="info-box error ">';
echo '<span class="info-innerbox">';
echo MSG_LOGIN;
echo '</span>';
echo '</div>';
}
else:
header("Location: /");
endif;
?>
if(basename($_SERVER['PHP_SELF']) != basename(__FILE__)):
if ($login->isUserLoggedIn() == true) {
if(empty($_GET['nieuw']) && empty($_GET['edit'])) // Als er geen actie is ondernomen
{
?>
<script type="text/javascript" src="js/sort.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var updateOutput = function(e)
{
var list = e.length ? e : $(e.target), output = list.data('output');
output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
var consolelog = window.JSON.stringify(list.nestable('serialize'));//, null, 2));
};
// activate Nestable for list 1
$('#nestable').nestable({
group: 1
})
.on('change', updateOutput);
// output initial serialised data
updateOutput($('#nestable').data('output', $('#nestable-output')));
$('#submit').click(function() {
var consolelog = $('#nestable-output');
$.ajax({
url: 'php/menu-wijzigen.php',
type: 'GET',
dataType: 'json',
data: consolelog,
success: function(result) {
$.each(result, function(key, value){
//console.log(key, value);
$.each(value, function(key, value){
console.log(key, value);
});
});
},
error: function(req, err){ console.log('my message ' + err + req); }
});
return false;
});
});
</script>
<form method="GET" id="menuwijzigen" name="menuwijzigen">
<div class="cf nestable-lists">
<div class="dd" id="nestable">
<ol class="dd-list">
<li class="dd-item dd3-item" data-id="1">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 1</div>
</li>
<li class="dd-item dd3-item" data-id="2">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 2</div>
</li>
<li class="dd-item dd3-item" data-id="3">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 3</div>
</li>
<li class="dd-item dd3-item" data-id="4">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 4</div>
</li>
<li class="dd-item dd3-item" data-id="5">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 5</div>
</li>
<li class="dd-item dd3-item" data-id="6">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content">Item 6</div>
</li>
</ol>
</div>
</div>
<input type="text" name="nestable-output" id="nestable-output">
<input type="submit" class="gradient bericht submit blue" id="submit" name="submit" value="Opslaan" />
</form>
<?php
} // Einde Als er geen actie is ondernomen
elseif(!empty($_GET['nieuw']) && $_GET['nieuw'] == "bericht") // Als de actie nieuw "pagina" is.
{
?>
Hoi
<?php
} // Einde Als de actie nieuw "pakket" is.
elseif(!empty($_GET['edit']) && $_GET['edit'] == "bericht") // Als de actie edit "pagina" is.
{
$id = $mysqli->real_escape_string($_GET['id']);
$sql = "SELECT * FROM content WHERE id = '".$id."'";
if(!$result = $mysqli->query($sql))
{
trigger_error('Fout in query: '.$mysqli->error);
}
else
{
while($row = $result->fetch_assoc())
{
?>
Ophalen
<?php
}
}
} // Einde Als de actie edit "pagina" is.
else //Als de bovenstaande allemaal niet van toepassing is.
{
// Handle
}
}
else {
echo '<div class="info-box error ">';
echo '<span class="info-innerbox">';
echo MSG_LOGIN;
echo '</span>';
echo '</div>';
}
else:
header("Location: /");
endif;
?>
Menu-Wijzigen.php
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
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
<?php
if(basename($_SERVER['PHP_SELF']) == basename(__FILE__)):
@require("../inc/config.php");
if($_SERVER['REQUEST_METHOD'] == 'GET'):
// Alle gegevens ophalen en uitspuugen in JSON
//echo stripslashes($_GET['nestable-output']);
foreach ($_GET as $data => $value):
switch ($data):
default :
$result = json_decode($value);
foreach ($result as $data => $value):
switch ($data):
default :
$post_data .= '{"'.$data.'":"'.$value.'"},';
break;
endswitch;
endforeach;
break;
endswitch;
endforeach;
echo '[{"msg":"Json"}]';
else:
header("Location: /");
endif;
else:
header("Location: /");
endif;
?>
if(basename($_SERVER['PHP_SELF']) == basename(__FILE__)):
@require("../inc/config.php");
if($_SERVER['REQUEST_METHOD'] == 'GET'):
// Alle gegevens ophalen en uitspuugen in JSON
//echo stripslashes($_GET['nestable-output']);
foreach ($_GET as $data => $value):
switch ($data):
default :
$result = json_decode($value);
foreach ($result as $data => $value):
switch ($data):
default :
$post_data .= '{"'.$data.'":"'.$value.'"},';
break;
endswitch;
endforeach;
break;
endswitch;
endforeach;
echo '[{"msg":"Json"}]';
else:
header("Location: /");
endif;
else:
header("Location: /");
endif;
?>
Gewijzigd op 01/07/2013 11:24:24 door Joni Fleischer
Er zijn nog geen reacties op dit bericht.