Сообщение от laimas
|
Нумерация это одно, а вот идентификаторы объектов, это иное, и они должны быть уникальны. Исходя из этого, чтобы выполнить это $('input[name=\'project_image[<?php echo $project_image_row; ?>][product_to_project]\']').autocomplete({}), нужно порождать этот JS скрипт для каждой строки в цикле foreach.
Допустим (хотя этого и не видно в коде), но каким же образом будет обеспечиваться нумерация, а уж тем более уникальность идентификаторов при динамическом добавлении html = '<tr id="project_image-row' + project_image_row + '">';?
|
Правильно в цикле порождать это ладно я буду таким образом.
<table id="project_images" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<td class="text-left"><?php echo $entry_project_image; ?></td>
<td class="text-right"><?php echo $entry_project_image_sort_order; ?></td>
<td></td>
</tr>
</thead>
<tbody>
<?php $project_image_row = 0; ?>
<?php foreach ($project_images as $project_image) { ?>
<tr id="project_image-row<?php echo $project_image_row; ?>">
<td class="text-left"><a href="" id="thumb-image<?php echo $project_image_row; ?>" data-toggle="image" class="img-thumbnail"><img src="<?php echo $project_image['thumb']; ?>" alt="" title="" data-placeholder="<?php echo $placeholder; ?>" /></a><input type="hidden" name="project_image[<?php echo $project_image_row; ?>][image]" value="<?php echo $project_image['image']; ?>" id="input-project_image<?php echo $project_image_row; ?>" /></td>
<td><div class="form-group" id="product-to-project<?php echo $project_image_row; ?>" style="display:inherit">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"><?php echo $entry_product; ?></label>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<input type="text" name="project_image[<?php echo $project_image_row; ?>][product_to_project]" value="" class="form-control" />
<div id="project-image-list<?php echo $project_image_row; ?>" class="well well-sm" style="height: 150px; overflow: auto; margin-bottom:0;">
<?php if(isset($project_image['products'])) { ?>
<?php foreach($project_image['products'] as $product) { ?>
<div id="product-to-project-list<?php echo $project_image_row; ?>_<?php echo $product['product_id']; ?>"><i class="fa fa-minus-circle"></i> <?php echo $product['name']; ?>
<input type="hidden" name="project_image[<?php echo $project_image_row; ?>][product_to_project][]" value="<?php echo $product['product_id']; ?>" />
</div>
<?php } ?>
<?php } ?>
</div>
</div>
</div></td>
<td class="text-right"><input type="text" name="project_image[<?php echo $project_image_row; ?>][sort_order]" value="<?php echo $project_image['sort_order']; ?>" placeholder="<?php echo $entry_project_image_sort_order; ?>" class="form-control" /></td>
<td class="text-left"><button type="button" onclick="$('#project_image-row<?php echo $project_image_row; ?>').remove();" data-toggle="tooltip" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
</tr>
<script type="text/javascript">
$('input[name=\'project_image[<?php echo $project_image_row; ?>][product_to_project]\']').autocomplete({
'source': function(request, response) {
$.ajax({
url: 'index.php?route=catalog/product/autocomplete&token=<?php echo $token; ?>&filter_name=' + encodeURIComponent(request),
dataType: 'json',
success: function(json) {
response($.map(json, function(item) {
return {
label: item['name'],
value: item['product_id']
}
}));
}
});
},
'select': function(item) {
$('input[name=\'project_image[<?php echo $project_image_row; ?>][product_to_project]\']').val('');
$('#product-to-project-list<?php echo $project_image_row; ?>_' + item['value']).remove();
$('#project-image-list<?php echo $project_image_row; ?>').append('<div id="product-to-project-list<?php echo $project_image_row; ?>_' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="project_image[<?php echo $project_image_row; ?>][product_to_project][]" value="' + item['value'] + '" /></div>');
}
});
$('#project-image-list<?php echo $project_image_row; ?>').delegate('.fa-minus-circle', 'click', function() {
$(this).parent().remove();
});
</script>
<?php $project_image_row++; ?>
<?php } ?>
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<td class="text-left"><button type="button" onclick="addProjectImage();" data-toggle="tooltip" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
</tr>
</tfoot>
</table>
А вот как добавить сюда скрипт? Я пытался добавлять через html += но такое ощещение что или я не правильно экранировал кавычки или он просто не будет работать?
<script type="text/javascript"><!--
var project_image_row = <?php echo $project_image_row; ?>;
function addProjectImage() {
html = '<tr id="project_image-row' + project_image_row + '">';
html += ' <td class="text-left"><a href="" id="thumb-image' + project_image_row + '" data-toggle="image" class="img-thumbnail"><img src="<?php echo $placeholder; ?>" alt="" title="" data-placeholder="<?php echo $placeholder; ?>" /></a><input type="hidden" name="project_image[' + project_image_row + '][image]" value="" id="input-project_image' + project_image_row + '" /></td>';
html += '<td><div class="form-group" id="product-to-project' + project_image_row + '" style="display:inherit">';
html += ' <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"><?php echo $entry_product; ?></label>';
html += ' <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">';
html += ' <input type="text" name="project_image[' + project_image_row + '][product_to_project]" value="" class="form-control" />';
html += ' <div id="product-to-project-list' + project_image_row + '" class="well well-sm" style="height: 150px; overflow: auto; margin-bottom:0;">';
html += ' </div>';
html += ' </div>';
html += ' </div></td>';
html += ' <td class="text-right"><input type="text" name="project_image[' + project_image_row + '][sort_order]" value="" placeholder="<?php echo $entry_sort_order; ?>" class="form-control" /></td>';
html += ' <td class="text-left"><button type="button" onclick="$(\'#project_image-row' + project_image_row + '\').remove();" data-toggle="tooltip" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
html += '</tr>';
$('#project_images tbody').append(html);
project_image_row++;
}
//--></script>