Уже 3 дня бьюсь, решение в голову не приходит. Естественно не хватает знаний и поэтому прошу помощь от сообщества..
Представьте себе есть корзина.
В нее добавляется товар, который имеет следующие поля(Модели):
Брэнд(список из базы моделей), Марки Брэнда(зависимость от бренда), цена, тип и т.п.
Сделал Java-скрипт, который по кнопкам добавляет, удаляет товар.
И сейчас необходимо сделать Jquery, чтобы при выборе поля Брэнд( первого товара, и последующих добавленных с помощью кнопок), менялись поля(селекты) поля Марки Брэнда.
Я это уже реализовал, но вот с динамически новыми не получается. Так как скрипт динамически(инкремент) меняет ид и имя объектов.
Собственно код:
Модели, участвующие в этом
class tabako_brands(models.Model):
class Meta:
db_table = 'tabako_brands'
tabako_brands_title = models.CharField(verbose_name="Производитель", max_length=200)
class tabako_titles(models.Model):
class Meta:
db_table = 'tabako_title'
tabako_titles_brand = models.ForeignKey(tabako_brands, verbose_name="Производитель")
tabako_titles_title = models.CharField('Название', max_length=200)
class buy_tabako(models.Model): - сама корзина
class Meta:
db_table = 'buy_tabako'
buy_tabako_brand = models.ForeignKey(tabako_brands, verbose_name="Производитель")
buy_tabako_title = models.ForeignKey(tabako_titles, verbose_name="Название")
Здесь еще есть несколько полей, но с ними все ок и они никак не влияют на скрипты и логику.
URL's
url(r'^add_cart/brand/$', brand.as_view(), name='brand'),
Вьюхи отвечающие за Jquery, соотвествие селектов
class brand(TemplateView):
def get(self, request, *args, **kwargs):
id_brand = request.GET['id']
titles = tabako_titles.objects.filter(tabako_titles_brand__id=id_brand)
data = serializers.serialize('json', titles, fields=('tabako_titles_title', 'tabako_titles_id'))
return HttpResponse(data, content_type='application/json')
Сам скрипт отвечающий за динамическое добавление форм
<script type="text/javascript">
$(document).ready(function() {
function updateElementIndex(el, prefix, ndx) {
var id_regex = new RegExp('(' + prefix + '-\\d+-)');
var replacement = prefix + '-' + ndx + '-';
if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex,
replacement));
if (el.id) el.id = el.id.replace(id_regex, replacement);
if (el.name) el.name = el.name.replace(id_regex, replacement);
}
function deleteForm(btn, prefix) {
var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
if (formCount > 1) {
// Delete the item/form
$(btn).parents('.item').remove();
var forms = $('.item'); // Get all the forms
// Update the total number of forms (1 less than before)
$('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
var i = 0;
// Go through the forms and set their indices, names and IDs
for (formCount = forms.length; i < formCount; i++) {
$(forms.get(i)).children().children().each(function() {
updateElementIndex(this, prefix, i);
});
}
} // End if
else {
alert("Вы не можете удалить единственную форму");
}
return false;
}
function addForm(btn, prefix) {
var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
// You can only submit a maximum of 10 todo items
if (formCount < 10) {
// Clone a form (without event handlers) from the first form
var row = $(".item:first").clone(false).get(0);
// Insert it after the last form
$(row).removeAttr('id').hide().insertAfter(".item:last").slideDown(300);
// Remove the bits we don't want in the new row/form
// e.g. error messages
$(".errorlist", row).remove();
$(row).children().removeClass('error');
// Relabel/rename all the relevant bits
$(row).children().children().each(function() {
updateElementIndex(this, prefix, formCount);
if ( $(this).attr('type') == 'text' )
$(this).val('');
});
// Add an event handler for the delete item/form link
$(row).find('.delete').click(function() {
return deleteForm(this, prefix);
});
// Update the total form count
$('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
} // End if
else {
alert("Sorry, you can only enter a maximum of ten items.");
}
return false;
}
// Register the click event handlers
$("#add").click(function() {
return addForm(this, 'form');
});
$(".delete").click(function() {
return deleteForm(this, 'form');
});
});
</script>
<div class="item row">
<div class="large-2 columns">
<label>Бренд</label>
<select id="id_form-0-buy_tabako_brand" name="form-0-buy_tabako_brand">
<option value="" selected="selected">---------</option>
<option value="1">Alfakher</option>
<option value="2">Habibi</option>
</select>
</div>
<div class="large-2 columns">
<label>Тип</label>
<select id="title" name="form-0-buy_tabako_title"><option value="0">Mint</option></select>
</div>
И главная проблема вот здесь id поля Брэнд, как-то формируется автоматический и получается следующее "id_form-номер формы-buy_tabako_brand".
Мне нужно сделать, как то так, Чтобы селект, смотрел форму родителя tabako_titles и его ИДшник, которых может быть столько, сколько добавить человек форм. И делал соотвествие на его основе поля Тип.
Сейчас работающие Jquery, выглядит вот так. Но он работает некорректно, так как он находит id_form-0-buy_tabako_brand Бренд, первой формы и правильно подставляет Тип, если же добавить новую форму, то у нее тип автоматический соотвествует Бренду из первой формы..((
$(document).ready(function() {
$("#id_form-0-buy_tabako_brand").on('change', function title() {
var id = $(this).val();
$.ajax({
data: {'id': id},
url: '/tabako/add_cart/brand/',
type: 'get',
success: function (data) {
var html = ""
for (var i = 0; i < data.length; i++) {
html += '<option value="'+i+'">' + data[i].fields.tabako_titles_title + '</option>'
}
$('#title').html(html);
}
});
});
})
Как сделать поле id_form-0-buy_tabako_brand в скрипте, чтобы оно менялось в зависимости от ИД в форме.
Updated 16 Sept. 2016, 18:28 by borisovhouse.