jquery from to data

Question

I have a list of divs, which what I want to achieve is when user clicks on column , it gets the data square assigns it to variable from, and when again click on another column it assigns the data to variable to.

I do know how to send values to php by ajax, just the fact of getting the variables from and to is the issue. this is a board game, which i need to send two variable from and to , to server

<div class="column" data-square="4-4">
    <div class="lol">p</div>
</div>
<div class="column" data-square="4-5">
    <div class="lol">p</div>
</div>

<div class="column" data-square="4-6">
    <div class="lol">p</div>
</div>

$( ".column" ).click(function(){
    var from = $(this).data('square');
    var to = $(this).data('square');    
    alert(to);
    alert(from);
});

there are lets say 10 divs //10 of these with different value of data-square p where user clicks on one of them , it should store the data square value in variable from, when user clicks again on another div it should store the variable in variable to

Answer 1

Here's one way of doing it. Make the variables from and to accessible from outside the click event and keep track of their values. First assign a value to from, then to to and perform your ajax request. The Javascript looks like this:

// Create a function scope so we don't messy the global one
(function() {

    var from = null;
    var to = null;

    $(".column" ).click(function(){
        if(from === null)
        {
            from = $(this).data('square');
        }
        else
        {
            to = $(this).data('square');

            //
            // DO YOUR AJAX STUFF HERE
            //

            // Reset
            from = to = null;
        }
    });

}());

Here's a JSFiddle demo

Answer 2

If you know Jquery ajax relations, you should pass data to your php file with Jquery's ajax function ($.ajax({... });) with JSON type. You can fetch an array from php file after php's json_encode function(like echo json_encode($array);).

Answer 3

Fiddled:

http://jsfiddle.net/iambriansreed/4674X/ HTML:

<div id="notes">
    <span class="note1">Click Move From</span>
    <span class="note2">Click Move To</span>
    <span class="note3"></span>
</div>
<div class="column" data-square="4-4">
    <div class="lol">p</div>
</div>
<div class="column" data-square="4-5">
    <div class="lol">p</div>
</div>

<div class="column" data-square="4-6">
    <div class="lol">p</div>
</div>

jQuery: var from_data = false, to_data = false;

$('#notes .note1').show().siblings().hide(); 

$( ".column" ).click(function(){

    if(from_data && to_data) return;  

    if(!from_data){
        $('#notes .note2').show().siblings().hide(); 
        from_data = $(this).data('square');

    }else if(!to_data){
        to_data = $(this).data('square');

        $('#notes .note3').text(
        'Moved from '+from_data+' to '+to_data+'.'
        ).show().siblings().hide();


        setTimeout(function(){
            $('#notes .note3').fadeOut(function(){
                from_data = false; to_data = false;
                $('#notes .note1').show().siblings().hide();                
            });        
        },2000);

    }

});​