How to reflect changes of PHP variable in JQuery / HTML

Question

I have a $return in php that changes according to what was posted on the form. Here's the JQuery & HTML Code:

$(function() {
           $('#query_sort').on('change', function(event) {
               var query_sort = $(this).val();
               alert(query_sort);

               if(query_sort) {
                   $.ajax({
                       method: "POST",
                       url: "/_php/nds/return_criteria_checkbox.php",
                       data: {query_sort: query_sort}
                   })
                       .done(function(data){
                           alert(<?php echo $query; ?>);
                           $('#dashboard_table_tbody').html(<?php echo $return; ?>);
                   });
               }
            });
        });

And for my tbody,

<tbody id = "dashboard_table_tbody" style = "height: 10px;">
    <?php echo $return; ?>
</tbody>

Even when I change my form, which gets auto-submitted when it is changed (without refreshing the webpage) the $return changes too, but the HTML page doesn't reflect that change. What Can I do to have it update?

php is a server side language, you can not do that without refreshing the page. you have to use js — Giacomo M
– Giacomo M, Commented Jul 7, 2019 at 15:10
@GiacomoMasseroniChiaro Yeah, I'm not asking that. $return be changed, that's fine, but how do I reflect that on the webpage without refreshing? — Dragonsnap
– Dragonsnap, Commented Jul 7, 2019 at 15:11
this is the problem : $('#dashboard_table_tbody').html(<?php echo $return; ?>) — Giacomo M
– Giacomo M, Commented Jul 7, 2019 at 15:14
@GiacomoMasseroniChiaro That works the first time it's loaded, but once $return changes, it doesn't reflect the change in $return. — Dragonsnap
– Dragonsnap, Commented Jul 7, 2019 at 15:16
exact, cause $return is PHP code, and PHP is server side language, as i said — Giacomo M
– Giacomo M, Commented Jul 7, 2019 at 15:17

Giacomo M · Accepted Answer · 2019-07-07 15:25:19Z

1

You are confusing client-side and server-side technologies.
PHP is a server side language, JS is (also) a client-side language.

To do what you need you have to use javascript.
Your return_criteria_checkbox.php file should return something like that:

return_criteria_checkbox.php

echo json_encode(['return_from_php' => 'something you want to return']);

You HTML file becomes:

$(function() {
       $('#query_sort').on('change', function(event) {
           var query_sort = $(this).val();
           alert(query_sort);

           if(query_sort) {
               $.ajax({
                   method: "POST",
                   url: "/_php/nds/return_criteria_checkbox.php",
                   data: {query_sort: query_sort}
               })
                   .done(function(data){
                       $('#dashboard_table_tbody').html(data.return_from_php);
               });
           }
        });
    });

edited Jul 7, 2019 at 15:25

answered Jul 7, 2019 at 15:18

Giacomo M

4,7258 gold badges32 silver badges70 bronze badges

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

Comments

Shubham Developer · Accepted Answer · 2019-07-07 17:18:51Z

You will need to return data in json form from the URL you are posting data through Ajax and slight changes in JQuery function as the way I have done below and you are set to go. Below Lines of code is for taking input from Html and submitting it without refreshing the page with the help of JQuery and Ajax. We will also need to create a php file called 'return_criteria_checkbox.php' and sending back JSON data to this page.

<input type="text" id="query_sort">
<p id="dashboard_table_tbody" style="height: 10px;"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$('#query_sort').change(function(event) {
    var query_sort = $(this).val();
    // alert(query_sort);
    if(query_sort) 
    {
        $.ajax({
            type: "POST",
            url: "return_criteria_checkbox.php",
            data: {query_sort: query_sort},
            cache: false,
            success: function(data)
                {
                    var replaced_Data = data.replace(/\"/g, "");
                    $('#dashboard_table_tbody').html(replaced_Data);
                    $('#query_sort').val('');
                }
            });
    }
});

Below are the lines of code for return_criteria_checkbox.php file:

<?php
// Fetching Values From Ajax URL
$posted_data = $_POST['query_sort'];
echo json_encode($posted_data);
// You can also insert data to database using below lines of code
// $connection = mysql_connect("localhost", "root", "");
// $db = mysql_select_db("mydba", $connection);
// if (isset($_POST['name1'])) {
// $query = mysql_query("insert into form_element(posted_data) values('$posted_data')"); //Insert Query
// echo "Form Submitted succesfully";
// }
// mysql_close($connection); // Connection Closed
?>

Use the Above code and you are good to go.

Collectives™ on Stack Overflow

How to reflect changes of PHP variable in JQuery / HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related