jquery updating a div in ajax diesnt work properly, when using a variable

Question

hi,

i got the following code

var zieldiv = $(this).attr('id');
$.ajax({
  url: 'index.php?params',
  type: 'POST',
  data: { color:thenewcolor, zieldiv:zieldiv },
  timeout: 50000,
  beforeSend: function() {                                            
    $("#" + zieldiv).css({background: "#" + thenewcolor} );
  }
});

I use this for dragging a small div into a bigger div. the variable at the beginnning would give out the string "test1". So in the ajax thing the css of a div which matches the var zieldiv should be updatet. Problem is, if i would place a string instead a var into the $(...) like $("#test1") it acts like its supposed to, the #test1 gets updated. but if i use the var $("#" + zieldiv) the parent div, which is surrounding the #test1-div gets updated. but i know for sure the var zieldiv contains the string "test1", because when passing it to php it contains "test1". so i think this is a little strange. do you have any ideas?

thanx, maschek

Answer 1

You could just do this:

var zieldiv = this.id;

$("#" + zieldiv).css({background: "#" + thenewcolor} );
$.ajax({
     url: 'index.php?params',
     type: 'POST',
     data: { 'color':thenewcolor, 'zieldiv':zieldiv },
     timeout: 50000
});

I'm guessing this is a simplified example, make sure you have the variable defined before your ajax call so it's passed into the closure, using something like this inside the callback won't work, because it doesn't know what you're talking about, this is in a different context when it returns.

Answer 2

    $(document).ready(function () {
$(\'#test1,#test2,#middle\').sortable();
$(\'#000,#ccc,#fff\').draggable({
helper: \'clone\',
});

$(\'#test1,#test2,#middle\').droppable({
accept: \'#000,#ccc,#fff\',   
hoverClass: \'txhover\',
drop: function(el, ui) {

if (ui.draggable.hasClass(\'txdropped\'))
return;
var drag = ui.draggable.clone();
drag.addClass(\'txdroppped\');
drag.id = \'cloneOf\' + ui.draggable.id;
$(this).append(drag);

var user = '.$user.'; 
var zieldiv = $(this).attr(\'id\');                                                                                                                                             
var thenewcolor = ui.draggable.attr(\'id\');
var backgroundcolor = this.style.backgroundColor;

$.ajax({
       url: \'index.php?eID=colors_ajax\',
       type: \'POST\',
       data: { color:thenewcolor, zieldiv:zieldiv, user2:user },
       timeout: 50000,
       beforeSend: function() {                                            
       $("#" + zieldiv).css({background: "#" + thenewcolor} );
       $("#tx-response").show();
       $("#tx-response").fadeOut(2000);
       }
});
}
});
});