1

I've created a table with data and auto-generated buttons. When i click in 1 button .add_task, a modal opens, which display another table according to retrieved key: user_id of button.

The functionallity of button is shown below:

    $(document).on('click', '.add_task', function(){
        var user_id = $(this).attr("id");
        $.ajax({
            url:"actions/fetch_jobs.php",
            method:"POST",
            data:{user_id:user_id},
            success:function(data)
            {
                $('#jobModal').modal('show');
                $('.modal-title').text("Jobs");
                `$('#vis_id')`.val(user_id);
                $('#show_inseredjobs').html(data);
            }
        })
    });

The problem is that i want to take value $('#vis_id') or user_id and put it in a php query of opened modal.

<div id="jobModal" class="modal fade">
    <div class="modal-dialog">
        <form method="post" id="job_form" enctype="multipart/form-data">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Jobs</h4>
                </div>
                <div class="modal-body">
                    <div id="show_inseredjobs"></div>
                    <br/>
                    <select name="job_desc" class="form-control action" id="job_desc" data-live-search="true"  title="Select Job"></select>
                </div>
                <div class="modal-footer">
                <input type="hidden" name="vis_id" id="vis_id" />
                <?php
                    require 'conn.php';
                    $result = $conn->query("SELECT job_desc FROM jobspervisit WHERE jvid = $('#vis_id') AND job_desc='Fumes'");
                    if($result->num_rows == 1) {
                        // row not found, do stuff...
                ?>
                <a href="print/print_fumes_card.php" target="_blank" class="btn btn-success pull-left"><span class="glyphicon glyphicon-print"></span>print button</a>
                <?php
                    }
                ?>
                    <input type="submit" name="action" id="action" form="job_form" class="btn btn-success" value="Προσθήκη" />
                    <button type="button" class="btn btn-default" data-dismiss="modal">Άκυρο</button>
                </div>
            </div>
        </form>
    </div>
</div>

More specifically, i want to do that: $result = $conn->query("SELECT job_desc FROM jobspervisit WHERE jvid = $('#vis_id') AND job_desc='Fumes'");

How can i pass that js variable in php?

I tried different combinations of expressing variable, but the code crashes. If i try to give manually numbers, the code works. To conclude, how can i pass value $('#vis_id') or user_id in $result = $conn->query("SELECT job_desc FROM jobspervisit WHERE jvid = $('#vis_id') AND job_desc='Fumes'");

Improve this question
5
  • Seems like you need to include $('#vis_id') or user_id in your data parameter and then it would become a form variable in the PHP. Commented Jan 4, 2023 at 19:09
  • The fetch_jobs.php returns a table according to user_id, which has been acquired by another ajax query of diplaying main table with buttons. My problem, is how can i pass these js variables in inline php query without using ajax again. I've been confused, the solutions seems simple, but i don't know how to do it. Commented Jan 4, 2023 at 19:15
  • I'm not familiar with PHP, but I don't think that's possible because JS is client side and PHP is server side. The AJAX crosses that barrier. Commented Jan 4, 2023 at 19:26
  • 1
    If you want to do something more in php after your ajax call runs, then you need to send another http request to the server, so that another php script can execute on the server. That can either be done with ajax, or by posting a form, or navigating to a new URL. The request can be instigated by a user or by some JavaScript. In other words, all the usual ways a browser can communicate with a server are available to you - there is nothing unusual or particularly different about this scenario. You just need to decide which approach you want to take. Commented Jan 4, 2023 at 19:28
  • 1
    You can do it in one AJAX call - if you load your modal remotely (as an external PHP file). Since you're loading it remotely, and you're already passing the user_id to it, just execute whatever PHP code you need, before you render the modal contents. Commented Jan 4, 2023 at 20:05

2 Answers 2

Reset to default
1

Your modal is static and you can't run PHP code in the modal. I think you must do this.

First change:

<?php
  require 'conn.php';
  $result = $conn->query("SELECT job_desc FROM jobspervisit WHERE jvid = $('#vis_id') AND job_desc='Fumes'");
  if($result->num_rows == 1) {
    // row not found, do stuff...
?>

  <a href="print/print_fumes_card.php" target="_blank" class="btn btn-success pull-left"><span class="glyphicon glyphicon-print"></span>print button</a>

<?php
  }
?>

To:

