After submitting the modal form, an AJAX request is made to pass the username and password to a view and retrieve JSON information to update the form. I have confirmed that the JsonResponse(rsdic) has been executed on the server side and the client receives the JSON info successfully through the AJAX success function.
However, I am facing difficulty in updating the #error_message1 field embedded in the model. I have tried using .html() or .append(), but both methods have failed.
I have provided the key portions of the code for your reference. Thank you again for your assistance.
AJAX Component:
$.ajax(
{
type: "POST",
url: url,
data: {
'username': username,
'password': password
},
dataType: 'json',
success: function(data){
$('#login-form')[0].reset();
if (data.ret != '1107'){
var htmlcode ="<p> data.info </p>";
$('#modal').find('.error_message1').append(htmlcode);
}
},
error: function (data) {
console.log('An error occurred.');
console.log(data);
},
});HTML Component:
<div class="modal fade" id="modal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div id="form-modal-body" class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>EXP LOGIN</h4>
<form role="form" action="{% url 'auth_login' %}" method="post" id="login-form">
{% csrf_token %}
<ul>
<li>
<div class="g-icon"><i class="iconfont icon-yonghu"></i></div>
<input type="text" name="username" id="username" value="" placeholder="User name" />
</li>
<li>
<div class="g-icon"><i class="iconfont icon-mima"></i></div>
<input type="password" name="password" id="password" value="" placeholder="Password" onblur="check1()" />
<div class="g-cue" id="error_message1">Your email or password was entered incorrectly.</div>
</li>
</ul>
<div class="g-btn">
<input class="g-submit" id='login-button' type="submit" value="{% trans 'Log in' %}" />
<input type="hidden" name="next" value="{{ next }}" />
</div>
<p><span>{% trans "Not a member?" %} <a href="{% url 'registration_register' %}">Join now.</a></span></p>
</form>
</div>
</div>
</div>
</div>