Replace Popup with Modal and execute PHP script

Question

I'm working currently on an backend script for an projects My PHP skills are ok, I get working what I want. But everything about JS/AJAX/jQuery I did not understand.

Ok, my problem:

I have thumbnails for videos and photo sets and want to set cover photos for each. I use at the moment an popup script, that works. But I use an admin theme (based on Bootstrap), that I purchased and it will be look much better, when I use modals and not popups.

I try many things to get my script from the popup get working into the modal - but I fail all the time.

I open the modal with

<a class="btn red btn-outline sbold" href="<?php echo $website; ?>/modals/photo_cover.php?photoid=<?php echo $row['id']; ?>" data-target="#ajax" data-toggle="modal"> Generiere Thumbnails </a>

This opens an preloader modal, that I add to my page also. I want this, because I want to add an automatic generation of thumbs in the future. So, it should be show the loader while the thumbs will be generate.

<div class="modal fade bs-modal-lg" id="ajax" role="basic" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <img src="<?php echo $website; ?>/assets/global/img/loading-spinner-grey.gif" alt="" class="loading" />
        <span> &nbsp;&nbsp;Generiere Thumbnails ...</span>
      </div>
    </div>
  </div>
</div>

Then the (external) modal will be open with my script:

<?php
include_once ('../classes/LS.php');
include_once ('../inc/config.php');
?>
<style>
label > input { visibility: hidden; position: absolute; }
label > input + img { cursor:pointer; border:2px solid transparent; }
label > input:checked + img { border:2px solid #f00; }
</style>
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
  <h4 class="modal-title">Galerievorschau</h4>
</div>
<div class="modal-body">
  <div class="row">
    <div class="col-md-12">
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $sql  = "UPDATE content_pic_db SET pic_poster_file = :pic_poster_file WHERE id = :id";
  $stmt = $dbh1->prepare($sql);
  $stmt->bindParam(':id',              $_GET['photoid']);
  $stmt->bindParam(':pic_poster_file', $_POST['poster']);
  $stmt->execute();
?>
      <div class="portlet-body">
        <div class="note note-danger"><p>Klicke auf ein Bild um es als Vorschaubild f&uuml;r die Galerie festzulegen.</p></div>
        <div class="row">
          <div class="col-sm-12 col-md-12">Das Vorschaubild wurde erfolgreich Deiner Galerie zugewiesen. Du kannst jetzt dieses Fenster schliessen.</div>
        </div>
      </div>
<?php } else { ?>
      <div class="portlet-body">
        <div class="note note-danger"><p>Klicke auf ein Bild um es als Galerievorschau festzulegen.</p></div>
        <div class="row">
          <form id="preview" method="POST">
<?php
if (!empty($_GET['photoid'])) {
  $stmt = $dbh1->prepare('SELECT pic_count, pic_path FROM content_pic_db WHERE id = :id');
  $stmt->execute(array(':id' => $_GET['photoid']));
  $row  = $stmt->fetch(PDO::FETCH_ASSOC);
  $pfad = $row['pic_path'] . '/thumbs/';
  $scan = glob($pfad . "*.{jpg}",GLOB_BRACE);
  for ($i = 0; $i<count($scan); $i++) {
    if (strlen($scan[$i]) >= 3) {
?>
            <div class="col-sm-6 col-md-6">
              <label class="thumbnail">
                <input type="radio" name="poster" value="<?php echo substr($scan[$i], 50); ?>" />
                <img title="Klicke auf ein Bild um es als Vorschau auszuw&auml;hlen" src="<?php echo $website; ?>/stream_g.php?id=<?php echo $_GET['photoid']; ?>&file=<?php echo substr($scan[$i],50); ?>" />
              </label>
            </div>
<?php
      }
    }
  }
}
?>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal-footer"><button type="button" class="btn red" data-dismiss="modal">Fenster schliessen</button></div>
<script>$('input[name=poster]').change(function () { $("#preview").submit(); });</script>

And here are starting my problem.

The modal will be open, but when I choose an image (I "replace" the radio buttons with the images) as cover, the modal will just be closed and nothing will be written to the database. As popup everything is working, but not as modal.

I think, I have to use JS/AJAX/jQuery to write to the database. But I don't know how ... I read already a lot of tut's but I don't understand how it works.

Would be nice if someone could explain me step by step how I can get this working ...

And I need to know how to execute a script and get informed, if it is finished. As I say before, I want to add an option to generate thumbs. So I want to open the preloader modal, generate the thumbs and when it's finished it should be show the 2nd modal for choosing the cover.

Jason Jason · Accepted Answer · 2017-05-14T08:26:51

you can't write in database using JS (jQuery or Ajax). It is only possible using frameworks like node.js (server-oriented js) but I think you don't have to act like this.

Native Javascript isn't a back-end language

Look, you have to use PHP to interact with databases. Javascript is a front-end language, at this level (considering we will not use node.js, this is another thing :p). So, you can considere web development like this :

FRONT END (Client side) | BACK END (Server side)

[HTML + CSS] [JS] <-->[AJAX]<--> [PHP][SQL]

If you want your page to make things dynamically, you have to build everthing in a different way.

I suggest you to considere this way of working

[HTML -> import jQuery and write ajax request] - index.html (only scripts)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="application/javascript">
  $.ajax({
          type: 'post',
          dataType: 'json',
          url: 'request.php',
          success: function(data){ //Building an array using database datas directly in the body
              var content = "<table><tr><th>Lastname</th><th>Firstname</th><th>Email</th></tr>";
              for(i = 0; i < data.length; i++) {
                   content += "<tr><td>" + data[i].lastname + "</td><td>" + data[i].firstname + "</td><td>" + data[i].email + "</td></tr>";
              }
              content += "</table>";
              document.body.innerHTML += content;
          }
  });
</script>

[PHP -> Requests database and return datas] - request.php

<?php

$dbname = "YOUR DATABASE NAME HERE";
$host = "DATABASE HOST ADDRESS HERE";
$user = "LOGIN USERNAME HERE";
$pass = "LOGIN PASSWORD HERE";

try {
    $bdd = new PDO('mysql:host='.$host.';dbname='.$dbname.';charset=utf8', $user, $pass);
}
catch (Exception $e) {
    die('Erreur : ' . $e->getMessage());
}
$table = "TABLE NAME HERE";
$colonnes = "*"; //COLUMNS TO SELECT HERE, * FOR ALL
$request = $bdd->query('SELECT ' . $colonnes . ' FROM ' . $table); //SQL QUERY


/*
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
% BUILDING THE TABLE TO RETURN                 %
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%

TABLE STRUCTURE EXAMPLE :

------------------------------------
| id | lastname | firstname | email |
------------------------------------
*Line 1*
*Line 2*
*Etc...*
*/

$i = 0;
foreach($request as $req) {
    $table[$i]['lastname'] = $req['lastname'];
    $table[$i]['firstname'] = $req['firstname'];
    $table[$i]['email'] = $req['email'];
    $i++;
}

echo json_encode($table); //echo will show datas when executing this script, the ajax request will take every showed data in its success method

exit();

?>

Obviously, using this work methodology makes that each page of your website is an html file. Only the PHP scripts are using the .php extension. This is, for me, a sexier way of working ^^

Replace Popup with Modal and execute PHP script

1 Answers

Native Javascript isn't a back-end language

I suggest you to considere this way of working