I have a function with drag&drop HTML5, so. I need to save 2 elements dropped in different div element, so, I made a structure to save them, all is working, except one thing, my ajax tequest is not been working properly. I read the elements via .each() function, I detect if I've been inserted an element, if not, I inserted and get the ID from DB, then, in teory, the each function pass to the second element and make the same process but, if I already insert an element before, took that ID from div "data-id" tag and update the registry in my DB. But the ajax request make two process separately, I mean, make 2 rounds, and then insert that 2 elements separately, and I get 2 IDs, not 1. This is my code.
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
$(".team").removeClass('selected');
var torneo = $(ev.target).attr("data-tournament");
var jornada = $(ev.target).attr("data-jornada");
var partido = $(ev.target).attr("data-partido");
var undef = 0;
if($(".match-container-"+partido).find("div.posiciones img").length==2)
{
$(".match-container-"+partido).find("div.posiciones img").each(function()
{
/*if(typeof $(".match-container-"+partido).find("div.posiciones img").attr('data-equipo')== 'undefined')
{*/
alert("El parent de: "+$(this).attr('data-tooltip')+" es: "+$(this).parent().attr("data-equipo"));
$(".match-container-"+partido).find("div.posiciones img").attr('data-equipo',$(this).parent().attr("data-equipo"));
/*}
else
{
alert($(this).parent().attr("data-equipo"));
}*/
var equipo = $(this).attr("data-equipo");
var team = $(this).attr("data-id");
console.log("entro al igual a 2");
console.log("FOUNDED:"+$(".match-container-"+partido).find("div.posiciones img").length);
/*$(".match-number-container-"+partido).removeClass('blue')
$(".match-number-container-"+partido).addClass('green')*/
if($(".match-container-"+partido).find("div.posiciones img").length==2)
{
$(".match-container-"+partido).find("div.posiciones img").attr('draggable','false');
$(".match-container-"+partido).find("div.posiciones").attr('ondrop', 'false');
$(".match-container-"+partido).find("div.posiciones").attr('ondragover', 'false');
}
alert("Se insertará el partido: "+partido+", de la jornada: "+jornada+" del: "+torneo+" con: "+$(this).attr('data-tooltip')+" de ID "+team);
if(typeof $(".match-container-"+partido).attr('data-id')== 'undefined')
{
alert("Entro al AJAX de vacío"+$(".match-container-"+partido).attr('data-id'));
$.ajax({
url: '<?=base_url();?>jornada/insertarPartido',
type: 'POST',
dataType: 'json',
data: {param1: jornada,
param2: torneo,
param3: team,
param4: undef,
param5: equipo,
param6: $(this).attr('data-tooltip')},
success:function(json)
{
if(json.response_code=="200")
{
alert("insertado");
$(".match-container-"+partido).attr('data-id',data.response_id);
}
console.log(data);
},
error:function(xhre)
{
console.log("error");
console.log(xhre)
}
})
}
else
{
$.ajax({
url: '<?=base_url();?>jornada/insertarPartido',
type: 'POST',
dataType: 'json',
data: {param1: jornada,
param2: torneo,
param3: team,
param4: $(".match-container-"+partido).attr('data-id'),
param5: equipo},
success:function(json)
{
if(json.response_code=="200")
{
alert("insertado");
}
console.log(data);
},
error:function(xhre)
{
console.log("error");
console.log(xhre)
}
})
}
});
}
I hope you could help me.
I already solve this. I had to add this attribute to the ajax request:
async: false,
I was reading ajax documentation, and we can use this conf, if we want to send two request in the same block.