OnClick load php file into HTML

Question

Basically, here is what I have:

2 Main Tabs;
1 Main Tabs has 4 SubTabs;
Each Tab needs to load code upon selection.

Here is the Nav code:

<div class="container-fluid mt-3">
    <ul class="nav nav-pills justify-content-center" id="tab-city" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="city-dr" data-toggle="tab" href="#droh" role="tab" aria-controls="droh" aria-selected="true">Drohobych</a>
        </li>
    </ul>

    <div class="tab-content" id="city-content">
        <div class="tab-pane show active" id="droh" role="tabpanel" aria-labelledby="city-dr">
            <ul class="nav nav-pills justify-content-center" id="table-content" role="tablist">
                <li class="nav-item mt-2">
                    <a class="nav-link active" id="droh-repair" data-toggle="tab" href="#droh-repairs" role="tab" aria-controls="droh-repairs" aria-selected="true">Repair</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" id="table-dr-fttb-pull-in" role="tab">FTTB Pull In</a>
                </li>
            </ul>

            <div class="tab-content" id="table-content">
                <div class="tab-pane show active" id="droh-repairs" role="tabpanel" aria-labelledby="city-dr">
                    <?php
                    include(__DIR__ . '/tables/dr/table_dr_repair.php');
                    ?>
                </div>
            </div>
        </div>
     </div>
</div>

This is the code that I am trying to include:

<?php
require_once(__DIR__ . '/../../headers/navbar.php');
require_once(__DIR__ . '/../../../db/db_handler.php');
require_once(__DIR__ . '/../../../util/constants.php');
require_once(__DIR__ . '/../../../util/util.php');
?>

<table class="table table-bordered table-hover table-sm">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">Street</th>
        <th scope="col">Phone</th>
        <th scope="col">Date</th>
        <th scope="col">Price</th>
        <th scope="col">Comment</th>
        <th scope="col">Operator</th>
    </tr>
    </thead>

    <?php
    $stmt = $connection->prepare("SELECT * FROM `" . Tables::$table_dr_fttb_pull_in . "` ORDER BY `date` DESC");
    $stmt->execute();
    $result = $stmt->get_result();


    while ($row = $result->fetch_array()) {
        print_task_details_as_table_row($row);
    }
    ?>

</table>

The problem is - nothing happens when the Tab is selected. What I could do - simply get all the code from the file and insert it into HTML page. However, I am not really fan of that solution since doing that for 7 more subtabs will result into one gigantic page with lots of repetitive code.

That's why I would rather do it this way. How do I load the content when the tab is pressed? Perhaps there is even a better way to handle this, so please help me figure this out.

AJAX is the answer to all your questions.

Deepak Kamat
– Deepak Kamat

2020-11-24 16:25:35 +00:00
Commented Nov 24, 2020 at 16:25 — Deepak Kamat
– Deepak Kamat, Commented Nov 24, 2020 at 16:25

dazed-and-confused · Accepted Answer · 2020-11-24 18:12:12Z

1

Have a look here...

https://api.jquery.com/jquery.ajax/

Basic Example

$.ajax({
  method: "POST",
  url: "/path/to/file",
  success: function(data){
   console.log(data);
 }
});

If you are trying to submit a form just add an AJAX data field...

var input1 = $('#input1').val();
var input2 = $('#input2').val();
$.ajax({
  method: "POST", //Method either GET or POST
  url: "/path/to/file.php", //Enter path to PHP file
  data: {
    "name1": input1, //Defining POST variables.
    "name2": input2
  },
  success: function(data){
   console.log(data); //Outputs data to the console
  }
)};

To retrieve the values in the php file, just simply use your type of method followed by the variable name. $_POST['name1'] and/or $_POST['name2']

If you are not using jQuery, there is an alternative to using the Fetch()-API. Read more here https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API.

edited Nov 24, 2020 at 18:12

dazed-and-confused

1,3332 gold badges12 silver badges21 bronze badges

answered Nov 24, 2020 at 16:31

Louie

571 silver badge8 bronze badges

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

6 Comments

vt-dev0 Over a year ago

Okay, I managed to figure this out. Now it works as intended, however, I want to avoid using a different ajax function for each of the tables that I need, but instead somehow make it reusable. Is there any way I can pass into my function what tab is currently selected?

M. Eriksson Over a year ago

Why not use the native fetch()-api instead of including a 87kb-bloated library like jQuery to make the ajax requests?

BCDeWitt Over a year ago

^ I second this. Here's a link to help: developer.mozilla.org/en-US/docs/Web/API/Fetch_API

vt-dev0 Over a year ago

@MagnusEriksson great advice. I just tried fetch and got it working. Thanks a lot.

vt-dev0 Over a year ago

perhaps one of you could help me out how can I determine which tab was clicked when executing this script?

|

Collectives™ on Stack Overflow

OnClick load php file into HTML

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related