Iam currently building a web application heavily based on PHP and MySql. On one site there are multiple buttons the user can click and depending on what button the user clicks, different MySql Data needs to be shown. My first thought was to just store all possible outputs into an array but I guess that's performance wise not a good choice since there would be a lot of data that the user might not even want to see. The other choice is pretty much to load the data AFTER the user clicks on a button and this is what Iam currently trying to work out.

The user clicks on a button and the following function is being executed in Javascript:

function requestParticipators(id) {
        $.ajax({
          url: "../scripts/request-participators.php",
          type: "POST",
          data: {
            "id"  : id
          },
          success: function(data) {
            if(data.code == 1) {
              $('#userList').html(data.message);
              $("#modalMembers").modal("show");
            }else {
              $("#modalFailed").modal("show");
            }
          },
          error: function(error) {
            $("#modalFailed").modal("show");
          }
        });
      }

As you can see if the data is returned successfully I want to show it in a Bootstrap Modal. Before showing it I actually load the data into an empty div called "userList". BUT the data that the "request-participators.php" returns is a huge string since it contains the entire data that the bootstrap modal needs. It currently looks like this:

$stmt->bind_result($db_id, $db_email, $db_vorname, $db_nachname);
        while($stmt->fetch()) {
            $output_string .= '<li class="list-group-item px-0">

                <div class="row align-items-center">
                    <div class="col-auto">

                    </div>
                    <div class="col ml-n2">

                        <!-- Title -->
                        <h4 class="mb-1 name">
                            <a href="#">' .$db_vorname .' ' .$db_nachname .'</a>
                        </h4>

                        <!-- Time -->
                        <p class="small mb-0">
                            <span class="text-success">●</span> Online
                        </p>

                    </div>
                    <div class="col-auto">

                        <!-- Button -->
                        <a href="#!" class="btn btn-sm btn-white">
                            Add
                        </a>

                    </div>
                </div> <!-- / .row -->

            </li>';
        }

The output_string is returned as JSON:

print json_encode(array('message' => $output_string, 'code' => 1));

This is the best way that I could come up with... Iam a little concerned about passing back such huge string. Are there any better ways of doing this? Thank you very much for reading and excuse my bad english >.<

1 Answers

0
cars10m On Best Solutions

What @MaximeLaunois is probably referring to is that your JSON should only contain the actual data pulled from the DB and not any html markup. Something like:

..
...
$data=array();
$stmt->bind_result($db_id, $db_email, $db_vorname, $db_nachname);
        while($stmt->fetch()) {
            array_push($data, array($db_id, $db_email, $db_vorname, $db_nachname);
        }
...
..
print json_encode($data);

And then create the actual markup clientside, using JavaScript.