Récupérer lien href dans la page

Version imprimable

13/05/2012, 21h54
seb-65

Récupérer lien href dans la page

Bonsoir,

J'ai une page HTML auquel j'ai intégré le menu suivant : http://jcrozier.developpez.com/tutor...enu-contextuel

Dans ma page HTML générée (JE NE PEUX pas modifier le code source, car généré par un programme auquel je n'ai pas accès!!); je voudrais récupérer la valeur du HREF via le menu contextuel.

Le programme génère un tableau html comprenant le nom du fichier + le lien.

En fait, lorsque je me place sur la ligne ou il y a le lien, je voudrais qu'avec le menu contextuel celui-ci me retourne le lien ou j'ai précédemment cliqué...

Je pense que cela est impossible car il faudrait implémenter un onclick... Mais malheureusement je ne peux pas :cry:

Possible ou pas ?

Merci
13/05/2012, 22h21
headmax

J'ai pas tout compris :cry: entre ce que tu as comme code source et ce que tu ne peux pas faire, ça rend d'autant plus difficile de te répondre objectivement.

Si tu pouvait montrer ton code source, ce que tu peux faire directement ou indirectement.

Voici la page HTML générée par l'appli :

Code:

1
2
3
4
5
6
 
<table>
<tr><td valign="top"><a href="tutu/"><img src="image.png" width="16" height="16" /></a></td><td><a href="tutu/">tutu/</a></td><td align="right">11-May-2012 11:41  </td><td align="right">  - </td></tr>
<tr><td valign="top"><a href="test/"><img src="image2.png" width="16" height="16" /></a></td><td><a href="test/">test/</a></td><td align="right">08-May-2012 14:33  </td><td align="right">  - </td></tr>
<tr><td valign="top"><a href="image_test.png"><img src="image1.png" width="16" height="16" /></a></td><td><a href="image_test.png">image_test.png</a></td><td align="right">04-May-2012 23:17  </td><td align="right">3.1K</td></tr>
</table>

J'ai ajouté une DIV pour intégrer le menu contextuel à la table :

Code:

1
2
3
4
5
6
 
<div id="myDiv">
<table>
..........
</table>
</div>

Je voudrais récupérer par exemple via le menu contextuel le lien de "image_test.png"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// Show menu when #myDiv is clicked
				$("#myDiv").contextMenu({
					menu: 'myMenu'
				},
					function(action, el, pos) {
					alert(
						'Action: ' + action + '\n\n' +
						'Element ID: ' + $(el).attr('id') + '\n\n' + 
						'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
						'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
						);
				});

A la place de "Element ID:" je voudrais récupérer le lien en cours...

Est-ce que cela est plus clair ?

Salutation, merci pour ton complément d'information, s'est plus facile pour toi et pour ceux qui souhait d'aider ;).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// Show menu when #myDiv is clicked
				$("#myDiv").contextMenu({
					menu: 'myMenu'
				},
					function(action, el, pos) {
					alert(
						'Action: ' + action + '\n\n' +
						'Element ID: ' + $(el).attr('href') + '\n\n' + 
						'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
						'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
						);
				});
 
A la place de "Element ID:" je voudrais récupérer le lien en cours...

Donc d'après ton code :

Code:

1
2
 
$(el).attr('id')

j'ai remplacé par l'attribut href :

Code:

1
2
 
$(el).attr('href')

Et el doit être égale au dom en jquery : élément déclencheur du menu contextuel.

Code:

1
2
 
alert($("#myDiv table tr td a").attr('href'));

Bonne chance ;)

13/05/2012, 23h32
seb-65

Merci pour ton aide ;)

Non cela ne fonctionne pas, j'obtiens undefined, j'avais déjà essayé...

Par contre si je remplace $(el).attr('href') par $(el).text() j'obtiens TOUT le contenu de la table html...

