Replace Popup mit Modal und führen PHP-Skript

Question

Ich arbeite derzeit auf einem Backend-Skript für ein Projekt Meine PHP-Fähigkeiten sind in Ordnung, ich arbeite arbeiten, was ich will. Aber alles über JS/AJAX/jQuery habe ich nicht verstanden.

Ok, mein Problem:

Ich habe Thumbnails für Videos und Fotoserien und will für jede Abdeckung Fotos einzustellen. Ich benutze im Moment ein Popup-Skript, das funktioniert. Aber ich benutze ein Admin-Thema (basierend auf Bootstrap), das ich gekauft habe und es wird viel besser aussehen, wenn ich modals und nicht popups benutze.

Ich versuche viele Dinge, um mein Skript aus dem Popup bekommen in das Modal arbeiten - aber ich scheitere die ganze Zeit.

Ich öffne die modal mit

<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> 

Es öffnet sich ein preloader modal, dass ich auch auf meiner Seite hinzufügen. Ich möchte das, weil ich in Zukunft eine automatische Generierung von Thumbs hinzufügen möchte. Es sollte also der Loader angezeigt werden, während die Thumbs generiert werden.

<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> 

Dann wird die (externe) modal mit meinem Skript offen:

<?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> 

Und hier sind mein Problem zu starten.

Das Modal wird geöffnet sein, aber wenn ich ein Bild (ich ersetze die Radiobuttons mit den Bildern) als Cover auswähle, wird das Modal einfach geschlossen und nichts wird in die Datenbank geschrieben. Als Popup funktioniert alles, aber nicht so modal.

Ich denke, ich muss JS/AJAX/jQuery verwenden, um in die Datenbank zu schreiben. Aber ich weiß nicht wie ... Ich lese schon eine Menge Tuts aber ich verstehe nicht wie es funktioniert.

Wäre schön, wenn jemand könnte mich Schritt für Schritt erklären, wie ich diese Arbeit ...

bekommen Und ich muss wissen, wie ein Skript auszuführen und informieren Sie sich, wenn es fertig ist. Wie ich bereits gesagt habe, möchte ich eine Option hinzufügen, um Thumbs zu generieren. Also möchte ich das Preloader Modal öffnen, die Daumen generieren und wenn es fertig ist sollte es das 2. Modal für die Auswahl des Deckels zeigen.

Answer 1

Sie können nicht in der Datenbank mit JS (jQuery oder Ajax) schreiben. Es ist nur möglich mit Frameworks wie node.js (Server-orientierte js), aber ich denke, Sie müssen nicht so handeln.

Mutter Javascript ist kein Back-End-Sprache

Schauen Sie, Sie haben PHP zu verwenden, um mit Datenbanken zu interagieren. Auf dieser Ebene ist Javascript eine Front-End-Sprache (wenn man bedenkt, dass wir node.js nicht verwenden werden, ist das eine andere Sache: p). So können Sie Web-Entwicklung wie folgt betrachten:

FRONT END (Client-Seite) | Back-End (Server-Seite)

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

Wenn Sie möchten, dass Ihre Seite, um die Dinge dynamisch muss man alles anders aufbauen.

Ich schlage vor, Sie auf diese Weise considere Arbeits

[HTML -> Import jQuery und schreiben Ajax-Request] - index.html (nur Skripte)

<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 -> Datenbank anfordern und Daten zurückgeben] - 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(); 
 

 
?>

Offensichtlich macht diese Arbeit mithilfe einer Methode, dass jede Seite Ihrer Website ist eine HTML-Datei. Nur die PHP-Skripte verwenden die Erweiterung .php. Das ist für mich eine sexierere Arbeitsweise ^^