Salut Paolo,
alors histoire d'être plus précis (j'ai changé le titre du topic) et d'être aussi aussi beaucoup plus compliqué, je cherche à faire un menu contextuel (click droit sur certain éléments) dont le contenu est chargé via ajax (gestion du menu par PHP en fonction d'un context).
Pour répondre à tes questions précédentes :
- le code est valide
- $(document).ready(function(){...}); est bien là
- la console ne retourne pas d'erreur
J'ai indiqué dans les commentaires du plugin les choses qui pose problèmes.
le Plugin menu contextuel (jquery.ajaxContextMenu.js):
// jQuery Ajax Context Menu Plugin
//
// Script fortement inspirer jQuery Context Menu Plugin
// More info: http://abeautifulsite.net/2008/09/jquery-context-menu-plugin/
if(jQuery)( function() {
$.extend($.fn, {
ajaxContextMenu : function(o, callback){
// Define context to be send as param to server
// must correspond to a class for clickable items
var contexts = [
'file',
'misc'
];
var menuContenerId = 'cxtMenuContener';
var menuContener = $('#' + menuContenerId);
// Debug defaut context event
// ************************************************
// Ne marche pas si pas présent
// ************************************************
$(document).bind("contextmenu", function(e) {
e.preventDefault();
});
$(this).mousedown(function(e){
var evt = e;
evt.stopPropagation();
$(this).mouseup(function(e){
e.stopPropagation();
$(this).unbind('mouseup');
if (e.button == 2) {
// Init menu
menuContener.children().remove();
// Mouse position
var x = e.pageX;
var y = e.pageY;
// Menu contener creation
// ***************************************
// Ne marche pas, donc ce bout de code est directement dans la page
// ***************************************
// $('body').append('<div id="' + menuContenerId +'"></div>');
// Add absolute position & posotion to the contener
menuContener.css({position: 'absolute', top: y, left: x});
menuContener.hide();
// Get context
var j = contexts.length;
for (var i=0; i<=j; i++){
if ($(this).hasClass(contexts[i])) {
var context = contexts[i];
break;
}
}
// Load myMenu via Ajax
$.ajax({
type: "GET",
url: "contextMenu.php",
data: "context=" + context,
success: function(response){
menuContener.append(response);
}
});
var ajaxMenu = $('#menuTest');
// Display menu
menuContener.fadeTo(3000, 0.95);
// Menu click handler
// *********************************************
// Fonctionne sur IE 7 mais pas sur Moz 3.6.3
// *********************************************
$('#menuTest > ul > li > a').each(function(){
$(this).click(function(e){
e.preventDefault();
if(callback) {
callback($(this).attr('href'));
}
});
});
//Hide menu
setTimeout(function(){ // moz delay
$(document).click(function(){
$(document).unbind('click');
menuContener.children().remove();
});
},0);
// Debug
$('#log').children().remove();
$('#log').slideDown();
$('#log').append('<div>right click on : ' + $(this).attr('id') + '</div>');
$('#log').append('<div>context : ' + context + '</div>');
$('#log').append('<div>var contener id : ' + menuContenerId + '</div>');
}
});
});
}
});
})(jQuery);
le script (myJS.js):
$(document).ready(function(){
$('.rightClick').ajaxContextMenu(
{},
function(action){
alert(action);
}
);
});
le code renvoyer par le serveur (contextMenu.php) :
<div id="menuTest">
<div>context : <?php echo $context; ?></div>
<ul>
<li><a href="action/click1" id="1">click 1</a></li>
<li><a href="action/click2" id="2">click 2</a></li>
</ul>
</div>
mon fichier HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page de test JavaScript et jQuery</title>
<link rel="stylesheet" media="screen" href="css/style.css">
<link rel="stylesheet" media="screen" href="css/contextMenu.css">
<script src="js/jquery-1.4.2.js"></script>
<script src="js/jquery.ajaxContextMenu.js"></script>
<script src="js/my_js.js"></script>
<meta name="description" content="Ma page de test JavaScript et jQuery">
<!--[if IE]><![endif]-->
</head>
<body>
<div id="fileList">
<div id="file_1" class="file rightClick" name="Mon_fichier_1">Mon fichier 1</div>
<div id="file_2" class="file rightClick" name="Mon_fichier_2">Mon fichier 2</div>
<div id="file_3" class="file rightClick" name="Mon_fichier_3">Mon fichier 3</div>
</div>
<div id="log" style="display: none">
<h2>log</h2>
</div>
<!-- mon contener de menu contextuel -->
<div id="cxtMenuContener"></div>
</body>
</html>
Bon! j'espère que ça ne va décourager personne
et Merci pour le support.[/i][/i]
