Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.05.2015, 17:10
Аспирант
Отправить личное сообщение для user_name Посмотреть профиль Найти все сообщения от user_name
 
Регистрация: 05.11.2014
Сообщений: 40

Как заменить DOM элемент
Добрый день,
Вопрос. Как можно заменить один элемент на другой при клике на первый? Проблема. У меня есть кнопка с атрибутом onclick при нажатии на нее срабатывает функция js в этой функции выполняется ajax запрос на сервер, после чего страница обновляется и с помощью смарти неважно каким образом выполняется другая ветвь условия, вобщем в результате отображается другой dom элемент, такая же кнопка только с другими стилями и другой функцией в onclick. И вот все работает хорошо, если не пытаться кликать на эту кнопку очень быстро и много раз, потому что страница не успевает обновиться, что бы заменить элемент и получается я вызываю несколько раз функцию на onclikе.
Ответить с цитированием
  #2 (permalink)  
Старый 22.05.2015, 18:25
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,719

А зачем кликать быстро и много раз? Если непонятно что началась загрузка - сделайте чтобы было понятно. Например поменяйте курсор на часики. Кроме того можно завести переменную типа loading=false и делать ее true перед отправкой запроса предварительно проверив не тру ли она. В колбеке на получение ответа сбрасывать на фолс.
Ответить с цитированием
  #3 (permalink)  
Старый 22.05.2015, 18:28
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,719

var loading=false,
    load = function(){
  if(!loading){
     /* подготовка */
      loading=true;
  }
},
var onload=function(e){
   if(e){
     /* обработка */
     loading=false;
   }
};


onclick="load"
Ответить с цитированием
  #4 (permalink)  
Старый 22.05.2015, 18:59
Аспирант
Отправить личное сообщение для user_name Посмотреть профиль Найти все сообщения от user_name
 
Регистрация: 05.11.2014
Сообщений: 40

Цитата:
А зачем кликать быстро и много раз?
Не за чем, но это приводит к ошибке.
Цитата:
Кроме того можно завести переменную типа loading=false и делать ее true перед отправкой запроса предварительно проверив не тру ли она. В колбеке на получение ответа сбрасывать на фолс.
Спасибо, идея понятна, но все же, как я могу полностью заменить dom элемент при клике? Если мне нужно это сделать без перезагрузки страницы, что бы визуально поменялся элемент.
Ответить с цитированием
  #5 (permalink)  
Старый 22.05.2015, 19:33
Аспирант
Отправить личное сообщение для Endy Посмотреть профиль Найти все сообщения от Endy
 
Регистрация: 15.05.2015
Сообщений: 41

user_name,
http://jsfiddle.net/autv85qw/1/
Ответить с цитированием
  #6 (permalink)  
Старый 22.05.2015, 21:48
Аватар для Poznakomlus
Профессор
Отправить личное сообщение для Poznakomlus Посмотреть профиль Найти все сообщения от Poznakomlus
 
Регистрация: 13.03.2013
Сообщений: 1,288

<input type="button" onclick="this.disabled='true';/*You function()*/" value="ClickMe">
Ответить с цитированием
  #7 (permalink)  
Старый 22.05.2015, 23:16
Аспирант
Отправить личное сообщение для user_name Посмотреть профиль Найти все сообщения от user_name
 
Регистрация: 05.11.2014
Сообщений: 40

Через replaceWith заменить элемент получается но как в этом элементе в атрибуте onclick прописать функцию с нужными параметрами.

Вот у меня есть две кнопки, выводится одна в зависимости от того что возвращает сервер. Параметры в эти две функции передаются одинаковые.
<button id="id_1" onclick="func1('{$param1}', '{$param2}')">Подписаться</button>
<button id="id_2" onclick="func2('{$param1}', '{$param2}')">Отписаться</button>


function func1(param1, param2) {
	$.ajax({
		url: "/ajax/",
		type: "POST",
		data: ({передаю данные}),
		dataType: "html",
		success: function() {
                        // Нужно что бы в этом элементе был onclick с функцией func2 и параметрами param1 и param2
			$('#id_1').replaceWith('<button id="id_2">Отписаться</button>');
		}
	});
}


