jQuery Form Doesn't Post

I’ve edited my post 4 times now and it still doesn’t print out the code properly. Sorry for the corrupted code but I can’t fix it. I used the help from Jawfin and was finally able to format my code.

I tried this url as well:
url : "<?php echo Router::url(['controller' => 'mealplans', 'action' => 'add']); ?>?test=test",

Do this: new line, 3 back-quotes, new line, code, new line, 3 back-quotes, new line.

I’ve just rewritten it though, ended up debugging your code, fixing indents & syntax - not saying it is correct, just made it readable.

<?php
echo $this->Form->create($mealplan);
echo $this->Form->button(‘Another Button’, [‘type’ => ‘button’,‘id’ => ‘myId2’]);
echo $this->Form->end(); 
echo "test " . _REQUEST[‘test’]; // Undefined index: test
print_r(_REQUEST); //Array ( ) 
?>
<script>
("#myId2").click(function() {
	('#result').append("total:" + total); 
	var test = ("#result").html();
	$.ajax({
		type : "POST",
		url : "<?= Router::url(['controller' => 'mealplans', 'action' => 'add']) ?>",
		dataType : "HTML",
		data : { test : test },
		success : function(data) {
			alert("success");
		}
	});
});
</script>

You had wrong quote characters (like backwards quotes & double quotes), inconsistent usage of single & double quotes, inconsistent spacing & indenting, you missed the $ on the third this. Interpreter would have picked these up though, so no biggy.

My post as a screenshot showing the editor: -

Thanks, Jawfin, for fixing my code.

I forgot to include the following is in my template: <div id="result">data </div>

In my controller, I added:

 public function initialize(): void
        {
            parent::initialize();
            $this->loadComponent('RequestHandler');
        }

In the method of the controller, I added:

$this->set('foo2', $this->request->getData('test'));

Still doesn’t work.

In my template, I added:

echo "test " . $foo2;

I did a debug of whether the request is ajax and it returned false:

debug($this->request->is(['ajax']));//returns false even after button is clicked

I found a forum that said that the problem was due to using an external javascript file and showed that I should put my url in my method like this:

var targetUrl = <?php echo Router::url(['controller' => 'mealplans', 'action' => 'add']); ?>

and use it like this:

 $.ajax({
    type : 'GET',
    url : targetUrl, 
    dataType : 'html', et  cetera

but now I get the error message:
Class ‘Router’ not found

I replaced it with var targetUrl = <?php echo $this->Url->build(["controller" => "Mealplans", "action" => "add",]); ?> and now it doesn’t show an error.

not sure what you are trying to do, but it seems to me, you want to add a mealplan.
And it seems to me, that mealplans and tiles are somehow associated.
Would it not be easier to save the association via checkboxes, to get a start?
If that works, you can still try to implement some drag and drop behaviour.
So just get the basics running and then do finetuning on usability?

My get_total_calories script has the following:

$("#myId2").click(function() {
$('#result').append('total:  ' + total);
var test = $("#result").html();

 $.ajax({
    type : 'GET',
    url : targetUrl,
    dataType : 'html',
    data : {test : test },
    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } ,
    success : function(data) {
		alert("success");
		alert(test);
    },
	error: function () {
         alert('error');
     }
});
}); 

Now the alert pop-up shows neither success nor error. Neither one of the functions get called.

I have a set of meal tiles that get displayed or hidden based on whether the user clicked on the tile buttons. Then the meal tiles get dragged and dropped to the right side box and the top of the box shows the total calories. I don’t understand why it would be easier to use checkboxes but thanks for your input, dirk.

Do you need to use JavaScript to calculate this? Can’t you do it in PHP with the data that gets submitted? JS is very unreliable for things like this; people can change what values will be sent there, or disable JS entirely, so you can’t really trust whatever total you might get this way.

ok.
maybe i can help you, if you provide me some more information about the tiles.
What is the function of the tiles? Do they deliver the amount of calories per mealplan, or…?

Each tile looks like this:

<!-- begin of draggable div-->
<div id="draggable4" class="draggable_meal draggable ui-widget-content item">
<div class="calorie_icon"> 200 CALS</div>
<span>Melted cheese sandwich with 2 slices of bread (120 cals) plus 2 slices of Velveeta (80 cals)</span>
<input type="hidden" name="cals_per_serving" id="cals_per_serving4" multiple="multiple" value="200"/>
</div><!-- end of draggable div-->

I’m using old versions of jQuery. These are the versions that I’m using:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

When I add nonsense characters to my target URL, the error function still doesn’t show an alert so probably the target URL is wrong. I used url : targetUrlasdf and it still didn’t show an error.

I added quotation marks to my target URL and now I get an alert of success.

var targetUrl = "<?php echo $this->Url->build(["controller" => "Mealplans", "action" => "add",]); ?>";

sorry for my bad english, but do i get it right, that the tile provides the calories per dish (what in my opinion would make sense, as the calories per dish are the sum of estimated calories per ingredient for every dish) and that the total sum of calories for each mealplan is the sum of the dishescalories on every day?