Вы можете легко сделать это с помощью перехода CSS . Сначала вы поворачиваете непрозрачность полей до 0, а затем вы заменяете содержимое, и вы снова создаете поля.
Для этого сначала оберните поля проекта:
Добавьте следующий код CSS:
И затем добавьте перед change:
var project = document.querySelector('#project');
project.style.opacity = 0;
И после него:
project.style.opacity = 1;
Последним javascript будет:
/**
* Constructor function for Projects
*/
function Project(name, description, img) {
this.name = name;
this.description = description;
this.img = img;
}
// An array containing all the projects with their information
var projects = [
new Project('Project 1', 'Project 1 Description', 'http://bit.ly/1E0IzpX'),
new Project('Project 2', 'Project 2 Description', 'http://bit.ly/1FHLGOt'),
new Project('Project 3', 'Project 3 Description', 'http://bit.ly/1H5wRt7'),
new Project('Project 4', 'Project 4 Description', 'http://bit.ly/1ECIQht'),
new Project('Project 5', 'Project 5 Description', 'http://bit.ly/1CYeY9F')
];
// Cacheing HTML elements
var project = document.querySelector('#project');
var projName = document.querySelector('#proj_name');
var projDescr = document.querySelector('#proj_description');
var projImg = document.querySelector('#proj_img');
var projButton = document.querySelector('#proj_switcher');
// Index of the current project being displayed
var projIndex = 0;
projButton.addEventListener('click', function() {
// Fade out
project.style.opacity = 0;
// Wait for the transition
setTimeout(function(){
// Load new content
projName.innerHTML = projects[projIndex].name;
projDescr.innerHTML = projects[projIndex].description;
projImg.src = projects[projIndex].img;
projImg.style.width = '250px';
projImg.style.height = '150px';
projIndex = (projIndex + 1) % projects.length;
// Fade in
project.style.opacity = 1;
},500);
});
Вы можете попробовать его здесь: https://jsfiddle.net/9c4mx7p9/
Версия с CSS-классами: https://jsfiddle.net/y4p1y0ch/
Во-первых, ваше определение URL вообще не принимает никаких параметров. Если вы хотите, чтобы параметры передавались из URL в представление, вам нужно определить их в urlconf.
Во-вторых, совершенно не ясно, что вы ожидаете от словаря clean_data. Не забывайте, что вы не можете перенаправлять на POST - это ограничение HTTP, а не Django - поэтому ваши очищенные данные должны быть либо параметром URL (ужасно), либо, что немного лучше, серией параметров GET - таким образом, URL будет иметь вид:
/link/mybackend/?field1=value1&field2=value2&field3=value3
и так далее. В данном случае поле1, поле2 и поле3 не включены в определение URLconf - они доступны в представлении через request.GET
.
Таким образом, ваш urlconf будет:
url(r'^link/(?P<backend>\w+?)/$', my_function)
и представление будет выглядеть так:
def my_function(request, backend):
data = request.GET
и обратное представление будет (после импорта urllib
):
return "%s?%s" % (redirect('my_function', args=(backend,)),
urllib.urlencode(form.cleaned_data))
Отредактировано после комментария
Весь смысл использования redirect и reverse, как вы делали, заключается в том, что вы обращаетесь к URL - он возвращает Http-код, который заставляет браузер перенаправить на новый URL, и вызываете его.
Если вы просто хотите вызвать представление из вашего кода, просто сделайте это напрямую - нет необходимости использовать реверс вообще.
При этом, если все, что вы хотите сделать, это сохранить данные, то просто поместите их в сессию:
request.session['temp_data'] = form.cleaned_data