CODEWITHSUNDEEP
javascriptjquery
user357034
user357034

Reputation: 10981

need to use variable inside a function globally

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!!

Upvotes: 0

Views: 180

Answers (5)

cdutson
cdutson

Reputation: 738

This is an expansion on Marcel J's answer

if you want to use the data system, the following is a good start:

function drawCart(index)
{
  $(".soft_add_wrapper").multidraggable({"containment":"#content"});
  $(".soft_add_wrapper").draggable({stop: function(event, ui) { 

  /* I think ui.helper will give you the object reference: http://docs.jquery.com/UI/Draggable. My example uses $(this) just in case */
     $(this).data('soft_left', $(".ui-draggable").css('left')); 
     $(this).data('soft_top', $(".ui-draggable").css('top'));
     }));
  alert($(".soft_add_wrapper").data('soft_top');
}

Upvotes: 1

Marcel Jackwerth
Marcel Jackwerth

Reputation: 54762

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

Upvotes: 3

Michael Sparks
Michael Sparks

Reputation: 645

This is an issue of scope and you must register the variables with the window.

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

Upvotes: 0

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

You could move the scope of the variable:

var soft_left ="";
var soft_top = "";
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); 
  });
};

Upvotes: 1

Andreas Köberle
Andreas Köberle

Reputation: 110922

When you add your eventhandler the function wasn't call already and soft_top wasn't set, cause it will be set in the function set will cal when the event is fired. It will be set the first time you drag something.

Upvotes: 1

Related Questions