onClick echo PHP code to div (AJAX)

Question

So what I'm trying to do is the following:

first: When the button add-location is clicked this loads a php file using AJAX.

jQuery

$('.add-location').click(function() {
        var locationName = $(this).data('location');
            $.post('http://www.example.com/reload-location-2.php?addparam',
            {locationName: locationName}, function(data) {
                $("textarea#location").html(data);
        })
    });

PHP FILE

<?php start_session();
$locationName = array_key_exists('locationName', 
$_POST) ? (string) $_POST['locationName'] : '';

   if(isset($_GET['delparam'])){
       unset($_SESSION['locations'][$locationName]);
   }

   if(isset($_GET['addparam'])){
    $_SESSION['locations'][$locationName] = $locationName;
   }
?>

<?php foreach ($_SESSION['locations'] as $location): ?>
<?php echo htmlspecialchars($location); echo "\n"; ?>
<?php endforeach;?>

This all works like a charm! No worries here. No what I'm trying to do is when the button add-location is clicked this echo's the following code to a div called textarea#thema.

<?php foreach ($_SESSION['products'] as $product): ?>
    <?php echo htmlspecialchars($product); echo "\n"; ?>
<?php endforeach;?>

OR, if that's easier when the page is loaded -> echo that code to the textarea#thema div.

I do not understand AJAX that much but I'm getting there. But I think the last option maybe the easiest solution?

Could anyone help me figure this one out?

---

What I tried

Right now, When the button add-location is clicked I reload a previous jQuery script:

$('.add-location').click(function() {
        var productName = $(this).data('product');
            $.post('http://example.com/reload-2.php?addparam',
            {productName: productName}, function(data) {
                $("textarea#thema").html(data);
        })
    });

This works, but it adds an extra <p>-tag leaving me with a line break in the code.

I also changed the .html(data); to .val(data); for the textareas. Also I made a new PHP file with just this code:

<?php foreach ($_SESSION['products'] as $product): ?>
    <?php echo htmlspecialchars($product); echo "\n"; ?>
<?php endforeach;?>

And this jQuery code:

 $('.add-location').click(function() {
            var productName = $(this).data('product');
                $.post('http://www.example.com/reload-3.php', 
                {productName: productName}, function(data) {
                   $("textarea#thema").val(data);
            })
        });

But still no go... And I don't think this is the way to go?? I hope I gave enough information.

Answer 1

You should use .val() function to fill textarea, not .html().