| |
|
|
| | Здравствуйте!
По кнопке "заказать" должен отправляться ajax запрос на сервер, он отправляется и обрабатывается, все ок, но после выполнения $result.html(str[0]); скролл в браузере поднимается на самый верх!
Ф-ия отправки:
<script type="text/javascript">
function run_script(myj) {
var $result = $("#kkl"+myj);
$.ajax({
type: "POST", // - методом POST.
data: { // - получаем значения полей, данные.
"j": myj,
"min": $(\'#zap\'+myj).val()
},
dataType: "html", // - тип HTML.
url: "get_ajax.php", // - скрипт PHP.
beforeSend: function() {
// Перед отправкой выведем уведомление:
// $result.html("<div>Подождите...</div>");
},
success: function(data) {
// $result.html(data); // - выполнено.
var str = data.split("^");
$result.html(str[0]);
},
});
}
</script>
|
Подскажите, может быть нужно что-то где-то дописать? Или например отправлять на сервер еще параметр вертикального скролла и потом скроллить на то же место... Уместно ли это здесь? И если да, то как это лучше реализовать? | |
| |
|
|
| |
|
|
| |
для: Sharax
(19.09.2014 в 14:39)
| | | - | |
| |
|
|
| |
|
|
| |
для: Sharax
(19.09.2014 в 14:39)
| | | Сделал так:
<script type="text/javascript">
function scrolldown(sc)
{
window.parent.scrollTo(0,sc);
return false;
}
function run_script(myj) {
var $result = $("#kkl"+myj);
var myposTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
$.ajax({
type: "POST", // - методом POST.
data: { // - получаем значения полей, данные.
"nam": $(\'#nam\'+myj).val(),
"distrib": $(\'#distrib\'+myj).val(),
"j": myj,
"up": $(\'#up\'+myj).val(),
"zap": $(\'#zap\'+myj).val(),
"cen": $(\'#cen\'+myj).val(),
"min": $(\'#zap\'+myj).val(),
"zc": $(\'#zc\'+myj).val()
},
dataType: "html", // - тип HTML.
url: "get_ajax.php", // - скрипт PHP.
beforeSend: function() {
// Перед отправкой выведем уведомление:
// $result.html("<div>Подождите...</div>");
},
success: function(data) {
// $result.html(data); // - выполнено.
var str = data.split("^");
$result.html(str[0]);
scrolldown(myposTop);
},
});
}
</script>
|
Экран дергается наверх и вниз теперь | |
| |
|
|
| |
|
|
| |
для: Sharax
(19.09.2014 в 15:28)
| | | Само по себе прокручивание страницы не произойдет, так что сперва ищите в коде причину ее. А то что дергается теперь после добавления, это доказательство этому, ибо есть метод который вверх крутит, а вы теперь в обратном направлении заставляете это делать. Анализируйте код.
А вообще, если jQuery, то прокрутка в нем:
//возвращает объект для скролла document
$.fn.doc = function(){
return this.map(function(){
var e = this,
isWin = !e.nodeName || $.inArray( e.nodeName.toLowerCase(), ['html','body'] ) != -1;
if(!isWin) return e;
var doc = (e.contentWindow || e).document || e.ownerDocument || e;
return /webkit/i.test(navigator.userAgent) || doc.compatMode == 'BackCompat' ? doc.body : doc.documentElement;
});
};
$(function() {
//после загрузки страницы определить документ скроллинга
wnd = $(window).doc();
//теперь можно корректно производить скроллинг в различных браузерах, включая анимацию
//прокрутить страницу в начало
wnd.animate({scrollTop:0}, speed);
});
|
| |
| |
|
|
| |
|
|
| |
для: confirm
(19.09.2014 в 16:03)
| | | Да, действительно, если создать голую страницу с кодом запроса то не крутит наверх.. Только вот как теперь найти причину? Которая крутит его... | |
| |
|
|
| |
|
|
| |
для: Sharax
(19.09.2014 в 16:14)
| | | Ну как, анализируйте код, ищите метод/функцию, которая это делает. | |
| |
|
|
| |
|
|
| |
для: confirm
(19.09.2014 в 16:19)
| | | У меня есть пустой пример где все работает и такой-же, но там скролл поднимается наверх, смотрите
1. (тут все работает)
<html>
<head>
<meta charset="utf-8">
<title>JQuery + Ajax + PHP</title>
<script src="jq.js"></script>
<script type="text/javascript">
function run_script() {
var $result = $("#status");
$.ajax({
type: "POST", // - методом POST.
data: { // - получаем значения полей, данные.
"area_1": $('#area_1').val(),
"area_2": $('#area_2').val()
},
dataType: "html", // - тип HTML.
url: "get_ajax.php", // - скрипт PHP.
beforeSend: function() {
// Перед отправкой выведем уведомление:
$result.html('<div>Подождите...</div>');
},
success: function(data) {
// $result.html(data); // - выполнено.
var str = data.split("^");
$result.html(str[0]);
},
});
}
</script>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container-fluid">
<div class="row-fluid">
<div id="status"> </div>
<form method="post" action="get_ajax.php">
<input type=text id="area_1" name="area_1"><br>
<input type=text id="area_2" name="area_2"><br>
<input type="button" value="Запустить пример!" onclick="run_script()">
</form>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
|
2. а тут скролл скроллится наверх
<html>
<head>
<script src='jq.js'></script>
<script type="text/javascript">
function run_script() {
var $result = $("#kkl1");
$.ajax({
type: "POST", // - методом POST.
data: { // - получаем значения полей, данные.
"kolvo": $('#k1_kolvo').val()
},
dataType: "html", // - тип HTML.
url: "get_test_ajax.php", // - скрипт PHP.
beforeSend: function() {
// Перед отправкой выведем уведомление:
// $result.html("<div>Подождите...</div>");
},
success: function(data) {
// $result.html(data); // - выполнено.
var str = data.split("^");
if (str[0] == "error1") {alert("Некорректно заполнено поле кол-во товара!");}
else
{
$result.html(str[0]);
}
},
});
}
</script>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input type=text id='k1_kolvo'>
<div id=kkl1>
<a href='#' onclick='run_script()'>заказать</a>
</div>
<br><br><br><br><br><br><br>
</body>
</html>
|
Почему так во втором??? | |
| |
|
|
| |
|
|
| |
для: Sharax
(19.09.2014 в 17:02)
| | | Всё, я идиот, я понял, срабатывало a href при вызове ф-ии | |
| |
|
|
| |
|
|
| |
для: Sharax
(19.09.2014 в 17:33)
| | | Это не href, а якорь на странице, именно из-за # этого и происходит переход на первый якорь на странице.
А вот первый пример тоже полный бардак, как собственно и второй тоже, а должно быть типа:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$('form').submit(function() {
var $result = $("#kkl1");
$.ajax({
type: "POST", // - методом POST.
data: { // - получаем значения полей, данные.
this.serializeArray() //вот так надо получать данные формы
},
dataType: "json", // есть JSON, это гораздо лучше чем split("^")
url: "get_test_ajax.php", // - скрипт PHP.
beforeSend: function() {
},
success: function(data) {
// $result.html(data); // - выполнено.
var str = data.split("^"); //здесь лучше JSON, а не split("^")
if (str[0] == "error1") {alert("Некорректно заполнено поле кол-во товара!");}
else $result.html(str[0]);
}
});
return false; //прерывать надо отправку формы
});
});
</script>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container-fluid">
<div class="row-fluid">
<div id="status"> </div>
<form> <!-- не нужно здесь ни method="post" action="get_ajax.php", отправляет Ajax-->
<input type=text id="area_1" name="area_1"><br>
<input type=text id="area_2" name="area_2"><br>
<input type="button" value="Запустить пример!" />
</form>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
| |
| |
|
|
