jquery sortable - draggable - serialize-Problem

H

hoefsi

Grünschnabel
Hallo zusammen,

ich habe folgenden Code (den Kopf habe ich jetzt mal weggelassen....):
Code: 
<script>
	$(function() {
		$( "#kette" ).sortable({
			revert: true,			
			placeholder: 'ui-state-highlight',			
			update: function() {
                               var order = $("#kette").sortable("serialize");
							   alert (order);                               
                               }
         });
        $("#kette").disableSelection(); 
		
       });
	    
	  
	</script>

</head>
<body>

		<ul id="kette">
			<li id="kettenglieder_1" class="ui-state-default"><img src="smileys/1.gif" /></li>
			<li id="kettenglieder_2" class="ui-state-default"><img src="smileys/2.gif" /></li>	
			<li id="kettenglieder_3" class="ui-state-default"><img src="smileys/5.gif" /></li>
		</ul>
	
</body>
</html>

Das klappt auch alles wunderbar. Sobald das Sortable geändert wird, bekomme ich die Elemente über serialize ausgegeben.

Jetzt aber zu meinem Problem:
Wenn ich das Sortable mit einer Draggable-Liste verknüpfe, mit der ich neue Elemente in das Sortable einfügen kann, werden diese zwar in die Liste eingefügt, über serialize aber nicht ausgegeben******
Ursache muss sein, dass sie beim einfügen keine id bekommen!
Der o.g. Code funktioniert nämlich nicht, wenn ich die ids der Elemente entferne. :(

Habt ihr eine Idee, wie ich das lösen kann?

Ich bin leider noch sehr neu in jquery.... :(

Danke vorab für Eure Hilfe....
 
Ich habe vllt einen nicht so eleganten Ansatz, aber bestimmt besser als nichts:
Code: 
update: function(e, ui) {
                               if( !ui.helper.is("id*=kettenglieder") ){
                                       ui.helper.attr("id", "kettenglieder_"+$("#kette").children("li").length);
                               }
                               var order = $("#kette").sortable("serialize");
                               alert (order);                               
                               }

Habe ich nicht getestet, nur eine Idee. Sollte der den Helper noch nicht mitzaehlen als Kindelement musst Du noch plus eins rechnen.
 
erstmal Danke für Deine Hilfe!
:)

Leider funktioniert der Code nicht. :(
Der Fehler muss in der if-Abfrage sein, denn die wenn ich die Zeile
ui.helper.attr("id", "kettenglieder_"+$("#kette").children("li").length);
Zum Vergrößern anklicken....
durch ein Alert('hier'); ersetze, passiert leider nichts....
 
Hmm ich sehe den Fehler auf Anhieb nicht, kann das hier aber auch nicht testen. Eine andere Idee wäre (wenn Du die IDs nur für das serialisieren(?) hast) mit each durchzugehen und die IDs nach dem update neu zuzuweisen.

Code: 
 update: function() {
                               $("#kette > li").each(function(index){$(this).attr("id", "kettenglieder_"+index});
                               var order = $("#kette").sortable("serialize");
                               alert (order);                               
                               }

Sonst müsstest Du mir einmal die Fehlermeldung ausgeben. (Firefox -> Extras -> Fehlerkonsole. Einmal leeren, die Seite neu aufrufen, dann hast Du nur "Deine Fehler")
 
Hi,

ui.helper wird an dieser Stelle wohl nicht definiert sein. Aber der Ansatz, eine neue ID anzugeben ist sicherlich der richtige.

Meine Lösung:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- <script src="../JS-Scripts/jquery/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="../JS-Scripts/jquery/ui/jquery-ui-1.8.11.min.js" type="text/javascript"></script> -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
$(function() {
  $( "#kette" ).sortable({
    revert: true,
    placeholder: 'ui-state-highlight',
    update: function(evt, ui) {
      var _this = this;
      $(this).find("li").each(function(i){
        if(this == ui.item[0]){
          var strId = $("li:eq("+((i==0)? 1 : 0)+")", _this).attr("id");
          $(this).attr('id', strId.substr(0, strId.lastIndexOf("_"))+"_"+$('li', _this).length);
        }
      });

      var order = $("#kette").sortable("serialize");
      alert (order);
    }
  });

  $( "#draggable" ).draggable({
    connectToSortable: "#kette",
    helper: "clone",
    revert: "invalid"
  });

  $( "ul, li" ).disableSelection();
});
 //-->
</script>
</head>
<body>
<ul id="kette">
  <li id="kettenglieder_1" class="ui-state-default">a</li>
  <li id="kettenglieder_2" class="ui-state-default">b</li>
  <li id="kettenglieder_3" class="ui-state-default">c</li>
</ul>

<ul>
  <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
</body>
</html>
Ciao
Quaese
 
Danke an Euch beide!
Der letzte Ansatz funktioniert einwandfrei******! :)

DANKE******!!

Und jetzt noch eine letzte Frage (wahrscheinlich schalgt ihr mich...):
Serialize gibt ja die IDs aus. Wie komme ich aber an den Inhalt des Listenelementes (also in meinem Fall die Bildadresse)?

Das ist bestimmt so ne richtige Anfängerfrage.... :-(
 
Code: 
# Entweder so ...
$('#' + id + ' > img').attr('src');

# oder so ...
$('#' + id + ' > img')[0].attr('src');

# oder so
$('#' + id + ' > img:first').attr('src');
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück