0

私は漫画のウェブサイトHitting Trees with Sticksを持っています。これにより、ユーザーは次を押すか、単に矢印キーを押すだけで、次、前、またはランダムなコミック ID を取得できます。

画像はデータベースに保存されるため、クライアント側でこれらの画像を循環させる唯一の方法は、それらを JavaScript 配列に保存し、php $imgid を javascript 変数に imgIndex として保存することでした。次に、キーボードのキーを押したときに、クライアント側でそのインデックスを変更できます。

ユーザーがキーを押すと、pushstate を使用して URL の imgid を変更していますが、実際にはサーバー側の $imgid を更新していません。サーバー側の $imgid を更新する必要があるのは、特定の ID ごとに好きな関数を関連付けているためです...しかし、現在、キーを押して新しいものを取得しても、img ID に関連付けられているいいねの総数は更新/更新されません。画像。

私の解決策は、PushState を使用して URL を更新するだけでなく、キーが押されたときに $.post を使用して、更新された imgIndex を php スクリプトに送信することでした。

スニペットは次のとおりです。

KeyInput.php : これはクライアント側の JavaScript です。

<script type="text/javascript">
  var imgArray = [<?php echo implode(',', getImages($site)) ?>];
  var imgIndex = <?php echo $imgid ?>;

$(document).ready(function() {      
    var img = document.getElementById("showimg");
    img.src = imgArray[<?php echo $imgid ?>];

    $(document).keydown(function (e) {
        var key = e.which;
        var rightarrow = 39;
        var leftarrow = 37;
        var random = 82;

        if (key == rightarrow) 
        {
            imgIndex++;
            if (imgIndex > imgArray.length-1) 
            {
                imgIndex = 0;
            }
            img.src = imgArray[imgIndex];
            window.history.pushState(null, null, '.?action=viewimage&site=comics&id=' + imgIndex);

            $.post('./templates/viewimage.php', { _newImgId : imgIndex },
                function(data) {
                    //alert(data);
                }
            );

        }

viewimage.phpこれは、最初に $imgid を取得するファイルであり、キー入力を受け入れるために keyInput.php スクリプトを呼び出します...これは、javascript imgid を変更します。テスト目的で、$.post と $.get AJAX を使用して、更新された imgid を送信しようとしました。以下に示すように、$newID = $_POST['_newImgId];. $newID をエコーアウトすると、定義されていないと表示されます。

<?php 
/*
Controls display of comic on the viewComic template
*/
include 'include/header.php';

global $site, $imgid;

$cat = (isset($_GET['cat']) ? ($_GET['cat']) : null); 
$site = (isset($_GET['site']) ? ($_GET['site']) : null);
$title = (isset($_GET['title']) ? ($_GET['title']) : null);
$imgid = $_GET['id']; 

include './scripts/keyinput.php'; 

$newID = $_POST['_newImgId];
echo $newID; //THIS SHOULD ECHO THE UPDATED ID, but it says it is not defined

何かご意見は？

ありがとう！

4

1 に答える 1

1

あなたのコードの問題は$_get、最初のページ読み込みの変数を変更しようとしているときに、ページが既に読み込まれた後に Ajax コードを使用していることだと思います。私の知る限り、「Facebookのいいね」ボタンのIDを変更するには、ページ全体を更新する必要があります。もう 1 つのオプションは、Iframe を使用することです。私が見る限り、ボタンのdata-href属性は常に-につながりますhttp://hittingtreeswithsticks.com/-そして、それは別の属性を使用してページをリロードすることによってのみ変更できます。

各画像のページをロードすることを気にしない場合は、これでうまくいく可能性があります。

<!-- This is the Like button code -->
<div [...] data-href="http://www.hittingtreeswithsticks.com/<?php echo $_get['id']; ?>"></div>

このページのアドレスは次のようになります。http://www.hittingtreeswithsticks.com/?id=PAGE_ID

編集

AJAX を使用すると、ページ全体をリロードすることなく、クライアント側で使用されるバックエンドからのデータを呼び出します。このデータは、クライアント側でコードを変更するために使用できます。あなたのコードでは、データがあなたに送り返されていますが、まったく使用していないため、機能しません:

$.get('./templates/viewimage.php', { _newImgId : imgIndex },
    function(data) {
        // This is where you should make use of the data received 
    }
);

編集＃2

Like ボタンの URL を動的に変更する場合は、この回答をご覧ください。

これが実際の例のフィドルです: http://jsfiddle.net/TkFma/4/

于 2013-02-18T19:19:42.130 に答える