我正在爲項目的後端腳本工作我的PHP技能沒問題,我得到了我想要的工作。但關於JS/AJAX/jQuery的一切我都不明白。用Modal替換Popup並執行PHP腳本
好吧,我的問題:
我有視頻和照片縮略圖集合並希望設置封面照片爲每個。我現在使用的是一個彈出腳本,可以工作。 但我使用管理主題(基於Bootstrap),我購買了它,當我使用模態而不是彈出窗口時,它會更好看。
我嘗試了很多事情來讓彈出窗口中的腳本進入模態 - 但我總是失敗。
我打開與
<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>
這將打開一個預加載模式,我添加到我的網頁也模態。我想要這個,因爲我想在未來添加一個自動生成的拇指。所以,它應該顯示加載器,而拇指將被生成。
<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> Generiere Thumbnails ...</span>
</div>
</div>
</div>
</div>
然後(外部)模式將與我的腳本開:
<?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ü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ä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>
在這裏開始我的問題。
模式將會打開,但是當我選擇一個圖像(我用圖像替換單選按鈕)作爲封面時,模式將被關閉並且不會寫入數據庫。 由於彈出一切正在工作,但不是模態。
我想,我必須使用JS/AJAX/jQuery來寫入數據庫。但我不知道如何...我已經讀了很多tut,但我不明白它是如何工作的。
將是很好,如果有人可以解釋我一步一步我怎麼能得到這個工作...
,我需要知道如何執行腳本並得到通知,如果它被完成。正如我之前所說,我想添加一個選項來生成拇指。所以我想打開預加載模式,生成大拇指,當它完成時,應該顯示選擇封面的第二個模式。