Contextmenü funktioniert nach ajax include nicht mehr

MsWord

Mitglied
Hallo,

mit folgendem Ajaxscript lade ich eine Datei rein.
Code:
var xmlhttp_gigliste;

function gigliste(url)
{
	xmlhttp_gigliste=GetXmlHttpObject();
	if (xmlhttp_gigliste==null)
	{
		alert ("Ihr Browser unterstüzt nicht dieses Script.");
		return false;
	}
	
	var str;	
	str = './js/gigliste.test.test.php?search=';
	url = str + url;
			  		
	xmlhttp_gigliste.onreadystatechange=stateChanged_gigliste;
	xmlhttp_gigliste.open("GET",url,true);
	xmlhttp_gigliste.send(null);

	document.getElementById("gigliste").innerHTML="<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;
}

function stateChanged_gigliste()
{
   if (xmlhttp_gigliste.readyState==4)
   {
   document.getElementById("gigliste").innerHTML=xmlhttp_gigliste.responseText;
   }
}


function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  //ie7+, firefox, chrome, opera, safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  //ie6,ie5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return false;
}

Das Contextmenu ist in der Index Datei und in der Datei die von dem Ajaxscript geladen wird.
In der Datei die geladen wird soll das Contextmenu ausgeführt werden.
Nur leider funktioniert das nicht******!
Wenn ich die Datei z.B. gigliste.test.test.php aufrufe dann geht es nur sobald ich es mit Ajax in die Index lade geht es nicht mehr.
Hier die gigliste.test.test.php Datei:
PHP:
<?php
session_start();

/* Include */

include('../test/config.te.inc.php');

include('../test/funktionen.te.inc.php');

include('../test/run.te.inc.php');

$search = $_GET['search'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="author" content="Marlight">
<meta name="generator" content="www.marlight-music.de">
<meta name="robots" content="noindex, nofollow, noarchive">
<title>Gigliste</title>
<link rel="stylesheet" type="text/css" href="../css/gigliste.css">
<script type="text/javascript" language="javascript" src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script type="text/javascript" language="javascript" src="./js/jquery.contextmenu.js"></script>
</head>
<body>
<div id="log"></div>
<table class="gigmanager" width="100%" border="0" cellpadding="0" cellspacing="0">
    <tbody>
    	<? echo gigs($search); ?>
    </tbody>
</table>
<ul class="contextmenu" id="standart">
    <li data-type="open" class="folder">&ouml;ffnen</li>
    <li data-type="edit" class="edit">bearbeiten</li>
    <li data-type="delete" class="delete">l&ouml;schen</li>
</ul>
<ul class="contextmenu" id="public">
    <li data-type="open" class="folder">&ouml;ffnen</li>
    <li data-type="edit" class="edit">bearbeiten</li>
    <li data-type="public" class="public">ver&ouml;ffentlichen</li>
    <li data-type="delete" class="delete">l&ouml;schen</li>
</ul>
<ul class="contextmenu" id="gig">
    <li data-type="open" class="folder">&ouml;ffnen</li>
    <li data-type="edit" class="edit">bearbeiten</li>
    <li data-type="change" class="change">Zum Gig umwandeln</li>
    <li data-type="delete" class="delete">l&ouml;schen</li>
</ul>
</body>
</html>

Und hier das Contextmenu:
Code:
//<![CDATA[
$(function(){
var $current = null;
 
$("[contextmenu2]").on("contextmenu", function (e) {
	$('.contextmenu').hide();
    $current     = $(this);
    var contextmenu  = $(this).attr("contextmenu2");
    var $contextmenu = $("#" + contextmenu);
    
    if ($contextmenu.length == 0) {
        return;
    }
    
    console.log(this);
    
    e.preventDefault();
    e.stopPropagation();
    
    $contextmenu.show();
 
        
    $contextmenu.css({
        "top" : e.pageY + "px",
        "left" : e.pageX + "px",
        "bottom" : "",
        "right" : ""
    });
    
    if(e.pageY > (window.innerHeight-200)){
     $contextmenu.css({
        "bottom" : (window.innerHeight-e.pageY) + "px",
        "top" : ""
     });
    }
    
    if(e.pageX > (window.innerWidth-200)){
     $contextmenu.css({
        "right": (window.innerWidth-e.pageX) + "px",
        "left" : ""
     });
    }
    
    
    return false;
});
 
$(".contextmenu li").on("click", function () {
  location.href=("?action=" + $(this).data("type") + "&id=" + $current.data("id"));
});
 
$("body").on("click", function () {
   $(".contextmenu").hide(); 
});
});
//]]>

Hat jemand eine Idee wie man das hinbekommen kann das nach dem reinladen das Contextmenu noch funktioniert?

Ich hoffe das ich mich jetzt nicht zu unverständlich ausgedrückt habe :/
 
Hallo!

Lass den Leuten doch mal etwas Zeit sich das hier anzusehen.
Wenn du alle notwendigen Dateien hoch lädst wäre ich dazu bereit dir zu helfen aber so ist mir das zu umständlich. Und warum verwendest du kein jQuery für deine AJAX Anfrage?
 
Vielen Dank für die Antwort.
Ich habe den Ausschnitt nochmal als Testsystem aufgebaut.
Ich habe das auch nochmal auf meinem Server liegen.
http://mymega.eu/test/
http://mymega.eu/test/include.php

Oder auch im Anhang als Download.

Und warum verwendest du kein jQuery für deine AJAX Anfrage?

Weil mir das Ajaxscript jemand anderes geschrieben hat, da ich mich mit Ajax nicht auskenne.
Und um das gleiche mit jQuery hinzubekommen, habe ich noch zu wenige Kenntnisse in jQuery.

Teilweise ist das Problem gelöst, nun ist noch das Problem das bei dem ersten mal laden kein Contextmenu funktioniert?!
Was ich nur nicht ganz verstehe, bei meinem Testsystem geht es auf Anhieb,
nur bei meinem richtigen System muss man erst einmal einen Buchstaben ins Suchfeld eingeben,
damit das Contextmenu funktioniert. Aber bei meinem Testsystem geht es sofort?
http://mymega.eu/test/

Was da nur schief läuft weiß ich auch net******
Da mein richtiges System Grundlegend gleich ist.
 

Anhänge

  • Terminsystem.zip
    98,8 KB · Aufrufe: 3
Hallo!

Du verwendest jQuery sowieso für deine Seite. Warum dann auch nicht für den AJAX Teil? Aber wenn du es so willst und solange es funktioniert soll mir das recht sein. ;-)
Wenn es dich trotzdem interessiert siehe hier.

Was ist das für ein Chaos bitte?

Es beginnt schon damit, dass du 2 !DOCTYPE definiert hast wenn deine Seit fertig geladen ist und in deiner "gigliste" nochmals <meta> tags vorkommen.

Dann fällt mir noch auf dass mein lieber Chrome Bilder laden möchte, die es gar nicht gibt bzw. bei denen der Pfad in der CSS Datei falsch angegeben ist.

Als nächstes würde ich dir empfehlen deinen Code zu trennen. Das komplette CSS in eine Datei, HTML in eine Datei und das JS ebenfalls in ein eigene Datei (oder mehrere je nach der Größe des Projektes) zu packen. Jeder Mensch der deinen Code liest wird dir dafür dankbar sein.
Einen weiteren Tipp welche ich für dich habe ist die JS Dateien am Ande deines <body>'s zu platzieren. Dadurch wird zuerst die Seite aufgebaut und dann das dafür notwendige JS geladen. Weiters kannst du es noch in ein $(window).load() platzieren damit auch sicher gegangen wird, dass du nicht irgendwelche Elemente ansprichst die zum Zeitpunkt an dem dein JS Code ausgeführt wird noch gar nicht existieren.

Zu deinem eigentlichen Problem: Ich habe mir nur dein Online Testsystem angesehen und dort klappt ja alles wie du bereits gesagt hast. Wenn du genau die selben Dateien auf deinem lokalen Rechner auf einem Server z.B. mithilfe von XAMPP unter localhost ausrufst dürfte kein Unterschied sein. Ist ja genau das selbe.
 
Also, ich habe mein Orginalsystem HTML mäßig Kopiert und mein Testsystem überschrieben,
natürlich mit den dazugehörigen Datein und Bildern. Da hat es sofort funktioniert?!
Warum weiß ich net, denn HTML mäßig sind die Dateien gleich, der einzige unterschied ist das mein Orginalsystem auf einem Templatesystem aufgebaut ist. Kann es vllt. daran liegen?

Wenn du breit wärst dir das mal anzusehen, dann könntest du mich mal per PN kontaktieren,
dort würde ich dir dann zugang zum Orginalsystem geben.
 
Zurück