JSON niveau aanspreken
Ik heb een klein scriptje gemaakt waarin je pins kan plaatsen, in deze pins kan je weer tekst toevoegen.
Al deze informatie wordt opgeslagen in een JSON bestand. Deze pins kan je ook weer bewerken dus het onthoud wat voor tekst je geplaatst hebt.
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
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
<?php $items = $param['args']['items']; ?>
<p>
<input type="button" id="landmark" class="button" value="<?php _e('Add New', 'map'); ?>">
</p>
<ul id="item-list" class="sortable-list">
<li class="list-item new-item">
<div class="list-item-handle">
<span class="menu-item-title"><?php _e('New item', 'map'); ?></span>
<a href="#" class="menu-item-toggle"></a>
</div>
<div class="list-item-settings">
<label><?php _e('Name', 'map'); ?><br><input type="text" class="input-text title-input" value="New item"></label>
<div>
<a href="#" class="item-delete"><?php _e('Delete'); ?></a>
<span class="meta-sep"> | </span>
<a href="#" class="item-cancel"><?php _e('Cancel'); ?></a>
</div>
</div>
</li>
<?php foreach ($items as &$item) : ?>
<li class="list-item">
<div class="list-item-handle">
<span class="menu-item-title"><?php echo $item['title']; ?></span>
<a href="#" class="menu-item-toggle"></a>
</div>
<div class="list-item-settings">
<label><?php _e('Tile', 'map'); ?><br><input type="text" class="input-text title-input" value="<?php echo $item['title']; ?>"></label>
<div>
<a href="#" class="item-delete"><?php _e('Delete'); ?></a>
<span class="meta-sep"> | </span>
<a href="#" class="item-cancel"><?php _e('Cancel'); ?></a>
</div>
</div>
</li>
<?php endforeach; ?>
</ul>
<input type="button" id="new-item" class="button" value="<?php _e('New item', 'map'); ?>">
<input type="button" id="delete-landmark" class="button" value="<?php _e('Delete', 'map'); ?>">
<input type="button" id="save-landmark" class="button button-primary right" value="<?php _e('Save', 'map'); ?>">
</div>
<?php
unset($item);
}
?>
<p>
<input type="button" id="landmark" class="button" value="<?php _e('Add New', 'map'); ?>">
</p>
<ul id="item-list" class="sortable-list">
<li class="list-item new-item">
<div class="list-item-handle">
<span class="menu-item-title"><?php _e('New item', 'map'); ?></span>
<a href="#" class="menu-item-toggle"></a>
</div>
<div class="list-item-settings">
<label><?php _e('Name', 'map'); ?><br><input type="text" class="input-text title-input" value="New item"></label>
<div>
<a href="#" class="item-delete"><?php _e('Delete'); ?></a>
<span class="meta-sep"> | </span>
<a href="#" class="item-cancel"><?php _e('Cancel'); ?></a>
</div>
</div>
</li>
<?php foreach ($items as &$item) : ?>
<li class="list-item">
<div class="list-item-handle">
<span class="menu-item-title"><?php echo $item['title']; ?></span>
<a href="#" class="menu-item-toggle"></a>
</div>
<div class="list-item-settings">
<label><?php _e('Tile', 'map'); ?><br><input type="text" class="input-text title-input" value="<?php echo $item['title']; ?>"></label>
<div>
<a href="#" class="item-delete"><?php _e('Delete'); ?></a>
<span class="meta-sep"> | </span>
<a href="#" class="item-cancel"><?php _e('Cancel'); ?></a>
</div>
</div>
</li>
<?php endforeach; ?>
</ul>
<input type="button" id="new-item" class="button" value="<?php _e('New item', 'map'); ?>">
<input type="button" id="delete-landmark" class="button" value="<?php _e('Delete', 'map'); ?>">
<input type="button" id="save-landmark" class="button button-primary right" value="<?php _e('Save', 'map'); ?>">
</div>
<?php
unset($item);
}
?>
Hier wat javascript wat er bij hoort:
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
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
// nieuwe item rij
$('#new-item').click(function() {
$('#item-list .new-item').clone().removeClass('new-item').appendTo('#item-list');
});
// landmark save
$('#save-landmark').click(function() {
var data = null,
selected = $('.selected-pin');
if (selected.length) {
data = $('.selected-pin').data('landmarkData');
}
else {
data = {};
data['items'] = getItems();
$(this).val('Save');
}
data['items'] = getItems();
});
var getItems = function() {
var items = [];
$('#item-list .list-item:not(.new-item)').each(function() {
var item = {};
item ['title'] = $('.title-input', this).val();
items.push(item);
});
return items;
}
$('#new-item').click(function() {
$('#item-list .new-item').clone().removeClass('new-item').appendTo('#item-list');
});
// landmark save
$('#save-landmark').click(function() {
var data = null,
selected = $('.selected-pin');
if (selected.length) {
data = $('.selected-pin').data('landmarkData');
}
else {
data = {};
data['items'] = getItems();
$(this).val('Save');
}
data['items'] = getItems();
});
var getItems = function() {
var items = [];
$('#item-list .list-item:not(.new-item)').each(function() {
var item = {};
item ['title'] = $('.title-input', this).val();
items.push(item);
});
return items;
}
Om verhaal kort te houden. als 'items' in het eerste JSON niveau ligt kan ik deze aanspreken($items = $param['args']['items'];) en is het allemaal geen probleem maar als 'items' dieper ligt lukt dit niet meer..
Iemand een idee hoe ik in de zelfde lijn als $items = $param['args']['items']; kan schrijven?
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
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
/**
<?php
* Constructor. The child class should call this constructor from its own constructor
*
* @param array $args An associative array with information about the current table
* @access protected
*/
function __construct( $args = array() ) {
$args = wp_parse_args( $args, array(
'plural' => '',
'singular' => '',
'ajax' => false,
'screen' => null,
) );
$this->screen = convert_to_screen( $args['screen'] );
add_filter( "manage_{$this->screen->id}_columns", array( $this, 'get_columns' ), 0 );
if ( !$args['plural'] )
$args['plural'] = $this->screen->base;
$args['plural'] = sanitize_key( $args['plural'] );
$args['singular'] = sanitize_key( $args['singular'] );
$this->_args = $args;
if ( $args['ajax'] ) {
// wp_enqueue_script( 'list-table' );
add_action( 'admin_footer', array( $this, '_js_vars' ) );
}
}?>
<?php
* Constructor. The child class should call this constructor from its own constructor
*
* @param array $args An associative array with information about the current table
* @access protected
*/
function __construct( $args = array() ) {
$args = wp_parse_args( $args, array(
'plural' => '',
'singular' => '',
'ajax' => false,
'screen' => null,
) );
$this->screen = convert_to_screen( $args['screen'] );
add_filter( "manage_{$this->screen->id}_columns", array( $this, 'get_columns' ), 0 );
if ( !$args['plural'] )
$args['plural'] = $this->screen->base;
$args['plural'] = sanitize_key( $args['plural'] );
$args['singular'] = sanitize_key( $args['singular'] );
$this->_args = $args;
if ( $args['ajax'] ) {
// wp_enqueue_script( 'list-table' );
add_action( 'admin_footer', array( $this, '_js_vars' ) );
}
}?>
Gewijzigd op 14/08/2015 10:47:21 door Chris van Kesteren
Mogelijk biedt het volgende wat inspiratie:
- definieer het gedrag van de pins in een... euh... javascript klasse:
Code (php)
1
2
3
4
5
2
3
4
5
function MyPinThingy() {
this.init = function(options) {
// initialisatie hier
}
}
this.init = function(options) {
// initialisatie hier
}
}
- geef $items (vanuit PHP) mee als initialisatie-parameter, en houd de items bij in een object van deze klasse (sla dus lokaal in een object van de klasse de "toestand" op van je functionaliteit):
declaratie (vervolg)
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
function MyPinThingy() {
this.items = false; // item data - meegegeven bij creatie of dynamisch toegevoegd
this.init = function(options) {
this.items = options.items;
// rest van init ...
// en hier wellicht een eenmalige "draw" methode voor het tonen van de initiele items
}
this.items = false; // item data - meegegeven bij creatie of dynamisch toegevoegd
this.init = function(options) {
this.items = options.items;
// rest van init ...
// en hier wellicht een eenmalige "draw" methode voor het tonen van de initiele items
}
aanroep:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
var pins = new MyPinThingy();
pins.init({'items': <?php json_encode($param['args']['items']) ?>});
});
//]]>
</script>
//<![CDATA[
$().ready(function() {
var pins = new MyPinThingy();
pins.init({'items': <?php json_encode($param['args']['items']) ?>});
});
//]]>
</script>
- verzorg het weergeven / toevoegen van van blokken via aparte functies (methoden) binnen de klasse
Ik weet niet of het bovenstaande echt gaat werken maar je zou er eens mee kunnen experimenteren. Het bovenliggende idee is dus dat je een soort van kapstok bouwt waarin je het "gedrag" van een stuk functionaliteit centraal vastlegt en waar je allerlei functionaliteit aan op kunt hangen. Voordelen van deze methoden zijn onder andere: elementen gaan eenheden met voorgedefinieerd gedrag vormen, geen vervuiling van globale scope.
EDIT: hierbij houd je wat je wilt weergeven (this.items, je "rauwe" pindata) en hoe je het wil weergeven gescheiden.
Gewijzigd op 14/08/2015 11:27:33 door Thomas van den Heuvel
Ik heb nog wat meer inspiratie nodig ;)
Voor elke persoon wil ik via javascript vanuit JSON een list-item toevoegen met 2 text velden.
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
$.each(value.persons, function(index, value) {
var entry = document.createElement('li');
entry.className = "list-item";
entry.innerHTML = '<div class="list-item-handle">\
<span class="menu-item-title"></span>\
<a href="#" class="menu-item-toggle"></a>\
</div>\
<div class="list-item-settings">\
<label>ID (unique)<br><input type="text" class="input-text id-input" value=""></label>\
<label>Name<br><input type="text" class="input-text title-input" value=""></label>\
<div>\
<a href="#" class="item-delete">Delete</a>\
<span class="meta-sep"> | </span>\
<a href="#" class="item-cancel">Cancel</a>\
</div>\
</div>';
list.appendChild(entry);
$('#person-list .list-item .title-input').val(value.title);
});
</script
$.each(value.persons, function(index, value) {
var entry = document.createElement('li');
entry.className = "list-item";
entry.innerHTML = '<div class="list-item-handle">\
<span class="menu-item-title"></span>\
<a href="#" class="menu-item-toggle"></a>\
</div>\
<div class="list-item-settings">\
<label>ID (unique)<br><input type="text" class="input-text id-input" value=""></label>\
<label>Name<br><input type="text" class="input-text title-input" value=""></label>\
<div>\
<a href="#" class="item-delete">Delete</a>\
<span class="meta-sep"> | </span>\
<a href="#" class="item-cancel">Cancel</a>\
</div>\
</div>';
list.appendChild(entry);
$('#person-list .list-item .title-input').val(value.title);
});
</script
Voor elke persoon wordt netjes een item aangemaakt. Alleen hoe kan ik nu voor elke persoon de .title-input een unieke naam geven?
In het script hierboven krijgen alle items de zelfde naam wat logisch is, maar geen idee hoe ik dit anders moet aanpakken..
Iemand een idee ?
mvg,
Chris
Toevoeging op 19/08/2015 08:52:52:
Wat aan het testen en dit lijk te werken :D
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
<script>
var list = document.getElementById('person-list');
var answers = 0;
if (undefined !== value.persons) {
$.each(value.persons, function(index, value) {
console.log(""+value.title);
var entry = document.createElement('li');
entry.className = "list-item";
entry.innerHTML += '<div class="list-item-handle">\
<span class="menu-item-title">' + answers + '</span>\
<a href="#" class="menu-item-toggle"></a>\
</div>\
<div class="list-item-settings">\
<label>ID (unique)<br><input type="text" class="input-text id-input" value=""></label>\
<label>Name<br><input type="text" class="input-text title-input" value=""></label>\
<div>\
<a href="#" class="item-delete">Delete</a>\
<span class="meta-sep"> | </span>\
<a href="#" class="item-cancel">Cancel</a>\
</div>\
</div>';
answers++;
list.appendChild(entry);
});
}
</script>
var list = document.getElementById('person-list');
var answers = 0;
if (undefined !== value.persons) {
$.each(value.persons, function(index, value) {
console.log(""+value.title);
var entry = document.createElement('li');
entry.className = "list-item";
entry.innerHTML += '<div class="list-item-handle">\
<span class="menu-item-title">' + answers + '</span>\
<a href="#" class="menu-item-toggle"></a>\
</div>\
<div class="list-item-settings">\
<label>ID (unique)<br><input type="text" class="input-text id-input" value=""></label>\
<label>Name<br><input type="text" class="input-text title-input" value=""></label>\
<div>\
<a href="#" class="item-delete">Delete</a>\
<span class="meta-sep"> | </span>\
<a href="#" class="item-cancel">Cancel</a>\
</div>\
</div>';
answers++;
list.appendChild(entry);
});
}
</script>