✔ jQuery sortable funktioniert nicht bei nachgeladenem Inhalt

[iLu_is_a_loser]

Guten Tag

<script type="text/javascript" src="javascript/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.8.7.custom.min.js"></script>
	<script type="text/javascript"> 
	$(function() {
    $("#sortable").sortable({cursor: 'pointer'});
    $("#sortable").disableSelection();
});
</script>
<ul id="sortable">
	<li>hi</li>
	<li>hallo</li>
</ul>

Funktioniert soweit wunderbar.... wenn ich aber nun Daten mit

index.php

function macheRequest(url) { 
	http_request = false;
	 
	if (window.XMLHttpRequest) { // Mozilla, Safari,...
		http_request = new XMLHttpRequest();
	} else if (window.ActiveXObject) { // IE
		try {
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try {
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {
			}
		}
	}	 
	if (!http_request) {
		alert('Kann keine XMLHTTP-Instanz erzeugen.');
		return false;
	}
	http_request.open('POST', url+"&rnd="+String(Math.random()), true);			//  +String ist für eine Zufallszahl, damit der Content immergeladen wird und nicht aus Cache geladen wird
	http_request.onreadystatechange = alertInhalt;
	http_request.send(null);
}
 
function alertInhalt() { 
	var loading = $("#loading");	// Für Fade-Effekt
	var uebersicht = $("#ausgabe"); 	// Für Fade-Effekt
	uebersicht.hide();  			// Ausblenden
	loading.fadeIn();				// Einblenden
	if (http_request.readyState == 4) {
		var antwort = http_request.responseText;
		var ausgabe = document.getElementById("ausgabe");
		if(ausgabe.innerHTML != antwort){
			ausgabe.innerHTML = antwort;
		} else {
			ausgabe.innerHTML = "";
		}
		loading.fadeOut();
		uebersicht.fadeIn();
	}
} 

macheRequest("include/update_db.php?action=drahtschneiden_laden");

update_db.php

if($_GET['action'] == "drahtschneiden_laden" AND $_GET['rnd'] != "") {			
	$result = "";
	$res = drahtschneiden_laden();
	while($row = mysql_fetch_object($res)){
		$result .= '
		<tr id="recordsArray_'.$row->id.'">
			<td>
				'.$row->wa.'
			</td>
			<td>
				'.$row->artikel.' / '.$row->wz.'
			</td>
		</tr>';
	}
	?>

	<?php
	echo '<table cellpadding="0px" cellspacing="0px">';
	echo '<thead>';
	echo '<tr><td><center>';
	echo 'WA-Nummer';
	echo '</center></td><td><center>';
	echo 'Art.-Nummer';
	echo '</center></td>';			
	echo '</thead>';
	echo '<tbody id="sortable">';
	echo $result; 
	echo '</tbody>'; 
	echo '</table>';
}

nachladen funktioniert es nicht mehr.... die Daten aus der Datenbank erschneinen auch nicht im Quellcode.... natürlich habe ich die sortable Funktion von oben auf diese Ausgabe angepasst.

Ich wollte wohl gerne den TBODY Bereich "sortable" machen. Ich habe auch schon versucht das Javascript innerhalb meiner SQL Ausgabe einzufügen, doch ich habe keinen Erfolg.

Gruß
Weiß jemand einen Rat?
Wenn ich einen anderen Bereich sortierbar machen und diesen auch gleich auf meiner index Seite definiere und angebe funktioniert die sortier Funktion.

 

[rd4eva]

Vorweg: Wenn du eh jQuery verwendest wieso gehst du den weiten weg und schreibst den Ajax request manuell anstatt z.B. jQuery.post() zu verwenden?

Zum Problem: Es funktioniert nicht weil die Elemente die du sortieren möchtest noch nicht existent waren als du sortable() gebunden hast.
live() sollte dir da weiterhelfen.

 

[iLu_is_a_loser]

Naja ich habe ja eine jQuery Methode... nur irgendwie bekomme ich die Ausgabe nicht eingeblendet.

	var loading = $("#loading");  
	var ausgabe = $("#ausgabe"); 
	function uebersicht_abfrage(){  
		//Fade Effekt
		ausgabe.hide();  
		loading.fadeIn();  
		//sendet POST zu db_update.php 
		$.ajax({  
			type: "POST", 
			url: "include/update_db.php", 
			data: "action=drahtschneiden_laden&rnd="+String(Math.random()),  
			complete: function(data){  
				loading.fadeOut();  
				ausgabe.html(data.responseText);  
				ausgabe.fadeIn(500); 		
			}  
		});  
	} 
	uebersicht_abfrage();

Ok die geht nun Habe einfach die Divs direkt ohne Variabel angegeben.

 

[iLu_is_a_loser]

Danke das live() war genau das was ich gesucht habe.

$("tbody").live("mouseover", function() {
	$("#content #ausgabe table tbody").sortable({ 				
		opacity: 0.6, cursor: 'move', helper: fixHelper, update: function() {
			var order = $(this).sortable("serialize") + '&action=drahtschneiden_position_update';
			$.post("include/update_db.php", order);
		}
	});
});