Discussion :

[rockso]

Bonjour, mon objectif est le suivant :
Lors de l'execution d'un script (qui peut prendre du temps), il faut que les liens hypertextes soient bloqués, ainsi que signaler à l'utilisateur qu'un traitement est en cours (modifier le pointeur de la souris, etc...)

j'ai écrit les fonctions bloquer(objet) et debloquer(objet) qui activent/désactivent le lien "objet" et ça marche

Maintenant, je voudrais qu'au lieu de définir le lien à modifier, les fonctions s'appliquent à tous les liens hypertexte de la page et ce pour empêcher l'utilisateur de changer de page pendant l'exécution d'un script (je l'ai mit sur des boutons pour l'instant)

voici les codes :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="bloquer.js"></script>
PAGE 1
</br>
<a href="page2.html" id="p2">page 2</a>
</br>
<a href="page3.php" id="p3"> page 3 </a>
</br>
<a href="testmysql.php" id="testmysql"> testmysql </a>
</br>
<button onclick="bloquer(p2);"> BLOQUER </button> 
<button onclick="debloquer(p2);"> DEBLOQUER</button>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function bloquer(objet){ 
	var href;
	href    = (objet.nodeName.toLowerCase() == 'a') ? objet.getAttribute("href") : null;
	if(href && href != null){
		objet.setAttribute("href_back", href);
		objet.removeAttribute("href");
	}
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function debloquer(objet){
	var href;
	href= objet.getAttribute("href_back");
	if(href && href != null){
			objet.setAttribute("href", href);
	}
}

merci de votre aide

[Spartacusply]

En javascript, ça me paraît compliqué, mais si l'utilisation de jquery ne t'es pas interdite en tout cas c'est hyper simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$('a').click(function() {
      return false;
});

[Bovino]

En javascript, ça me paraît compliqué

Non, pas particulièrement en fait, mais il faut faire soi-même la boucle sur tous les éléments souhaités (ici, les balises <a>) que jQuery fait en interne.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var $liens = document.getElementsByTagName('a'), nbLiens = $liens.length;
while(nbLiens--){
    $liens[nbLiens].onclick = function(){
        return false;
    }
}

Alors c'est sûr qu'on a trois ou quatre lignes de code en plus, mais on économise toutes celles de jQuery.

[rockso]

J'ai téléchargé et placé la bibliothède jquery avec mes autres fichiers

j'ai donc ceci qui marche bien c'est ce que je voulais faire:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function bloquer2(){
$('a').click(
		function() {
			return false;
	});
}

la syntaxe est particulière je trouve

Aussi, je dois maintenant faire la fonction inverse qui soit réactive tous les liens ou annule bloquer2()

j'ai essayé avec return true, fonction vide, ou pas de paramètre dans click, cela ne semble pas être la manière de faire
Mes compétences en js sont très limitées
--

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var $liens = document.getElementsByTagName('a'), nbLiens = $liens.length;
while(nbLiens--){
    $liens[nbLiens].onclick = function(){
        return false;
    }
}

ce code me conviendrait aussi, il faudrait que je sache faire l'inverse dans une autre fonction


Merci

[Spartacusply]

C'est normal, car ta première fonction (qui retourne false) est toujours exécutée même après avoir déclaré une autre fonction au click. Il est nécessaire de "détacher" l'évènement pour pouvoir le réécrire entièrement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
    function debloquer() {
        $('a').unbind("click");
        $('a').click(
                function() {
                    return true;
                });
    }

[rockso]

Merci, cela fonctionne bien.




Sinon, est ce possible d'agir sur le pointeur de la souris, faire en sorte qu'il passe en mode "chargement", ou autre
j'ai déjà mis des alert() pour prévenir les utilisateurs (en début de fonctions et lors d'un clic sur un lien bloqué), mais j'aimerais que l'exécution du traitement se voit facilement

merci !

[Spartacusply]

Oui en faisant ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function bloquer2(){
$('a').click(
		function() {
			return false;
	});
$('body *').css('cursor','wait!important');
}

Et en oubliant pas le sens inverse lorsque c'est terminé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('body *').css('cursor','default');

[rockso]

La console javascript ne trouve pas d'erreur mais le curseur reste identique

Edit : $('body *').css('cursor','wait'); met le curseur en forme de rond (comme quand un programme crash sur 7), cependant cela ne fonctionne que lorsque je survole les 2 boutons, et non la page toute entière

EDIT2 : non en fait ça fonctionne sur tous les élements cliquables, ce qui m'intéresse au final, mais wait!important ne fonctionne pas

merci beaucoup pour ton aide

On vient de me demander de faire la même chose avec les boutons, l'ennui c'est que je ne sais pas faire et je pense qu'en supprimant l'action du 'onclick' on ne puisse la rétablir après

de toute façon ça ne fonctionne pas :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

$('blo').setAttribute("onclick", function() { return false; });

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button id='blo'onclick="bloquerLiens();"> BLOQUER LES LIENS</button>

Code erreur :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Uncaught TypeError: undefined is not a function bloquerLiens.js:21
debloquerLiens bloquerLiens.js:21
onclick

[NoSmoking]

Bonjour,

var $liens = document.getElementsByTagName('a')

pourquoi ne pas utiliser la collection document.links disponible

On vient de me demander de faire la même chose avec les boutons...

regarde en fait si l'application d'une DIV sur toute ta page, avec une légère opacité, ne serait pas préférable et plus facile à gérer !

...je pense qu'en supprimant l'action du 'onclick' on ne puisse la rétablir après

dans ce cas il te faut la sauvegarder avant de la modifier.

[SylvainPV]

Comme l'a dit NoSmoking, il y a un moyen beaucoup plus propre de faire ça : utiliser un overlay. Un <div> qui recouvre toute la page avec un z-index très élevé. Tous les clics atteignent cet overlay et non les liens en arrière-plan. D'ailleurs, bien souvent, cet overlay est un peu opaque et contient un message indicateur à l'utilisateur du genre "Veuillez patienter".

[arnogues]

Il y a aussi une solution propre, mais qui bloquera les liens mais pas les events des liens, c'est de simplement mettre un event.preventDefault() sur l'event click de document.documentElement ou document.body

[rockso]

Pour finir je n'ai pas eu besoin de bloquer les boutons

voici mes fonctions pour ceux que ça pourrait interesser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function bloquerLiens(){
	alert("Les liens hypertextes seront désactivés le temps du traitement");
	$('a').css('color','lightgray');
	$('a').css('text-decoration','none');
	$('a').click(function() {
 
					alert("Les liens sont désactivés, un traitement est en cours");
					return false; 
				});
	$('body *').css('cursor','wait');
	$('blo').setAttribute('onclick', function() { return false; });
}
 
function debloquerLiens(){
	alert("Traitement terminé, les liens sont réactivés");
 
	$('a').css('color','default');
	$('a').css('text-decoration','default');
	$('a').unbind("click");
	$('a').click(function(){});
	$('body *').css('cursor','default');
	$('blo').setAttribute("onclick", function() { return true; });
}

merci !