JavaScript — обработка загрузки PHP-скриптов и обновление изображений

Question

JavaScript — обработка загрузки PHP-скриптов и обновление изображений

Я предполагаю jquery, или, может быть, даже ajax понадобится для этого.

У меня есть страница для подтверждения заказа визиток.
Насколько клиент видит, это всего лишь jpg-просмотр карты и две кнопки, одна для внесения изменений, а другая для подтверждения. Эта страница работает без проблем.

У меня есть два других сценария php на отдельных страницах. Скрипт 1 берет переменные, переданные со страницы утверждения, форматирует их, а затем выводит jpg. Скрипт 2 берет те же переменные, которые были переданы со страницы утверждения, форматирует их и выводит готовый для печати PDF.

Оба этих сценария вызываются при загрузке страницы подтверждения для создания файлов. Они тоже работают, вроде. Jpg proof требует обновления страницы для загрузки нового / обновленного jpg, созданного при загрузке страницы.

код для страницы подтверждения:

<?php
$cartID = urldecode($_GET['itemid']);

if (!$cartID){
echo "No Cart ID found."; }
else {
$opt1value = "Option 1 Value";
$opt2value = "Option 2 Value";
$cartIDcheck = "10000"; }

$saveHere = "bc".$cartID.".jpg";

$coupon = "imagem.php?opt1value=".$opt1value."&opt2value=".$opt2value."&ioid=".$cartID;

$pressPDF = "pdfgen.php?opt1value=".$opt1value."&opt2value=".$opt2value."&ioid=".$cartID; ?>
<html>
<head>
</head>
<div id="floater">
<center>
<img src="<?php echo $coupon; ?>" style="display: none;" />
<img src="<?php echo $pressPDF; ?>" style="display: none;" />
<p>Proof your card here.<br />
<img src="<?php echo $saveHere; ?>" alt="saveHere" style="border: 2px solid #000;" /></p>
<div class="linkbutton"><a href="../../store.php?action=setitemopts&itemid=<?php echo $cartID; ?>">Need Changes</a></div>
<div class="linkbutton"><a href="../../cart.php">Approved</a></div>
</center>
</div>
</body>
</html>

Код для двух сценариев не имеет никакого влияния на этот вопрос.
То, что я не могу понять во всех моих поисках, — это более эффективный способ передачи этих переменных и запуска двух сценариев PHP. Все, что я могу найти, кажется, зависит от получения возврата, который не является необходимым.
Другое дело, как заставить изображение обновляться обновленным изображением.

И да, я знаю, что самым простым способом было бы запустить оба этих сценария при отправке при перенаправлении на эту страницу, однако это не вариант того, как сейчас работает корзина. Я пытаюсь понять, смогу ли я обойти это, но в то же время я хотел бы выяснить это.

-4

ajax javascript jquery onload php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Я, наконец, понял это сам, и так как это потребовало нескольких часов поиска в Google и поиска друг друга, я решил опубликовать ответ здесь на тот случай, если кто-нибудь еще окажется в одной лодке.

на главной странице PHP я поставил эту строку кода раньше всего.

<?php $cartID = urldecode($_GET['itemid']); ?>

Затем установите вызов функции onload для тега body следующим образом:

<body onLoad="genproofs('<?php echo $cartID; ?>')">

наконец, на странице, установите два div для загрузки изображения и окончательного отображения после создания окончательного JPG.

<div class="delay">loading...</div>

<div class="floater" style="display: none;"> ... posting info here ... </div>

И, наконец, вот JS / AJAX, который объединяет все это. Сначала вызывается сценарий создания PDF, затем сценарий создания JPG, и, как только JPG создан, принудительное обновление JPG & обменять видимость div.

function genproofs(id) {

var itemid = id;
var imgpath = 'bc' + itemid + '.jpg?rand=' + Math.random();

$.ajax({
type: 'GET',
url: 'http://yourwebsite.com/gen_pdf.php',
data: { itemid : itemid },
});

$.ajax({
type: 'GET',
url: 'http://yourwebsite.com/gen_jpg.php',
data: { itemid : itemid },
success: function() {
var myImageElement = document.getElementById('cardproof');
myImageElement.src = imgpath;
$(".floater").show();
$(".delay").hide();
}
});
}

0