Une autre idée pour récupérer le lien du clic selon la position sur le tableau HTML ?
13/05/2012, 23h36
seb-65

Re ...

Je n'avais pas vu la fin de ton post !

si je rajoute :

Code:

$("#myDiv table tr td a").contextMenu({

le menu ne se déclenche pas :cry:

Met juste une alert() a ce niveau et dit moi ce que tu as?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$("#myDiv").contextMenu({
					menu: 'myMenu'
				},
					function(action, el, pos) {
alert($("#myDiv table tr td a").attr('href'));
					alert(
						'Action: ' + action + '\n\n' +
						'Element ID: ' + $(el).attr('href') + '\n\n' + 
						'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
						'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
						);
				});

13/05/2012, 23h48
seb-65

Si je clique sur la 3ème lignes du tableau j'obtiens la première...

En fait n'importe quel clic sur le tableau donne toujours la première ligne :

Code:

alert($("#myDiv table tr td a").attr('href'));

"tutu/"

Et avec ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // Show menu when #myDiv is clicked $("#myDiv").contextMenu({ menu: 'myMenu' }, function(action, el, pos) { $("#myDiv table tr td a").each(function(){ alert($(this).attr('href')); }); alert( 'Action: ' + action + '\n\n' + 'Element ID: ' + $(el).attr('id') + '\n\n' + 'X: ' + pos.x + ' Y: ' + pos.y + ' (relative to element)\n\n' + 'X: ' + pos.docX + ' Y: ' + pos.docY+ ' (relative to document)' ); });
Normalement tu aura plusieurs alert correspond au nombre de tes liens contenues dans le tableaux.
Je pense qu'il faut que tu attache dynamiquement sans écrire de onclick un événement pour être plus précis pour catcher à la fois ton événement et ton info précisément lors du click sur le lien en question...

Voilà la piste :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
				$("#myDiv").contextMenu({
					menu: 'myMenu'
				},
					function(action, el, pos) {
$("#myDiv table tr td a").each(function(){
 $(this).onclick = function(){
   alert($(this).attr("href"));
};
});
 
					alert(
						'Action: ' + action + '\n\n' +
						'Element ID: ' + $(el).attr('id') + '\n\n' + 
						'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
						'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
						);
				});

Désolé pour l'indentation je dois y aller, ;) tiens moi au courant.
Bonne nuité.

14/05/2012, 00h00
seb-65

Jquery est tout nouveau pour moi, je débute !

La je récupère bien le lien via alert. Il m'affiche deux fois chaque lien contenu dans le tableau :mouarf:

Par contre comment faire pour récupérer le bon lien ??
14/05/2012, 00h00
headmax

J'ai encore 20 min ;) j'attends.
14/05/2012, 00h02
headmax

Tu as tester le dernier code?
Normalement tu dois avoir a attachEvent en javascript de l'événement onclick sur tes lien hrefs...
Normalement.
14/05/2012, 00h08
seb-65

Non le onclick ne donne rien; pas d'alert !

Petit erreur de ma part essaye ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
$("#myDiv").contextMenu({
					menu: 'myMenu'
				},
					function(action, el, pos) {
$("#myDiv table tr td a").each(function(){
	 $(this).click(function(){
	   alert($(this).attr("href"));
	});
});
 
					alert(
						'Action: ' + action + '\n\n' +
						'Element ID: ' + $(el).attr('id') + '\n\n' + 
						'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
						'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
						);
				});

14/05/2012, 00h20
seb-65

Non :cry:

Toujours pas de alert même avec click
14/05/2012, 00h24
headmax
essaye de mettre ça hors de ton menu contextuel :
Dans la function de onload made jquery
soit :
Code:

1 2 3 4 5 $(function(){ });
ce code hors de ton code jquery du menu :
Code:

1 2 3 4 5 6 7 8 $(function(){ $("#myDiv table tr td a").each(function(){ $(this).click(function(){ alert($(this).attr("href")); }); }); });
Ceci pour garantir que l'événement click s'attachera bien avant le click général que te propose ton menu contextuel et ceci après le chargement de ta page d'ou l'importance de cette function de chargement onload jquery
14/05/2012, 00h28
seb-65

Alors quand je clique sur le lien, il m'affiche bien le lien dans le alert ;)
14/05/2012, 00h29
headmax

Je me disait bien :).
14/05/2012, 00h36
seb-65

Et donc, c'est quoi le souci entre le click gauche et le click droit du menu contextuel ?
14/05/2012, 00h40
headmax

Le click droit ne sert pas a grand chose, car sous Firefox, il affiche les deux menu contextuel (celle du navigateur en modal) et (celle du api jquery) en windowless donc non visible :(, s'est pas top en ergonomie.
14/05/2012, 00h44
seb-65

Citation:

car sous Firefox, il affiche les deux menu contextuel (celle du navigateur en modal) et (celle du api jquery)

Je ne vois qu'un menu sous FF... Je suis fatigué peut être :calim2:

Donc il n'est pas possible de faire ce que je cherche à faire alors ?
14/05/2012, 00h48
headmax

Je sais pas trop ce que fait ce plugin :
Je fais en général met propre :(.
Dit moi ce que tu veux faire exactement?
14/05/2012, 00h57
seb-65

Je cherche a ajouter un menu contextuel sur le tableau HTML que génère une certaine appli...

Donc dans mon menu contextuel, je voudrais ajouter dans un permier temps un menu pour les fichiers et ou dossiers :

-> Supprimer
-> Renommer

Une petite popup qui demande si je veux vraiement supprimer le fichier...
Une autre qui comporte le champ de saisie pour renommer le fichier/dossier...

En fonction du choix, j'envoi ensuite la commande à une page PHP qui traite le renommage ou suppression.

Voila ce que je cherche a faire en JavaScript/Ajax

Selon l'exemple de ton lien tu utilise un tableau html et pas des menu ul li et je n'ai pas tout le code de ta page concernant la gestion de tes click
ça s'est la version complète :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
			$(document).ready( function() {
 
				// Show menu when #myDiv is clicked
				$("#myDiv").contextMenu({
					menu: 'myMenu'
				},
					function(action, el, pos) {
					alert(
						'Action: ' + action + '\n\n' +
						'Element ID: ' + $(el).attr('id') + '\n\n' + 
						'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
						'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
						);
				});
 
				// Show menu when a list item is clicked
				$("#myList UL LI").contextMenu({
					menu: 'myMenu'
				}, function(action, el, pos) {
					alert(
						'Action: ' + action + '\n\n' +
						'Element text: ' + $(el).text() + '\n\n' + 
						'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
						'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
						);
				});
 
				// Disable menus
				$("#disableMenus").click( function() {
					$('#myDiv, #myList UL LI').disableContextMenu();
					$(this).attr('disabled', true);
					$("#enableMenus").attr('disabled', false);
				});
 
				// Enable menus
				$("#enableMenus").click( function() {
					$('#myDiv, #myList UL LI').enableContextMenu();
					$(this).attr('disabled', true);
					$("#disableMenus").attr('disabled', false);
				});
 
				// Disable cut/copy
				$("#disableItems").click( function() {
					$('#myMenu').disableContextMenuItems('#cut,#copy');
					$(this).attr('disabled', true);
					$("#enableItems").attr('disabled', false);
				});
 
				// Enable cut/copy
				$("#enableItems").click( function() {
					$('#myMenu').enableContextMenuItems('#cut,#copy');
					$(this).attr('disabled', true);
					$("#disableItems").attr('disabled', false);
				});				
 
			});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
		<h1>Démo du plugin "Menu contextuel" de jQuery</h1>
		<p>
			Ce plugin vous permet de créer des menus contextuels dans vos applications Web.
		</p>
 
		<p>
			<strong>Tip:</strong> Essayer avec votre clavier pour faire des sélections.
		</p>
 
		<h2>Demo</h2>
 
		<div id="myDiv">
			Clic droit pour voir le menu contextuel
		</div>
 
		<div id="myList">
			<ul>
				<li>Item 1</li>
				<li>Item 2</li>
				<li>Item 3</li>
				<li>Item 4</li>
				<li>Item 5</li>
				<li>Item 6</li>
			</ul>
		</div>
 
		<div id="options">
			<p>
				<input id="disableItems" value="Désactiver Couper/Copier" type="button">
				<input id="enableItems" value="Activer Couper/Copier" disabled="disabled" type="button">
			</p>
 
			<p>
				<input id="disableMenus" value="Désactiver les menus contextuels" type="button">
				<input id="enableMenus" value="Activer les menus contextuels" disabled="disabled" type="button">
			</p>
		</div>
 
		<ul style="-moz-user-select: none;" id="myMenu" class="contextMenu">
			<li class="edit"><a href="#edit">Edition</a></li>
			<li class="cut separator"><a href="#cut">Couper</a></li>
			<li class="copy"><a href="#copy">Copier</a></li>
			<li class="paste"><a href="#paste">Coller</a></li>
			<li class="delete"><a href="#delete">Supprimer</a></li>
			<li class="quit separator"><a href="#quit">Quitter</a></li>
		</ul>

14/05/2012, 07h50
seb-65

Le menu contextuel en lui même fonctionne correctement...

Je veux intégrer un menu contextuel sur un tableau HTML et non pas sur du UL/LI

Je veux pouvoir récupérer le lien du fichier lors d'un clic gauche > menu contextuel > Supprimer dans les différentes ligne du tableau HTML retourné.

Dans le dernier code montré il y a une suite :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
				// Show menu when a list item is clicked
				$("#myList UL LI").contextMenu({
					menu: 'myMenu'
				}, function(action, el, pos) {
					alert(
						'Action: ' + action + '\n\n' +
						'Element text: ' + $(el).text() + '\n\n' + 
						'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
						'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
						);
				});

donc ce qui fait pour toi :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
				// Show menu when a list item is clicked
				$("#myDiv table tr td").contextMenu({
					menu: 'myMenu'
				}, function(action, el, pos) {
					alert(
						'Action: ' + action + '\n\n' +
						'Element text: ' + $(el).text() + '\n\n' + 
						'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
						'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
						);
				});

14/05/2012, 11h17
seb-65

Wouéé :ccool:

Merci headmax !

Avec le code ci-dessous je récupère bien ce que je cherche ;)

Code:

$("#myDiv table tr td").contextMenu({

Par contre quel conseil/code peux tu me donner sur l'ouverture d'une popup ?

Je me demande si une DIV caché peut être affiché au centre la page et par la suite appeler ma page PHP...:calim2:
14/05/2012, 15h37
SpaceFrog

Code:

.load()

Code:

.show()
14/05/2012, 20h54
headmax
Tu peux tout a fait mettre une div en display none (visible), display block (invisible).
tu peux centrer en css comme en js dynamiquement.
Code:

1 2 <div id="myCenterDIV"></div>
à mettre au chargement de ta page "jquery"
Code:

1 2 $("myCenterDiv").css("{display: 'none', borderLeft: '5px solid #ccc'}");
A mettre la ou moment ou tu veux afficher ta div
Code:

1 2 $("myCenterDiv").css("{display: 'block', borderLeft: '5px solid #ccc'}");
à mettre la ou tu veux activer l'affichage de ta div, j'ai mit d'autre style pour que tu puisse comprendre comment ajouter du css dans cette méthode.

Voilà pour centrer en JS il y a un tas de tuto, pour débuter, c'est mieux et ca permet de mieux cibler tes lacunes et js s'apprend très vite...

Bon courage ;) pour la suite.