jQuery KontextMenü

Javascript: 
$("[contextmenu2]").on("contextmenu", function (e) {
    $('.contextmenu').hide();
    $current     = $(this);
    var contextmenu  = $(this).attr("contextmenu2");
    var $contextmenu = $("#" + contextmenu);
    
    // ...
 
Hallo,

ich habe ein merkwürdiges Problem wo mir bis jetzt noch keiner weiterhelfen konnte :(
Mein Problem:
Ich lade die Liste via jQuery (Script s.u.) rein, diese Liste soll jetzt aber mit dem Contextmenu noch funktionieren. Funktionieren tut es teilweise auch :/
Bei dem normalen laden der Seite wo dann auch das jQuery-Script die Seite hinein lädt, funktioniert es nicht, erst wenn man eine Eingabe in das Suchfeld getätigt hat (dabei wird die Seite neu vom jQuery-Script geladen mit den neuen Ergebnissen).

Hoffe es war verständlich ;)
Wenn sich einer das Problem live ansehen möchte dann kann ich auch ihm Zugang zu meinem System verschaffen, aber das dann nur via PN.

Was ich noch vergessen hab, das ganze ist mit einem Template-System ("Smarty") aufgebaut.
Wenn ich einfach den HTML Code von dem Original kopiere dann funktioniert es, nur im Template-System nicht :(

jQuery Script:

Code: 
function liste(url) 
{ 
    var str = './js/ttttttt.tt.ttttttttt.php?search='; 
    url = str + url; 

    $.get(url, onSuccess); 
     
    //So sollte man das eher nicht machen. Lieber bestimmte Element per JavaScript einfach ein- bzw. ausblenden. 
    //Oder wenigstens mit Klassen/IDs arbeiten. 
    $("#gigliste").html("<div style=\'width:70px; height: 70px; margin: auto; margin-top: 100px; border-radius: 60px; background: rgba(2, 1, 0, 0.9);\'><img class='loading' style='width:80px; margin-top: -5px; margin-left: -5px;' height='80px' src='./img/loadings/loading.gif' /></div>"); 
     
    return false; 
} 


//Wird aufgerufen, wenn Daten empfangen wurden, welche dann der Funktion als Paramerter übergeben wird. 
function onSuccess(data) 
{ 
    $('#liste').html(data); 
}
 
Um ehrlich zu sein: dein Quelltext hilft nicht. Daher würde ich dich bitten, dass du mir mal per PN die Zugangsdaten schickst.
 
Zuletzt bearbeitet:
Also abgesehen davon, dass du an deinen Skripten noch einiges zu verbessern hast (beispielsweise nicht jQuery-Syntax und Standard-JavaScript-Selektor-Syntax mischen), glaube ich den Fehler gefunden zu haben: wenn du mal in deinen Quelltext siehst, dann wird dir auffallen, dass du die Datei für das Kontextmenü nach den anderen Skripten einbindest, dieses jedoch schon davor benötigt wird. Wenn du die Datei also schon eingebunden hast, wenn du deinen AJAX-Request absetzt, dann sollte alles so funktionieren, wie du es möchtest. Ansonsten möchte ich mein eigenes Skript noch etwas ausbessern, so dass es besser läuft mit AJAX:
Javascript: 
$(function () {
  var $current = null;
  
  $('body')
  .delegate('[contextmenu2]', 'contextmenu', function (e) {
    $('.contextmenu').hide();
   
    $current         = $(this);
    var contextmenu  = $(this).attr('contextmenu2');
    var $contextmenu = $('#' + contextmenu);
    
    if ($contextmenu.length == 0) {
        return;
    }
    
    e.preventDefault();
    e.stopPropagation();
    
    $contextmenu.show();
    
    $contextmenu.css({
        'top' : e.pageY + 'px',
        'left' : e.pageX + 'px',
        'bottom' : null,
        'right' : null
    });
    
    if (e.pageY > (window.innerHeight - 200)) {
      $contextmenu.css({
        'bottom' : (window.innerHeight - e.pageY) + 'px',
        'top' : null
      });
    }
    
    if (e.pageX > (window.innerWidth - 200)) {
      $contextmenu.css({
        'right': (window.innerWidth - e.pageX) + 'px',
        'left' : null
     });
   }
    
    return false;
  })
  
  .delegate('.contextmenu li', 'click', function () {
    window.location.href = '?action=' + $(this).data('type') + $(this).data('page') + '&id=' + $current.data('id');
  })
   
  .on('click', function () {
    $('.contextmenu').hide();
  })
  
  .on('keydown', function (e) {
    if (e.which == 27) {
      $('.contextmenu').hide();
    }
  });
});

Nachtrag: Ich habe mein Skript noch etwas ausgebessert, so dass es jetzt (bis auf das Aussehen) einem nativen Kontextmenü sehr nahe kommt: wenn ein Kontextmenü offen ist und versucht wird, erneut ein Kontextmenü zu öffnen, wird das bestehende ausgeblendet, jedoch kein neues geöffnet. Dafür muss man ein zweites Mal ein Kontextmenü an der entsprechenden Stelle öffnen. Ansonsten kann man sich in dem Kontextmenü auch anhand der Pfeiltasten bewegen und eine Option mit der Eingabetaste auswählen, wobei der Wert übergeben und das Kontextmenü geschlossen wird. Und noch eine Sache, die jedoch schon in dem oben stehenden Skript neu implementiert wurde: man kann das Kontextmenü jetzt auch mit der Escape-Taste verlassen. Die aktuelle Version findet man hier: http://jsfiddle.net/MeiKatz/8kUJT/11/

Nachtrag II: Momentan arbeite ich an einem Kontextmenü-Plugin für jQuery, so dass man dann Kontextmenüs wie folgt erstellen kann:

Javascript: 
$('table').contextmenu(function () {
  this; // enthält das ausgewählte Listen-Element aus dem Kontextmenü
});
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück