Мне снова нужна ваша помощь...
У меня есть разворачивающие динамически списки, скрины будут...
Например, нужно добавить в этот список какое-то поле.
Если делать это без обновления странички, то данные добавляются, но на страничке не появляются, причиною тому становится то, что страничка не перезагружается. Если перезагружать страничку, то списки сворачиваются :-(
Сохранить позиции раскрытых строк не вариант... их может быть много и может быть несколько уровней вложений. Как реализовать добавление без перезагрузки, но с частичной догрузкой странички, без свертывания подуровней? Или изменение.. Тоже самое.. Оно меняется, но после перезагрузки, но тут проще.. В поле вывода подставить нужное нам id, которое после успешного изменения обновить средствами jquery.
JQuery
Код (+/-)
<script>
function AjaxFormRequest(result_id,formMain,url) {
jQuery.ajax({
url: url,
type: "POST",
dataType: "html",
data: jQuery("#"+formMain).serialize(),
success: function(response) {
document.getElementById(result_id).innerHTML = response;
},
error: function(response) {
document.getElementById(result_id).innerHTML = "<p>Виникла помилка при додавані типу, спробуйте пізніше!</p>";
}
});
$(':input','#formMain')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
}
</script>
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<meta name="description" content=""/>
<meta name="Keywords" content=""/>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="form">
<div id="messegeResult">
<p> Оставьте ваши контакты и наш консультант свяжется с вами </p>
</div>
<div id="messegeResult2">
<p> Оставьте ваши контакты и наш консультант свяжется с вами </p>
</div>
<form method="post" action="" id="formMain" name="formMain">
<input id="name" type="text" name="name" placeholder="Введите ваше имя" maxlength="30" autocomplete="off" required/>
<input id="telephone" type="Tel" name="telephone" placeholder="Введите ваш телефон" maxlength="30" autocomplete="off" required/>
<input id="button" type="button" value="Заказать обратный звонок" onclick="AjaxFormRequest('messegeResult', 'formMain', 'index.php/types2')"/>
</form>
<form method="post" action="" id="formMain2" name="formMain">
<input id="name_last" type="text" name="name_last" placeholder="Введите ваше имя" maxlength="30" autocomplete="off" required/>
<input id="telephone_last" type="Tel" name="telephone" placeholder="Введите ваш телефон" maxlength="30" autocomplete="off" required/>
<input id="button_last" type="button" value="Заказать обратный звонок" onclick="AjaxFormRequest('messegeResult', 'formMain2', 'index.php/types2')"/>
</form>
</div>
</div>
</body>
</html>
Изменить еще как-то понятно... поле обновить на страничке и норм, ну вот что делать с добавлением и удалением, если за один заход без перезагрузки может быть десяток изменений, добавление и удаление.
UJIN, где то дома было, если найду дам
UJIN, похоже не найду, там не сложно, я переделывал добавление поля при загрузке файлов, нагуглить не сложно
оно то может и не сложно
в принципе я представляю логику того, как доставать, но знаний в java script"е никаких и пока ничего так и не получилось
главная задача, как понимаю, сохранить положение на странице и сохранить состояние открытых списков структуры
пока в голову приходит сохранение в сессиях или в get еще можно
UJIN, Верстку покажи. Блока, который нужно добавить и контейнера, в который добавлять.
точно! что если обновлять тот блок, в который нужно добавлять :-)
должно заработать...
не получается у мну :-(
оформить по-другому придумал как
но скажем.. есть форма
<form id="myFormAdd">
<div class="modal-body">
<div class="input-group">
<div style="width: 30%" class="input-group-addon">Посада</div>
<input type="text" name="number" class="form-control input-sm" id="exampleInputAmount" placeholder="Введіть посада">
</div>
<div class="input-group">
<div style="width: 30%" class="input-group-addon">Прізвище</div>
<input type="text" name="number" class="form-control input-sm" id="exampleInputAmount" placeholder="Введіть прізвище">
</div>
<div class="input-group">
<div style="width: 30%" class="input-group-addon">Ім'я</div>
<input type="text" name="number" class="form-control input-sm" id="exampleInputAmount" placeholder="Введіть ім'я">
</div>
<div id="myTab" style="padding: 6px" class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group right" role="group">
<button type="submit" name="submit" class="btn btn-primary">Додати співробітника</button>
</div>
</div>
<hr/>
<div id="workers"></div> // блок для заполнения
</div>
<hr/>
<div id="myTab" style="padding: 6px" class="btn-group btn-group-justified" role="group" aria-label="...">
<input type="submit" class="btn btn-info" onclick="show_messages()" value="Закрити">
</div>
</form>
UJIN, <form method="post" action="" id="formMain" name="formMain">
<input id="name" type="text" name="name" placeholder="Введите ваше имя" maxlength="30" autocomplete="off" required/>
<input id="telephone" type="Tel" name="telephone[]" placeholder="Введите ваш телефон" maxlength="30" autocomplete="off" required/>
// сюда подгружать инпуты name="telephone[]"
<input id="button" type="button" value="Заказать обратный звонок" onclick="AjaxFormRequest('messegeResult', 'formMain', 'index.php/types2')"/>
</form>
хм, уже устал искать ошибку. есть следующий код
<ul class="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">Галарея</a></li>
<li><a href="#">Статьи</a></li>
<li><a href="#">Гостевая книга</a></li>
</ul>
<script>
if(window.history.length > 0){
var menu = document.getElementsByClassName('menu');
console.log(menu);
menu.appendChild(
document.createTextNode(
'<li><a onclick="window.history.go(-1);">Назад</a></li>'
));
</script>
Но новый элемент не добавляется. Выводится ошибка
menu.appendChild is not a function
В чем у меня ошибка? Я уже кучу вариантов перепробовал, оборачивал в функцию и вешал на body onload .. Не работает
Был ещё такой вариант
<script>
if(window.history.length > 0){
var li = document.createElement('li');
li.innerHTML = '<a onclick="window.history.go(-1);">Назад</a>';
var menu = document.getElementsByClassName('menu');
menu.appendChild(li);
}
</script>
попробуй
menu[0].appendChild(
document.createTextNode(
'<li><a onclick="window.history.go(-1);">Назад</a></li>'
));
