Question

I have the following JavaScript code which is inside a function which I am trying to get the soft_left and soft_top variable to be used in other functions. I am having very little if any success. Shown is just the relevant code.

function drawCart()
{
$(".soft_add_wrapper").multidraggable({"containment":"#content"});
$(".soft_add_wrapper").draggable({stop: function(event, ui) { 
  soft_left = $(".ui-draggable").css('left'); 
  soft_top = $(".ui-draggable").css('top');}
}

When I put an alert(soft_top) like so it alerts with the value.

$(".soft_add_wrapper").draggable({stop: function(event, ui) { 
       soft_left = $(".ui-draggable").css('left'); 
       soft_top = $(".ui-draggable").css('top');
       alert(soft_top);}

When I put the alert here it does nothing.

function drawCart(index)
{
$(".soft_add_wrapper").multidraggable({"containment":"#content"});
$(".soft_add_wrapper").draggable({stop: function(event, ui) { 
     soft_left = $(".ui-draggable").css('left'); 
     soft_top = $(".ui-draggable").css('top');
     }
     alert(soft_top);
}

And finally when I try to alert(soft_top) in another function it also doesn’t work. I understand and have read about scope and global variable and all that evil stuff. Some help would be great!!

Answer 1

Consider storing it in the document via jQuery’s data() method – global variables are always annoying to maintain.

$(document).data("myVar", 12345);
$(document).data("myVar"); // returns 12345

Edited: More concrete example:

// soft_left = $(".ui-draggable").css('left');
$(document).data("soft_left", $(".ui-draggable").css('left'));

// get it somewhere else
$(document).data("soft_left")

And yes, you could also use some hidden text-field – you only lose the type. Just use

$('#textfield-soft-left').val($(".ui-draggable").css('left'));
$('#textfield-soft-left').val(); // returns a String