Passing javascript variable to php without refreshing the page

Question

I have a 5x5 grid of div boxes (25 of them) and I am using jQuery UI to register when I drop a item in it. It will receive the title of the box it was dropped in and the name of the item, that part works.

I want to pass the title and name to PHP without refreshing the page (because then the items will reset). I get a "success!" but it seems like it doesn't pass the data.

index.php

<script>
    $(function() {
        $( "li img" ).draggable({ 
            snap: ".grid", 
            start: function (event, ui ) {
                item = $(this).attr('title');
            }
        });
        $( "li .grid" ).droppable({
            drop: function( event, ui ) {
                box = $(this).attr('title');
                $.ajax({
                    type: "POST",
                    url: 'index.php',
                    data: { box : 'box' },
                    success: function(data){
                        alert("success!");
                    }
                });

            }
        });
    });        
</script>

sessions.php

<?php
   session_start();
if(isset($_POST['box']))
{
   // store session data
   $_SESSION['box'] = $_POST['box'];
}
   //retrieve session data
   echo $_SESSION[box];
?>

How do I pass the title and name to PHP without refreshing the page?

Thanks, you just gave me an idea, i was stuck on it like 3 hours now. — user3052629
– user3052629, Commented Apr 16, 2015 at 11:11

Felix · Accepted Answer · 2014-01-16 03:24:46Z

1

Try to change the url and your data from this:

url: 'index.php',
data: { box : 'box' }

to this:

url: 'sessions.php',
data: { box : box }

answered Jan 16, 2014 at 3:24

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2918003 Over a year ago

i feel like a total idiot right now.. oh well thanks. while im at it how do i make it add instead of overwrite the data in session[box] ?

user229044 · Accepted Answer · 2014-01-16 03:19:46Z

0

Given that you're doing this...

box = $(this).attr('title');

I assume you want to pass that variable to the server. However, you're just passing the literal string "box", not the variable box.

In your code, you've written this...

data: { box : 'box' },

which needs to be this, to pass the value in box:

data: { box : box },

As an aside, you've created a global variable box. Instead of box = $(this).attr('title');, you should use var box = $(this).attr('title'); to create a variable local to the function.

answered Jan 16, 2014 at 3:19

user229044♦

241k41 gold badges346 silver badges350 bronze badges

3 Comments

user2918003 Over a year ago

i just tryed that, as before i get "success!" but it dosent get the data. i have <?php echo $_SESSION['box']; ?> in my index.php to se if the data is there but it dosen't write enything. and thanks for the "var" tip.

user229044 Over a year ago

Verify the data is actually being sent. Check the value of box or open your browser's developer tools and inspect the AJAX request.

user2918003 Over a year ago

Felix found the stupidest error i have made ever. But big thanks to you for trying to help

Collectives™ on Stack Overflow

Passing javascript variable to php without refreshing the page

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related