jquery ajax variable to php - php

Question

I'm stuck since 2 weeks, since i decided to use a nice threeview based on the jquery library.
My problem is what i'm trying to get the value of an selected folder as an variable to php.
I'm able to get the value and show it via an Alertbox in Jquery but the value is not posted to the PHP variable. echo shows nothing.
Text under is just to clarify why i need to use this solution with php and so on.
Then this is solved i will keep on struggling to get the whole path that i later will send to a bash script what is already finished. It creates a text file with metatags from an flac or mp3 album for my SQL db already done and working. This app is local for maintainance of the database.
To my problem and code (bear in min what jquery and ajax is totally new for my)
filename: file_browser.php
Jquery part
<script>
$(document).ready(function()
{
$("button").click(function()
{
var dir = ($(".active").text())
$.ajax({
type: "POST",
url:"file_browser.php",
data: dir,
success: function(data){
alert(dir); dir }
});
});
});
</script>
PHP code
<?php
echo "<form>
<button>Append</button>
<div id'japp'>";
if (isset($_POST['dir'])) {
$dir = $_POST['dir']; }
echo $dir;
echo "</div>
</form>";
?>
I will keep on trying, now i at leasthave an chance to get some help to avoid taking one more week on this :).

Answer 1

From the jquery website on $.ajax.
By default, Ajax requests are sent using the GET HTTP method. If the
POST method is required, the method can be specified by setting a
value for the type option. This option affects how the contents of the
data option are sent to the server. POST data will always be
transmitted to the server using UTF-8 charset, per the W3C
XMLHTTPRequest standard.
The data option can contain either a query string of the form
key1=value1&key2=value2, or an object of the form {key1: 'value1',
key2: 'value2'}. If the latter form is used, the data is converted
into a query string using jQuery.param() before it is sent. This
processing can be circumvented by setting processData to false. The
processing might be undesirable if you wish to send an XML object to
the server; in this case, change the contentType option from
application/x-www-form-urlencoded to a more appropriate MIME type.
I'm assuming the value of $(".active").text() is just the value you want to pass without any key paired to it. Format your string in a key/value pairs as shown above and you should be great.

Answer 2

If you need your $_POST array to contain a dir element, you need to send a key - value pair to your script:
var dir = { "dir": $(".active").text() };

Answer 3

You should try this:
<script>
$(document).ready(function()
{
$("button").click(function()
{
// setting a key-value
var dir = { dir: $(".active").text() };
$.ajax({
type: "POST",
url:"file_browser.php",
data: dir,
success: function(data){
alert(dir);} //removed the second 'dir'
});
});
});
</script>

Answer 4

The solution is
{
$("button").click(function()
{
var dir = ($(".active").text()); // from my question (gives name of selected dir)
$.ajax({
type: "POST",
url: "file_browser.php",
data: { dir: "dir" },
success: function(response){ // function(response) was (data)
$('#japp').html(dir); // points to the forms id="japp"
alert(dir); }
});
});
});
Question above solved.
My other mentioned problem
Getting full path instead of just dir. Partly solved.
Gives the hole path as string with dir (wanted) + the dir one more time (not wanted).
It also gives website url i think instead of root (/) (not wanted) + visible path on webpage from filesystem (wanted).
This can be solved with an regex in php but i will first try to make it cleaner by getting only the wanted stuff with this jQuery function.
Left my almost done solution here just to give a hint there to begin if needed.
var dir = ($(".active").parent('li').text());
Thanks for all help and for leading me on the right way #Frank B, #jeroen & #Zim84