I would like to create login with django in popup modal window.
For login/registration I use package django-registration-redux, for popup modal window i use jquery form plugin.
In the older version of django-registration-redux everything worked, but now I don't know why it is not working.
My JS code:
function initModalWindowPage() {
$('a.modal-form-link').click(function(event) {
var link = $(this);
$.ajax({
'url': link.attr('href'),
'dataType': 'html',
'type': 'get',
'success': function(data, status, xhr) {
if (status != 'success') {
return false;
}
var modal = $('#myModal'),
html = $(data),
form = html.find('#content-column form');
modal.find('.modal-title').html(html.find('#content-column h2').text());
modal.find('.modal-body').html(form);
initModalWindowForm(form, modal);
modal.modal({
'keyboard': false,
'backdrop': false,
'show': true
});
},
});
return false;
});
}
function initModalWindowForm(form, modal) {
form.ajaxForm({
'dataType': 'html',
'error': function() {
return false;
},
'success': function(data, status, xhr) {
var html = $(data),
newform = html.find('#content-column form');
modal.find('.modal-body').html(html.find('.alert'));
if (newform.length > 0) {
modal.find('.modal-body').append(newform);
initModalWindowForm(newform, modal);
} else {
setTimeout(function() {
location.reload(true);
}, 500);
}
}
});
}
$(document).ready(function() {
initModalWindowPage();
});
base.html:
<a class="modal-form-link" href="{% url 'login' %}">{% trans "Login" %}</a>
...
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>