<div id="job_desc"></div>

And then, in the actions/fetch_jobs.php file when you return data:

require 'conn.php';
$result = $conn->query("SELECT job_desc FROM jobspervisit WHERE jvid = '".$_POST["user_id"]."' AND job_desc='Fumes'");
if ($result->num_rows == 1) {
  $response = "";
  foreach ($result as $row) {
    $response .=  '<a href="print/print_fumes_card.php" target="_blank" class="btn btn-success pull-left"><span class="glyphicon glyphicon-print"></span>print button</a>';
  }
}
return json_encode([YOUREPREVIOUSRETRUN,$response]);

And then in ajax part you must parse json data first variable [YOUREPREVIOUSRETRUN] your previous data and second data you must put it on $("#job_desc").html(second data).

Or, you can use an iframe for this part but I don't suggest that.

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

Comments

1

From what I can tell by looking at the structure of your modal, you seem to be using Bootstrap, though I am unclear on the version. If it's Bootstrap 5, read on. If not, please add that information to your question, and let me know.

Here's how you can do it all in one call.

First, change the page from which you are opening the modal, so that the modal isn't a part of it. You need to make a separate file to hold the modal contents. Let's call that file remote-file.php. This would be inside that file.

<?php
    // your PHP logic goes here - parse the received $_POST parameters, prepare your query - if needed, query your database
    // retrieve the data, and place it in variables for later display

    require 'conn.php';
    $jvid = isset($_POST['jvid'] ? (int)$_POST['jvid'] : 0;

    $result = $conn->prepare("SELECT job_desc FROM jobspervisit WHERE jvid = ? AND job_desc='Fumes'");
    $result->bind_param("i",$jvid);
    $result->execute();

    if($result && $result->num_rows == 1) {
        // row found, do stuff
        $output = '<a href="print/print_fumes_card.php" target="_blank" class="btn btn-success pull-left"><span class="glyphicon glyphicon-print"></span>print button</a>';
    } else {
        $output = "Nothing found";
    }
?>
<div class="modal-dialog">
    <form method="post" id="job_form" enctype="multipart/form-data">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Jobs</h4>
            </div>
            <div class="modal-body">
                <div id="show_inseredjobs"></div>
                <br/>
                <select name="job_desc" class="form-control action" id="job_desc" data-live-search="true"  title="Select Job"></select>
            </div>
            <div class="modal-footer">
            <input type="hidden" name="vis_id" id="vis_id" value="<?=$jvid?>">
        <?php
            echo $output;
        ?>
                <input type="submit" name="action" id="action" form="job_form" class="btn btn-success" value="Προσθήκη" />
                <button type="button" class="btn btn-default" data-dismiss="modal">Άκυρο</button>
            </div>
        </div>
    </form>
</div>

Some notes about previous code:

  • it is assumed that jvid in your database is an INT type colum. Because of that, we could do (int)$_POST['jvid']
  • if jvid is not an INT but another type of column, we wouldn't do the (int)$_POST['jvid'] bit, and our binding would be slightly different
    // prepare the query
    $jvid = $_POST["jvid"];
    $results = $conn->prepare("SELECT job_desc FROM jobspervisit WHERE jvid = ? AND job_desc='Fumes'");
    $results = $conn->bind_param("s",$jvid);
    $result->execute();

Next, in the original page, where your buttons are (and where your modal's HTML was), you would need this line of code for the modal.

<div class="modal fade" id="jobModal"></div>

This is going to be a wrapper for your modal content. All the rest will be going inside the remote-file.php. Also, your button element, the one that's opening the modal on click? That button doesn't need to have a data-bs-target attribute, because the following code will work (since you're using jQuery and all).

<button class="btn btn-lg btn-success add-task" id="btn" data-id="1234">Open modal</button>

<div class="modal fade" id="jobModal"></div>

<script>
    $(document).ready(function() {
        $(document).on('click', '.add_task', function(){
            var user_id = $(this).attr("id");

            $('#jobModal').load('remote-file.php',{'jvid':user_id },function(){
                var jobModal = new bootstrap.Modal($('#jobModal')[0], {
                    backdrop:"static",
                    show:true
                });

                jobModal.show();
            });
        });
    });
</script>

Final notes:

  • jQuery version: 3.6.3
  • Bootstrap version: 5.3.0
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.