I'm working on a Python/Django project. In the update view, I'm encountering a very specific issue:
When I try to update the bank_account field, the system updates it without any problems. However, when I attempt to update the address field, the address doesn't get updated. Here's the code:
class DeveloperUpdateView(LoginRequiredMixin, UpdateView):
model = Developer
form_class = DeveloperForm
template_name = 'developer/developer_form.html'
success_url = reverse_lazy('backoffice:developer-list')
def post(self, request, *args, **kwargs):
object = Developer.objects.get(id=kwargs['pk'])
developer_form = DeveloperForm(
data=request.POST, instance=object, prefix='developer'
)
bank_account_form = developer_bank_account_formset(data=request.POST)
address_form = developer_address_formset(data=request.POST)
if developer_form.is_valid():
developer = developer_form.save()
if (
bank_account_form.has_changed()
and bank_account_form.is_valid()
):
existing_bank_accounts = DeveloperBankAccount.objects.filter(
developer=developer
)
if existing_bank_accounts.exists():
existing_bank_accounts = existing_bank_accounts.first()
existing_bank_accounts.delete()
bank_accounts = bank_account_form.save(commit=False)
for bank_account in bank_accounts:
bank_account.developer = developer
bank_account.save()
if (
address_form.has_changed()
and address_form.is_valid()
):
existing_addresses = DeveloperAddress.objects.filter(
developer=developer
)
if existing_addresses.exists():
existing_addresses = existing_addresses.first()
existing_addresses.delete()
addresses = address_form.save(commit=False)
for address in addresses:
address.developer = developer
address.save()
else:
return render(
request,
"developer/developer_form.html",
{
"form": developer_form,
"bank_account_form": bank_account_form,
"address_form": address_form,
"action": "update",
"error": True,
},
)
return HttpResponseRedirect(reverse('backoffice:developer-list'))
def get_context_data(self, **kwargs):
context = super(DeveloperUpdateView, self).get_context_data(
**kwargs
)
context['form'] = DeveloperForm(
instance=self.object, prefix='developer'
)
bank_account_form = developer_bank_account_formset()
address_form = developer_address_formset()
try:
queryset = DeveloperAddress.objects.filter(id=self.object.address.id)
address_form = developer_address_formset(queryset=queryset)
address_form.extra = 0
except DeveloperAddress.DoesNotExist:
address_form.queryset = DeveloperAddress.objects.none()
try:
queryset = DeveloperBankAccount.objects.filter(
id=self.object.bank_account.id
)
bank_account_form = developer_bank_account_formset(queryset=queryset)
bank_account_form.extra = 0
except DeveloperBankAccount.DoesNotExist:
bank_account_form.queryset = DeveloperBankAccount.objects.none()
context['bank_account_form'] = bank_account_form
context['address_form'] = address_form
context['action'] = 'update'
context['error'] = False
return context
My concern is:
I use the following Vue.js code to quickly capture the ZIP code:
And I suspect that the issue lies specifically within the Vue.js part:
{% endblock contents %}
{% block javascript %}
{{ block.super }}
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
delimiters: ['[[', ']]'],
data: {
street: '',
district: '',
city: '',
state: '',
country: '',
isLoading: false,
isPostalCodeFound: true,
display_form_address: false,
display_form_bank: false,
hasError: '{{ error }}'
},
beforeMount: function () {
this.postal_code = this.$el.querySelector('#id_form-0-postal_code').value
this.street = this.$el.querySelector('#id_form-0-street').value
this.district = this.$el.querySelector('#id_form-0-district').value
this.city = this.$el.querySelector('#id_form-0-city').value
this.state = this.$el.querySelector('#id_form-0-state').value
this.country = this.$el.querySelector('#id_form-0-country').value
this.getError()
},
methods: {
onPostalCodeChange() {
if (this.postal_code.length >= 8) {
this.fetchPostalCodeData()
} else {
this.postal_code = ''
this.street = ''
this.district = ''
this.city = ''
this.state = ''
this.isPostalCodeFound = true
}
},
showAddress: function () {
this.display_form_address = !this.display_form_address;
},
showBank: function () {
this.display_form_bank = !this.display_form_bank;
},
getError: function () {
if (this.hasError === "True"){
this.showBank();
this.showAddress();
}
},
async fetchPostalCodeData() {
try {
this.isLoading = true
const response = await fetch(
`https://viacep.com.br/ws/${this.postal_code}/json/`, {
method: 'GET',
})
const data = await response.json()
if (data.erro == true || data.erro == 'true'){
this.isPostalCodeFound = false
} else {
console.log(data)
this.street = data.logradouro
this.district = data.bairro
this.city = data.localidade
this.state = data.uf
}
} catch (error) {
console.error(error)
} finally {
this.isLoading = false
}
},
}
})
</script>
Could you please provide me with more context or details about this problem? This will help me better understand and assist you in resolving the issue.
I tried using only:
beforeMount: function () {
this.postal_code = this.$el.querySelector('#id_postal_code').value
this.street = this.$el.querySelector('#id_street').value
this.district = this.$el.querySelector('#id_district').value
this.city = this.$el.querySelector('#id_city').value
this.state = this.$el.querySelector('#id_state').value
this.country = this.$el.querySelector('#id_country').value
this.getError()
},
The post method:
<form id="form-container" method="post">
{% csrf_token %}
{{ form|crispy }}
<hr>
<div id="form-address"
v-bind:style="this.display_form_address ? 'display:block' : 'display:none'">
<div v-if="!isPostalCodeFound" class="alert alert-danger" role="alert">
CEP não encontrado
</div>
<h4 class="card-title">Endereço da incorporadora</h4>
{{ address_form.management_form }}
{% for address in address_form %}
<div class="address-form">
{{ address|crispy }}
<hr>
</div>
{% endfor %}
</div>
