Forum PHP.pl > [JavaScript]Zablokować button na 5 sekund

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Zablokować button na 5 sekund

matis95

17.01.2011, 20:15:19

Witam. Czy da się zablokować możliwość kliknięcia w button na 5s tzn. kliknę w button raz, i drugi raz mogę dopiero za 5s. Moja strona po kliknięciu w button się nie odświeża, bo ładuje treść do diva za pomocą jQuery.

ADeM

17.01.2011, 20:22:39

[HTML] pobierz, plaintext 
$(submitButton).attr("disabled", "disabled"); // To disable
$(submitButton).removeAttr("disabled"); // To enable
[HTML] pobierz, plaintext

kalmaceta

17.01.2011, 20:30:34

jeśli chodzi o czasy zakończonych poprzednich operacji najlepiej callback function użyć, jeśli konkretnie o 5 sek. setTimeout

matis95

17.01.2011, 21:03:58

Chciałbym, aby jeśli kliknie się szybciej niż w czasie 5s od poprzedniego kliknięcia to wyświetlał się alert.

markonix

17.01.2011, 21:19:11

Na wyłączonym (disabled) buttonie nie wywołasz akcji kliknięcia więc albo to albo to.

matis95

17.01.2011, 21:28:44

Ale chciałbym aby ten button był włączony i po naciśnięciu wywołuje funkcję. Jeśli naciśniemy drugi raz, a nie minie 5s to wyświetla alert, a jeśli minęło 5s to ponownie wykonuje funkcję.
Moja funkcja to

Kod

$('#result').load('ściezka');

kalmaceta

17.01.2011, 21:35:49

w onclicku buttona:

[JAVASCRIPT] pobierz, plaintext 
if ($('#buttonik').attr('rel') == 'klik'){
 alert('bylo');
 return false;
} else {
 $('#buttonik').attr('rel','klik');
 $('#buttonik').css('color','grey'); //wyszarzenie
 
 // tutaj rob co chesz
 windows.setTimeout((function (){$('#buttonik').attr('rel','ok');}),5000);
}
[JAVASCRIPT] pobierz, plaintext

matis95

17.01.2011, 22:16:58

Dzięki. Działa. Ale musiałem usunąć windows przed setTimeout bo nie działało. Dodałem jeszcze

Kod

$('#buttonik').css('color','black')

aby po 5s napis buttona znów robił się czarny.

Dla przyszłych pokoleń

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Title</title>
<script type="text/javascript" src="javascript/jquery.js"></script> 
<script type="text/javascript"> 
<!--
function action()
{
if ($('#buttonik').attr('status') == 'locked'){
	alert('Musisz odczekać 5 sekund');
	return false;
} 
else {
	$('#buttonik').attr('status','locked');
	$('#buttonik').css('color','grey');
	//kod do wykonania
	setTimeout((function(){$('#buttonik').attr('status','unlocked'); $('#buttonik').css('color','black');}),5000);
}
}
-->
</script>
</head>
<body>
<input type="submit" value="klik" onclick="action()" id="buttonik" />
</body>
</html>
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.