How to pass JavaScript values to PHP within the Ajax

Question

Here is the situation.

I'm trying to pass from some Javascript values to various PHP functions within my ajax so it can properly be displayed on the page.

Here is my code:

       $("[data-department-id]").click(function() {                   
                id = $(this).attr('data-department-id');     
                document.getElementById('department'+id).innerHTML = '';                  
                $.ajax({
                    url:"/desk/template/fetchtickets.php",
                    type: 'POST', 
                    dataType: 'json',                      
                    data : {
                      'id' : id  
                    },
                    success: function (res) {                            
                        $('#department'+id).append('<ul>');
                        for (var key in res) { 
                            
                            var ticketId = res[key].id;
                            var clientId = res[key].clientid;
                            var clientName = res[key].name;
                            var clientColor = res[key].hexColor;    
                            
                           <?php  $ticketId = '"+ticketId+"';   ?>   
                           <?php  $clientId = '"+clientId+"';   ?>   
                           <?php  $clientName = '"+clientName+"';   ?>   
                           <?php  $clientColor = 'clientColor';   ?> 
                           
                           $('#department'+id).append('<li class="list-group-item list-group-item-light" data-date-2="<?php echo Ticket::lastReplyStamp($ticketId); ?>"> <span class="text-width"><a href="?route=tickets/manage&id='+res[key].id+'">'+res[key].ticket+'  '+res[key].subject+'</a></span><div class="tools" ><span class="client-listing"> <?php clientBadge($clientId,$clientName,$clientColor); ?>    <?php // echo "<scipt>document.writeln(test)</script>";    ?> '+test+'      </div></div></li>');
                        }                     
                        $('#department'+id).append('</ul>');  
                    }
                });                                       
            })

When I do a console.log();

It shows the proper value, however, when I do an echo $ticketId, it shows +ticketId+.

Now I did do a document.write and document.writeln and it still doesn't work.

Is there a proper solution to resolve my problem?

Answer 1

You can not add php code here.You can use JQuery to change value in the Dom or set some hidden inputs value, but you can not set php variable in JS. PHP runs on the server side. When the php code is running, your js code is waiting to be run on the client's computer.

These line are always going to be interpreted as string assign from server side.

<?php  $ticketId = '"+ticketId+"';   ?>   
<?php  $clientId = '"+clientId+"';   ?>   
<?php  $clientName = '"+clientName+"';   ?>   
<?php  $clientColor = 'clientColor';   ?> 

Answer 2

The order of your code processing is something like this:

1. PHP code get processed
2. PHP returns HTML
3. User clicks an element (in your case data-department-id )
4. JQuery sends ajax request
5. Server processes the request and sends response back to the frontend
6. Ajax success function receives the response and now has the response in javascript variable res which is passed as argument of success(res) function
7. All the code inside success is executed

Alternatively if the server throws an error response, no 6. and 7. would trigger the error callback

But the main part it, the PHP code in your success() function will NOT run as you are thinking, which is after the Ajax receives response. At this point all you can do is use javascript to manipulate the variables.

So in short, change below part and use javascript or jQuery if you have it to change DOM elements based on response.

<?php  $ticketId = '"+ticketId+"';   ?>   
...
...

For example, let's say you have an H1 tag which shows ticket id. You would do

// jQuery
$('#ticketIdElement').text(res.id);