Hola a todos:
Obtuve un sortable list a través de un código abierto, el cual modifiqué a requerimiento mío.
Funciona sin problemas, sin embargo, cuando llamo al php a través de AJAX
no funciona.
Código AJAX.js
Código:
function nuevoAjax()
{
var xmlhttp=false;
try
{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(E) { xmlhttp=false; }
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') { xmlhttp=new XMLHttpRequest(); }
return xmlhttp;
}
function cargaA(UNO,DOS){
var DIV= document.getElementById('ordenar');
var ajax=nuevoAjax();
ajax.open("GET", "A.php?cambio="+UNO+"&shape="+DOS, true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==1)
{
DIV.innerHTML="Cargando ...";
}
if (ajax.readyState==4)
{
DIV.innerHTML=ajax.responseText;
}
}
ajax.send(null);
}
Código PHP:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sortable{ list-style-type: none; margin: 0;
padding: 0; width: 50%; float:left;}
#sortable .default{ cursor:move; margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 45px; }
.default {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<?php
require("../../connect.php");
$cambio = $_GET['cambio'];
$formas = $_GET['shape'];
$query = "SELECT * FROM table WHERE field='$cambio' ORDER BY posicion ASC";
$result = mysql_query($query) or die(mysql_error().': '.$query);
if(mysql_num_rows($result)) {
echo "<div id=\"sortable\">
";
$i=1;
while($item = mysql_fetch_assoc($result)) {
echo "<div id=\"".$item['posicion']."\" class=\"default\">Arrastrame $i</div>
";
$i++;
}
echo "<div id=\"$i\" class=\"default\">arrastrame $i</div>
</div>
<h3><span id=\"listados\"></span></h3>";
}
?>
<script>
$(function() {
$('#sortable').sortable({
update: function(event, ui) {
var productOrder = $(this).sortable('toArray').toString();
$("#listados").text (productOrder);
}
});
});
</script>
SE MUESTRA EN :
Código:
... <div id="ordenar"><p>Para continuar,<br>Complete el paso anterior</p></div> ....
Lei algo en la web de $(".sortable").sortable("refresh"); , pero por más que intento implementarlo no me da resultado.
Si alguien me puede orientar en el tema se lo agradecería.
De antemano
Gracias.