Функция func2 аналогична. Вобщем нужно заменять эти две кнопки друг на друга при клике, сохраняя вызов функции. Чтобы сервер отработал.
Ответить с цитированием
  #8 (permalink)  
Старый 23.05.2015, 01:21
Аватар для Poznakomlus
Профессор
Отправить личное сообщение для Poznakomlus Посмотреть профиль Найти все сообщения от Poznakomlus
 
Регистрация: 13.03.2013
Сообщений: 1,288

Хочется, чтобы вы сами нашли решение
Кнопку то может и не зачем заменять
<input type="button" value="Добавить" id="test">
<script>
    window.onload = function () {
        document.getElementById('test').onclick = function () {
            this.value = ['Добавить','Удалить'][this.state = this.state >>> 0 ? 0 : 1];
//демонстрация в консоли
            if(this.state){
                console.log('Добавить');
            }else{
                 console.log('Удалить');
            }
        };
    };
</script>

Последний раз редактировалось Poznakomlus, 23.05.2015 в 01:41.
Ответить с цитированием
  #9 (permalink)  
Старый 23.05.2015, 12:14
Аспирант
Отправить личное сообщение для user_name Посмотреть профиль Найти все сообщения от user_name
 
Регистрация: 05.11.2014
Сообщений: 40

Poznakomlus
Цитата:
Хочется, чтобы вы сами нашли решение
Я не силен в js, поэтому сложно найти правильное решение
Но с вашей помощью у меня получилось сделать то что мне нужно, правда каким то извращенным способом.
Цитата:
Вот у меня есть две кнопки, выводится одна в зависимости от того что возвращает сервер. Параметры в эти две функции передаются одинаковые.
<input type="button" onclick="func1('{$param1}', '{$param2}')" class="style1" value="Подписаться" id="test">
<input type="button" onclick="func2('{$param1}', '{$param2}')" class="style2" value="Отписаться" id="test">


Если сервер выдал первую кнопку "Подписаться" то при клике на нее визуально меняю кнопку на "Отписаться" и отправляю запрос на сервер для подписки. При клике на "Отписаться" выполняются обратные действия. Если обновить страницу то сервер выдаю нужную кнопку. Все работает, но можно сделать как то проще?
function func1(param1, param2) {
					var element = document.getElementById('test');
					
					element.value = ['Подписаться','Отписаться'][element.state = element.state >>> 0 ? 0 : 1];
					 if(element.state){
                                                // Меняю стиль
					 	element.removeAttribute('class');
						element.setAttribute('class', 'style2');
						addFollow(param1, param2);
					 }else{
					 	element.removeAttribute('class');
						element.setAttribute('class', 'style1');
						subFollow(param1, param2);
					 }
  			 	 };

function func2(param1, param2) {
					var element = document.getElementById('test');
					
					element.value = ['Отписаться','Подписаться'][element.state = element.state >>> 0 ? 0 : 1];
					 if(element.state){
					 	element.removeAttribute('class');
						element.setAttribute('class', 'style1');
						addFollow(param1, param2);
					 }else{
					 	element.removeAttribute('class');
						element.setAttribute('class', 'style2');
						subFollow(param1, param2);
					 }
  			 	 };


function subFollow(param1, param2) {
$.ajax({
		url: "/ajax/",
		type: "POST",
		data: ({...}),
		dataType: "html"
	});
}

function addFollow(param1, param2) {
	$.ajax({
		url: "/ajax/",
		type: "POST",
		data: ({...}),
		dataType: "html"
	});
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как перевести фокус на следующий элемент? Shitbox2 jQuery 3 03.11.2012 14:57
Как загрузить JavaScript после создание DOM? Jeremen Общие вопросы Javascript 6 24.08.2012 21:54
Как в браузерах реализуются функции DOM (например createElement) iamme Общие вопросы Javascript 7 02.09.2011 20:26
Как добавить элемент в XML через DOM используя PHP? bayah Серверные языки и технологии 6 11.08.2010 13:33
Навигация внутри DOM. Как это сделать нормально? master_alf Events/DOM/Window 10 09.04.2010 10:18