Div da mettere a posto

[DarioMarco]

i div sono presenti e manipolabili in quanto vengono già riordinati con un widget sortme jquery. Posso postarti tutta la funzione Ajax, perhcè la pagina è in un settore Admin, ma nel caso potrei sbloccarla per fartela visionare.

Ma una piccola curiosità, gli id dei div contenuti nella lista sono influenti?
Voglio dire se hai questa situazione

<li><div id="div4">4</div></li>
<li><div id="div1">1</div></li>
<li><div id="div2">2</div></li>
<li><div id="div3">3</div></li>

lo script funziona?

e se hai questa situazione?
<li><div id="uno">4</div></li>
<li><div id="due">1</div></li>
<li><div id="tre">2</div></li>
<li><div id="quattro">3</div></li>

[KillerWorm]

Non capisco, e con quel widget non puoi già riordinarli nel modo in cui servono a te?

Con l'ultimo esempio che ho postato viene riordinato solo il contenuto. Gli id non influiscono sul funzionamento dello script.
In sostanza viene creato un array dei soli contenuti. Gli elementi dell'array vengono riordinati e i valori vengono reinseriti dentro i div, secondo la nuova sequenza, quindi sovrascrivendo i vecchi contenuti.

Probabilmente è un errore banale.
Prova a postare la funzione ajax e il blocco html risultante (quello che viene creato sulla pagina prima che sia eseguita la funzione di riordinamento).

[DarioMarco]

$(document).ready(
function() {
$("#sortme").sortable({
update : function () {
serial = $('#sortme').sortable('serialize');
$.ajax({
url: "sort_menu.php",
type: "post",
data: serial,

success:function(result){
function ordina(){
var contenuti = $("li>div","#sortme").map(function(){return $(this).text();}).get()
.sort(function(a, b){console.log(a);return a - b;});
$("li>div","#sortme").each(function(id){$(this).ht ml(contenuti[id]);});
}

},
error: function(){
alert("theres an error with AJAX");
}
});
}
});
}
);

#sortme è l'id del tag ul che contiene la lista con gli id da ordinare.

[KillerWorm]

C'è un problema che oserei dire "grave" più che banale.

Non capisco quale livello di conoscenza hai in generale riguardo la programmazione, ma hai dichiarato la funzione ordina() ed è chiaro che dovrai richiamarla da qualche parte per essere eseguita, non ti pare?

Se non ti serve avere una funzione, puoi mettere giusto lo script direttamente nella funzione dichiarata per il success.

success:function(result){
var contenuti = $("li>div","#sortme").map(function(){return $(this).text();}).get()
.sort(function(a, b){console.log(a);return a - b;});
$("li>div","#sortme").each(function(id){$(this).html(contenuti[id]);});
},

Vedi se risolvi così.

[DarioMarco]

Indubbiamente le mie conoscenze non sono proprio il massimo ma nemmeno a terra altrimenti non avrei fatto funzionare uno script ajax ma ad ogni modo perdona la mia gaff è stato un errore di copia/incolla, avevo già provato come mi hai postato tu, ma non funziona, non fa nulla e nemmeno il debugger ne vuole sapere nulla

[KillerWorm]

è stato un errore di copia/incolla

Ah ok

Io non capisco cosa esattamente vai a fare con sortable(). E' un metodo del pacchetto UI, giusto?
All'evento update (che avviene dopo che l'utente scambia posizione di una qualsiasi voce) effettui la chiamata Ajax, e alla risposta esegui il riordinamento dei contenuti nei div, giusto? Non capisco il senso della cosa.

Ad ogni modo io avrei voluto vedere anche la parte html, come ti ho indicato prima, per capire se ci possono essere problemi relativi al codice o alla struttura usata nell'html stesso.

Puoi postare il pezzo di codice html, cioè tutto il blocco ul con id #sortme (chiaramente con tutto il relativo contenuto)?

[DarioMarco]

<ul id="sortme">
<?php

$result = mysql_query("SELECT * FROM `$tabella` where `data` = '".$dataAtt."' ORDER BY `pos` ASC") or die(mysql_error());
$righe = mysql_num_rows($result);

if($result && $righe==0){
header ("location: ".$percorso."/generaIndice.php");//redirect
exit;
}

$totpos = $righe+1;
while($row = mysql_fetch_array($result)) {
?>
<li class="ui-state-default" id="menu_<?=$row['id'] ?>"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><table width="103%" border="0" align="left"><tr align="left" valign="top"><td width="3%"><div id="pos" class="posiz"><?=$row['pos']?></div></td><td width="3%" nowrap="nowrap"> <font size="-3" color="#FF0000"><?=$row['posprec']?></font> <font size="-2" color="#000099"><?=$row['settimane']?></font></td>
<td width="8%" align="center" valign="top" nowrap="nowrap" class="titolo" id="<?=$row['id']?>"><img src="../immagini/<?=$row['stato']?>.png" border="0" align="top" /></td>
<td width="34%" nowrap="nowrap" class="titolo" id="<?=$row['id']?>"><?=$row['titolo'] ?> </td><td width="38%" nowrap="nowrap" class="artista" id="<?=$row['id']?>"><?=$row['artista']?></td>
<?php if ($row['link'] != "" or $row['link'] != null){ ?>
<td width="2%"><font size="-1"><a href="#" onClick="window.open('../video.php?video=<?=$row['link']?>','finestra','width=570, height=325, location=no');">Vedi</a></font></td>
<td width="2%" id="<?=$row['id']?>" class="link" ><img src="../immagini/video.png" /></td>
<?php } else {?>
<td width="2%" id="<?=$row['id']?>" class="link" ><img src="../immagini/no-video.png" width="35" height="20" /></td>
<?php } ?>
<td width="4%"> <?=$row['voti']?></td>
<td width="5%" align="center"><a href="cancella.php?id=<?=$row['id']?>" onclick="return conferma();"><img src="../immagini/x.png" border="0" /></a></td>
</tr>
</table></li>
<?php
}
mysql_close()
?>
</ul>
<div>
<ul id="sortme">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><font color="#FF9900"><form action="addinplace.php" method="post"><table width="103%" height="46"><tr>
<td width="4%" height="40"><?=$totpos?><input name="pos" type="hidden" id="pos" value="<?=$totpos?>" /></td><td width="28%"><input name="titolo" type="text" id="titolo" data-validation="required" placeholder="titolo" /></td><td width="28%"><input name="artista" type="text" id="artista" data-validation="required" placeholder="artista" /></td><td width="31%"><input name="link" type="text" id="link" placeholder="link"/></td>
<td width="9%"><input type="submit" name="button" id="button" value="Aggiungi" /></td>
</tr>
</table>
</form>

<script>
var myLanguage = {
requiredFields : '<img src="../immagini/divieto.gif">'
};
$.validate({
language : myLanguage
});
</script>
</font></li>
</ul>


scusa se lo scrivo in questo modo brutale ma è un periodo che il form non mi accetta i codici. Questo è il codice di solo la lista

[KillerWorm]

Nessun problema per il modo brutale ma quello che ti ho chiesto è il blocco di codice HTML. Quello che hai postato è il sorgente PHP, giusto?... cerca di capirmi, sebbene io sia in grado di smontarlo e rimontarlo a dovere per capire se può esserci qualche problema (cosa che ho già constatato) sarebbe meglio che tu postassi il codice HTML, cioè quello che risulta, lato client, sulla tua pagina quando la apri sul browser.

Quindi, ti chiedo nuovamente, puoi postare l'HTML in questione?
Se non sai come recuperare il codice sorgente HTML dalla tua pagina, vedi un po' su google, non è difficile: https://www.google.it/#q=visualizza+sorgente+pagina

Ad ogni modo ho già visto che stai usando id uguali (vedi il PS: sul mio primo post), questo non è consentito è può creare problemi soprattutto quando devi selezionare e manipolare tali elementi da script.

Inoltre la struttura HTML che ne salta fuori da quel PHP, non è la stessa che hai indicato sul fiddle del tuo primo post.
Tabelle, e quant'altro, non erano presenti. Il selettore jQuery che ti ho indicato $("li>div","#sortme") non va chiaramente bene, perché questo va a cercare dei div che sono figli diretti di li, mentre dal tuo PHP, si deduce che ci sono di mezzo degli elementi table e quindi i div non stanno direttamente dentro gli li.
Capisci che è difficile aiutarti se non dai indicazioni precise.

Comunque, risolvi il problema degli id, poi sostituisci il selettore in questo modo $("li div","#sortme").
Vedi se va così, altrimenti, se vuoi che ti si aiuti, fai quanto ti si consiglia.

[DarioMarco]

Scusami ma avevo capito di dover postare il sorgente, ho postato il codice delle prime tre posizioni, inoltre andando per gradi ho cercato di risolvere il problema dei div sperando di aver capito bene, ovvero da div id="pos" trasformati a div di="pos_n" , spero di aver fatto giusto.

<ul id="sortme">
<li class="ui-state-default" id="menu_712"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><table width="103%" border="0" align="left"><tr align="left" valign="top"><td width="3%"><div id="pos_1" class="posiz">1</div></td><td width="3%" nowrap="nowrap"> <font size="-3" color="#FF0000">2</font> <font size="-2" color="#000099">5</font></td>
  <td width="8%" align="center" valign="top" nowrap="nowrap" class="titolo" id="712"><img src="../immagini/su.png" border="0" align="top" /></td>
  <td width="34%" nowrap="nowrap" class="titolo" id="712">Something New </td><td width="38%" nowrap="nowrap" class="artista" id="712">Axwell ft. Ingrosso</td> 
    <td width="2%"><font size="-1"><a href="#" onClick="window.open('../video.php?video=https://www.youtube.com/watch?v=eCH9gClZprM','finestra','width=570, height=325, location=no');">Vedi</a></font></td>
  <td width="2%" id="712" class="link" ><img src="../immagini/video.png" /></td>
    <td width="4%"> 0</td>
  <td width="5%" align="center"><a href="cancella.php?id=712" onclick="return conferma();"><img src="../immagini/x.png" border="0" /></a></td>
</tr>
</table></li>

<li class="ui-state-default" id="menu_711"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><table width="103%" border="0" align="left"><tr align="left" valign="top"><td width="3%"><div id="pos_2" class="posiz">2</div></td><td width="3%" nowrap="nowrap"> <font size="-3" color="#FF0000">1</font> <font size="-2" color="#000099">5</font></td>
  <td width="8%" align="center" valign="top" nowrap="nowrap" class="titolo" id="711"><img src="../immagini/giu.png" border="0" align="top" /></td>
  <td width="34%" nowrap="nowrap" class="titolo" id="711">Outside </td><td width="38%" nowrap="nowrap" class="artista" id="711">Calvin Harris ft. Ellie Goulding</td> 
    <td width="2%"><font size="-1"><a href="#" onClick="window.open('../video.php?video=https://www.youtube.com/watch?v=J9NQFACZYEU','finestra','width=570, height=325, location=no');">Vedi</a></font></td>
  <td width="2%" id="711" class="link" ><img src="../immagini/video.png" /></td>
    <td width="4%"> 0</td>
  <td width="5%" align="center"><a href="cancella.php?id=711" onclick="return conferma();"><img src="../immagini/x.png" border="0" /></a></td>
</tr>
</table></li>

<li class="ui-state-default" id="menu_714"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><table width="103%" border="0" align="left"><tr align="left" valign="top"><td width="3%"><div id="pos_3" class="posiz">3</div></td><td width="3%" nowrap="nowrap"> <font size="-3" color="#FF0000">4</font> <font size="-2" color="#000099">5</font></td>
  <td width="8%" align="center" valign="top" nowrap="nowrap" class="titolo" id="714"><img src="../immagini/su.png" border="0" align="top" /></td>
  <td width="34%" nowrap="nowrap" class="titolo" id="714">Intoxicated </td><td width="38%" nowrap="nowrap" class="artista" id="714">Martin Solveig ft. GTA</td> 
    <td width="2%"><font size="-1"><a href="#" onClick="window.open('../video.php?video=https://www.youtube.com/watch?v=94Rq2TX0wj4','finestra','width=570, height=325, location=no');">Vedi</a></font></td>
  <td width="2%" id="714" class="link" ><img src="../immagini/video.png" /></td>
    <td width="4%"> 0</td>
  <td width="5%" align="center"><a href="cancella.php?id=714" onclick="return conferma();"><img src="../immagini/x.png" border="0" /></a></td>
</tr>
</table></li>
</ul>

[KillerWorm]

Ok, lo script è questo:

var contenuti = $("#sortme div.posiz").map(function(){return $(this).text();}).get()
.sort(function(a, b){return a - b;});
$("#sortme div.posiz").each(function(id){$(this).html(contenuti[id]);});

Ho provato col tuo html e funziona.

Per il resto, gli id che hai sostituito nei div potrebbero anche andare bene (mi chiedo comunque a cosa ti serve indicare quegli id), ma sono tutti gli altri a non andar bene, oltre a varie cose nel tuo codice che risultano non valide.

Il validatore mi segnala diversi errori. Cerco di sintetizzarli qui:
- il valore dell'attributo "ID" non può iniziare con un numero (vedi id="714");
- l'attributo "ALT" è obbligatorio per i tag <img>;
- gli "ID" devono essere univoci, cioè non possono esserci id uguali all'interno dello stesso documento (come già ti ho indicato);

Inoltre l'impostazione del codice in cui mescoli struttura, contenuti, e formattazione degli elementi, non è il massimo... ma vabbè.

Poi vedi un po' tu.