✔ jQuery: funktioniert nach Request nicht

L

LiebHabSchafi

Mitglied
Huhu,

ich hab damal wieder ein lustiges "Problem". Wenn ich den untenstehenden Code direkt aufrufe funktioniert das ganze, aber wenn ich diesen Code per jquery nachladen lasse funktioniert er nicht :( hat jemand eine Idee?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#myList").sortable({});
  });
  </script>
  <style>ul { list-style: none; }
li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; }</style>
</head>
<body>
  
<script src="http://ui.jquery.com/latest/ui/ui.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/ui.sortable.js"></script>
<ul id="myList">
	    <li>Item 1</li>
	    <li>Item 2</li>
	    <li>Item 3</li>
	    <li>Item 4</li>
</ul>

</body>
</html>

Danke im vorraus

Chris
 
Hallo Sven,

folgenden Code lasse ich nachladen:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#myList").sortable({});
  });
  </script>
  <style>ul { list-style: none; }
li { background: #727EA3; color: #FFF; width: 100px; margin: 5px; font-size: 10px; font-family: Arial; padding: 3px; }</style>
</head>
<body>
  
<script src="http://ui.jquery.com/latest/ui/ui.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/ui.sortable.js"></script>
<ul id="myList">
	    <li>Item 1</li>
	    <li>Item 2</li>
	    <li>Item 3</li>
	    <li>Item 4</li>
</ul>

</body>
</html>

und mit diesem Code lade ich obigen Code:

Code: 
$.ajax({
			beforeSend: function(XMLHttpRequest) {
		   		$('#show').html('<div><img src="images/ajax-loader.gif" /></div>');
			},
			url: "content/ajax/test.ajax.php",
			error: function (XMLHttpRequest, textStatus, errorThrown) {
				$('#show').html('Fehler beim Laden.');
			},
	   		success: function(data){
	   			$('#show').html(data);
	   		}
		});

wenn ich den oberen Code ohne Ajax Request aufrufe funktioniert alles wunderbar, mit Ajax Request zeigt er mir zwar alles richtig an, aber man kann die liste nicht sortieren. :(
 
$(document).ready feuert, wenn das Dokument geladen ist...wenn du etwas nachinein in das Dokument lädtst, feuert dieser Event nicht mehr.

Weiterhin: du musst beim Request als dataType "html" angeben, damit enthaltener JS-Code ausgeführt wird.
 
Danke für den Tipp, ich habe das ganze nun abgeändert. Das Event ist nun nicht mehr "ready" sondern "click".

Aber folgendes Problem ergibt sich nun daraus, wenn ich die Daten nachlade, muss ich erstmal einmal klicken vor ich die Container (divs) hin und her schieben kann gibt es ein anderes event wo dies nicht von nöten ist?
 
Probiere mal, am Ende dieses Codes, den du zurückgeliefert bekommst, folgendes zu Platzieren:
Code: 
<script type="text/javascript">
<!--
$("#myList").sortable({})
//-->
</script>

...steht ja schliesslich nirgends geschrieben, dass man immer auf Events warten muss, und wenn du das am Ende(zumindest nach der Liste) platzierst, weisst du ja, dass die Liste existiert.
 
Zuletzt bearbeitet:
eigentlich reicht es ja schon wenn ich das Event weglasse, dann funktioniert es ja auch schon - also zumindesten tut es das jetzt :) Die Lösung kann manchmal so einfach sein.

Jetzt muss ich nur noch schauen wie ich am besten die sortierten Elemente speichern kann.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück