Switch statement dupliceren met javascript
Zoals de titel al aangeeft probeer ik een switch statement met javascript te dupliceren. Helaas krijg ik het niet voor elkaar. Ik heb de volgende tutorial gevolgd waar ze in een case met javascript velden dupliceren, nu wil ik de hele switch statement dupliceren, maar kom hier niet uit.
De codes zien er als volgt uit:
JS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
// Add repeatable row
jQuery('.repeatable-add').click(function() {
field = jQuery(this).closest('td').find('.custom_repeatable li:last').clone(true);
fieldLocation = jQuery(this).closest('td').find('.custom_repeatable li:last');
jQuery('input', field).val('').attr('name', function(index, name) {
return name.replace(/(\d+)/, function(fullMatch, n) {
return Number(n) + 1;
});
})
field.insertAfter(fieldLocation, jQuery(this).closest('td'))
return false;
});
jQuery('.repeatable-add').click(function() {
field = jQuery(this).closest('td').find('.custom_repeatable li:last').clone(true);
fieldLocation = jQuery(this).closest('td').find('.custom_repeatable li:last');
jQuery('input', field).val('').attr('name', function(index, name) {
return name.replace(/(\d+)/, function(fullMatch, n) {
return Number(n) + 1;
});
})
field.insertAfter(fieldLocation, jQuery(this).closest('td'))
return false;
});
PHP code:
Kleine uitleg van de code.
- Row is de tr die ik wil kunnen dupliceren.
- TD order is om met drag en drop de volgorde aan te passen
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
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
// Begin repeater
// Begin a table row
echo '<tr class="row">';
echo '<td class="order">1</td>';
foreach ($custom_meta_fields as $field) {
// Get value of this field if it exists for this post
$meta = get_post_meta($post->ID, $field['id'], true);
echo '<td>';
switch ($field['type']) {
// Image
case 'image':
$i = 0; // Variable for repeater
$image = get_template_directory_uri().'/images/image.png';
echo '<span class="default_image" style="display:none">' . $image . '</span>';
if ($meta) {
$image = wp_get_attachment_image_src($meta, 'full');
$image = $image[0];
} // End if statement
echo '<input name="' . $field['id'] .'" type="hidden" class="upload_image" value="' . $meta . '" />';
echo '<img src="' . $image . '" class="preview_image" alt="" />';
echo '<input type="button" class="button add-image" value="Add Image">';
echo '<small><a href="#" class="remove-image">Remove Image</a></small>';
break;
// Text
case 'text':
echo '<input type="text" name="' . $field['id'] . '" id="' . $field['id'] . '" value="' . $meta . '" size="30" />';
break;
} // End switch statement
echo '</td>';
} // End foreach loop
echo '<td class="remove"></td>';
echo '</tr>'; // End .row
// Begin a table row
echo '<tr class="row">';
echo '<td class="order">1</td>';
foreach ($custom_meta_fields as $field) {
// Get value of this field if it exists for this post
$meta = get_post_meta($post->ID, $field['id'], true);
echo '<td>';
switch ($field['type']) {
// Image
case 'image':
$i = 0; // Variable for repeater
$image = get_template_directory_uri().'/images/image.png';
echo '<span class="default_image" style="display:none">' . $image . '</span>';
if ($meta) {
$image = wp_get_attachment_image_src($meta, 'full');
$image = $image[0];
} // End if statement
echo '<input name="' . $field['id'] .'" type="hidden" class="upload_image" value="' . $meta . '" />';
echo '<img src="' . $image . '" class="preview_image" alt="" />';
echo '<input type="button" class="button add-image" value="Add Image">';
echo '<small><a href="#" class="remove-image">Remove Image</a></small>';
break;
// Text
case 'text':
echo '<input type="text" name="' . $field['id'] . '" id="' . $field['id'] . '" value="' . $meta . '" size="30" />';
break;
} // End switch statement
echo '</td>';
} // End foreach loop
echo '<td class="remove"></td>';
echo '</tr>'; // End .row
Zoals je bij de laatste code ziet, wil ik vanaf de comment 'repeater' tot aan het einde van de row kunnen dupliceren doormiddel van een button.
De tutorial die ik deels gebruikt hebt en waar ik de code van heb is: http://wp.tutsplus.com/tutorials/reusable-custom-meta-boxes-part-3-extra-fields/
Ik hoop dat iemand mij uit de brand kan helpen, ik krijg het in ieder geval tot heden niet opgelost...
Als laatste nog, zal ik de case van de repeater hieronder posten:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
switch($field['type']) {
// repeatable
case 'repeatable':
echo '<a class="repeatable-add button" href="#">+</a>
<ul id="'.$field['id'].'-repeatable" class="custom_repeatable">';
$i = 0;
if ($meta) {
foreach($meta as $row) {
echo '<li><span class="sort hndle">|||</span>
<input type="text" name="'.$field['id'].'['.$i.']" id="'.$field['id'].'" value="'.$row.'" size="30" />
<a class="repeatable-remove button" href="#">-</a></li>';
$i++;
}
} else {
echo '<li><span class="sort hndle">|||</span>
<input type="text" name="'.$field['id'].'['.$i.']" id="'.$field['id'].'" value="" size="30" />
<a class="repeatable-remove button" href="#">-</a></li>';
}
echo '</ul>
<span class="description">'.$field['desc'].'</span>';
break;
} //end switch
// repeatable
case 'repeatable':
echo '<a class="repeatable-add button" href="#">+</a>
<ul id="'.$field['id'].'-repeatable" class="custom_repeatable">';
$i = 0;
if ($meta) {
foreach($meta as $row) {
echo '<li><span class="sort hndle">|||</span>
<input type="text" name="'.$field['id'].'['.$i.']" id="'.$field['id'].'" value="'.$row.'" size="30" />
<a class="repeatable-remove button" href="#">-</a></li>';
$i++;
}
} else {
echo '<li><span class="sort hndle">|||</span>
<input type="text" name="'.$field['id'].'['.$i.']" id="'.$field['id'].'" value="" size="30" />
<a class="repeatable-remove button" href="#">-</a></li>';
}
echo '</ul>
<span class="description">'.$field['desc'].'</span>';
break;
} //end switch
Alvast hartelijk dank. Hopelijk komen we uit mijn probleem.
Mochten er nog vragen en of duidelijkheden zijn hoor ik ze uiteraard graag.
Mvg, Casper
Gewijzigd op 29/12/2012 21:20:17 door Casper B
Er zijn nog geen reacties op dit bericht.