Форум

kristow · #1 (**permalink**) 29.09.2015, 12:51

Всем привет!
Есть страница, которая имеет таблицу с кнопками в ячейках...
При нажатии на кнопку у меня открывается модальное окно. А после редактирования данных, страница перезагружается и показывает мне самое начало таблицы.

Таблица имеет 13 столбцов и около 100 строк (может больше).

Короче после сохранения данных, приходится листать страницу чтобы найти ячейку с кнопкой, которая последний раз нажималась, чтобы нажать кнопку рядом.

Подскажите пожалуйста как можно сделать автоматический поиск ячейки с кнопкой, которая нажималась последняя перед перезагрузкой страницы?

Модальное окно открывает javascript, он определяет кнопку по уникальному имени в классе.

Вот пример кода JS и самой кнопки:

$(document).on('click', '[class*="modal_btn-"]', function(){
			var id = '#small-modal-'+this.className.replace(/^.*modal_btn-([^\s]+).*?$/, '$1')
			$(id).arcticmodal();
        });

<td bgcolor="#FFFF00"><span class="btn btn-block btn-large btn-success modal_btn-18-9">456</span></td>
<td bgcolor="#FFFF00"><span class="btn btn-block btn-large btn-success modal_btn-19-9">123</span></td>

Вариант решения:

Думаю логичнее сохранять имя класса "modal_btn-19-9" в cookie перед перезагрузкой страницы, а после загрузки страницы прочитать и проверить параметр COOKiE и далее найти ту самую ячейку с кнопкой (перемотать страницу к той ячейке, чтоб она была в верхней части экрана, или по середине экрана по вертикали и подсветить цветом.) Когда ячейка нашлась, удалить параметр из куков, чтоб при ручной перезагрузке страницы выше описанное действие не выполнять...

Помогите пожалуйста примером, ну или хотя бы куда копать чтобы такое замутить

kristow · #2 (**permalink**) 29.09.2015, 13:42

Я частично решил свою задачу.
Вот такой код получается:

function scrollToElement(theElement) {
			var elem = theElement.replace("-", "a");
			if (typeof theElement === "string") theElement = document.getElementById(theElement);
			var selectedPosX = 0;
			var selectedPosY = 0;
			while (theElement != null) {
				selectedPosX += theElement.offsetLeft;
				selectedPosY += theElement.offsetTop;
				theElement = theElement.offsetParent;
			}
			window.scrollTo(selectedPosX, selectedPosY);
			document.getElementById(elem).style.background-color='#FF0000' ;
		}
//style="border-color:#FF0000; background-color:#FF0000"
scrollToElement('51-6');

Вот такой html код у меня:

<td id="51a6"><span id="51-6" class="btn btn-block btn-large btn-success modal_btn-51-6">С А .</span></td>

На строку с моей ячейкой я перехожу, но не могу применить стиль к td элементу. Подскажите что не так?

рони · #3 (**permalink**) 29.09.2015, 13:46

Сообщение от kristow

background-color

backgroundСolor

kristow · #4 (**permalink**) 29.09.2015, 14:00

не работает:

document.getElementById(elem).style.backgroundСolor='#FF0000' ;

Хотя при помощи alert(elem) выдал 51a6.

Что не правильно делаю?

рони · #5 (**permalink**) 29.09.2015, 14:11

kristow,
возможно ещё нет элемента на странице -- window.onload

рони · #6 (**permalink**) 29.09.2015, 14:13

kristow,

<!DOCTYPE HTML>

<html>

<head>
    <meta charset="utf-8">
    <title>Untitled</title>
    <script>
        window.onload = function() {
            var elem = "51a6";
            document.getElementById(elem).style.backgroundColor = '#FF0000'
        }
    </script>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>Title 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id="51a6"><span id="51-6" class="btn btn-block btn-large btn-success modal_btn-51-6">С А .</span></td>
            </tr>
        </tbody>
    </table>


</body>

</html>

kristow · #7 (**permalink**) 29.09.2015, 15:01

Спасибо, ваш пример работает, но у меня на странице нет.
Может проблема быть в использовании на странице jquery.min.js ?

В начале страницы вот такой код:

$(document).ready(function() {
		$(document).on('click', '.modal_btn', function(){
			$('#small-modal').arcticmodal();
		});
		$(document).on('click', '.modal_btn2', function(){ $('#small-modal2').arcticmodal(); });
		$(document).on('click', '.modal_btn-new', function(){ $('#small-modal-new').arcticmodal(); });
		$(document).on('click', '.modal_btn-del', function(){ $('#small-modal-del').arcticmodal(); });
		$(document).on('click', '.modal_btn-reset', function(){ window.location.reload() });
		$(document).on('click', '[class*="modal_btn-"]', function(){
			var id = '#small-modal-'+this.className.replace(/^.*modal_btn-([^\s]+).*?$/, '$1')
			var elem = id.replace("#small-modal-", "");
			//alert(elem);
			document.cookie = "mybutton="+elem+";path=/";
			$(id).arcticmodal();
        });

И еще вопрос:
я при вставки команды document.cookie = "mybutton=55-5;path=/"; получал запись в куках, которую ниже по коду читаю... А когда вставил в эту конструкцию, то alert работает, код тоже, а запись в куках не обновляется! ? Почему?

Форум

Справочник

Discord чат

Курсы javascript