0

まず、smarty で書いていますので、コーディングスタイルはその点に注意してください。それは私の選択ではありませんが、私が強制されているものです。

リンクへのクリック機能を含めるために nivo バナー スライダーを改造しています。ここに問題があります。各スライドからダイアログ ボックスにスライド変数を渡す必要があります。ここでの目標は、ユーザーが必要に応じて各スライドへのリンクを更新できるように、ダイアログ ボックスを用意することです。ページは次のようになります: http://griff4594.com/images/5-14-2013%209-05-41%20AM.png

コードは次のとおりです。

{literal}
        <script type="text/javascript" language="javascript">
                function LinkUpload() {
                        var id = $(this).attr("rel");
                        $("#link-upload").dialog();
                        alert($id);
                }
        </script>
{/literal}


{if $slides}
<div class="ss_slides">
<ul class="ss_slides">
{foreach from=$slides item=slide}
        <li id="slide_{$slide.slideid}">
                <table class="ss_slides">
                        <tr>
                                <td class="ss_slides_image">
                                <img src="../slide-shows/{$slide.slideid}.{$slide.extention}" class="ss_thumb" />
                                <div class="ss_toolBox"><a href="#" class="ss_delete" SlideID="{$slide.slideid}" CTLID="#slide_{$slide.slideid}"><img src="uploadify/cancel.png" /></a></div>
                                </td>
                        </tr>
                        <tr>
                                <td>
                                <input type="hidden" id="{$slide.slideid}" rel="{$slide.slideid}" value="{$slide.slideid}"><button type="button" onclick="LinkUpload()">Slide Link {$slide.slideid}<$
                                </td>
                        </tr>
                </table>
        </li>
{/foreach}
</ul>
</div>

{foreach from=$slides item=v}

        <div class="link-upload" title="Update Image Link" id="link-upload">
                <p>Insert the link address you wish this Slide/Banner to link to when clicked.</p>
                <form action="link_upload.php" method="POST">
                Link: <input type="text" size="40" name="link" value="{$v.link}"><br />
                <input type="submit" value="Update Link" name="update_link">
                </form>
        </div>

{/foreach}

{/if}

変数 $slide から取得した配列を次に示します。これを参照できます。

Array (5)
0 => Array (6)
  link => "http://google.com"
  slideid => "2"
  filename => "image235367.png"
  extention => "PNG"
  slideshowid => "1"
  iorder => "3"
1 => Array (6)
  link => "http://pvponline.com"
  slideid => "5"
  filename => "400x390px-LL-e49a9db0_2694-nooooooooo..."
  extention => "JPEG"
  slideshowid => "1"
  iorder => "2"
2 => Array (6)
  link => "http://etrade.com"
  slideid => "6"
  filename => "38783834021_large.jpg"
  extention => "JPG"
  slideshowid => "1"
  iorder => "4"
3 => Array (6)
  link => null
  slideid => "7"
  filename => "a.gif"
  extention => "GIF"
  slideshowid => "2"
  iorder => "0"
4 => Array (6)
  link => null
  slideid => "8"
  filename => "alpha.jpg"
  extention => "JPG"
  slideshowid => "2"
  iorder => "0"

そのため、現在ダイアログ ボックスがポップアップし、データベースからの URL が表示されますが、ID によって正しく表示されません。次のように、クリックされたスライドに表示されないことを意味します。

私が欲しいのは、スライド 1 をクリックすると、ボックス内にリンクが表示されたダイアログ ボックスがポップアップすることです。しかし、今はランダムなものを引き上げているだけです。誰かが私を正しい方向に向けることができますか?

4

2 に答える 2

1

AJAXを使用して問題を本当に単純化しました。これが私にとっての最終的な解決策です。

HTML:

    <div id="success"></div>
<div id="error"></div>
<div class="slide-url" id="">
    <div style="font-size: 18px; text-align: center; width: 100%; padding: 10px 0;">Banner Link Update</div>
    <div id="html"></div>
    <button id="update-url">Update URL</button><button id="close-url">Close</button>
</div>

これがソリューションの 2 番目の部分です。

Jクエリ:

$('.slide').click(function() {
var slideID = $(this).data("slide");
var risk = $(this).data("url");

$(".slide-url").show();
$("#html").html("Banner Link: <input id='surl' type='text' value="+risk+"><input type='hidden' id='sid' value=" + slideID + ">");

$("#update-url").click(function()   {
    var surl = $("#surl").val();
    var sid = $("#sid").val();
    var infoArray = {sid: "" +sid+ "", surl: "" +surl+ ""};
    $.ajax({
        type: "POST",
        url: "slideshow_url.php",
        data: infoArray,
        success: function(msg){
            $("#success").show();
            $("#success").html("Success!!");
            $("#success").fadeOut(5000);
            setTimeout(function()   {
                window.location.reload();
            }, 5000);
        },
        error: function(){
            $("#error").show();
            $("#error").html("Error updating URL");
            $("#error").fadeOut(5000);
        }
    });

});
    $("#close-url").click(function()    {
        $('.slide-url').hide();
        $('#success').hide()
    });
});

3番目の部分は次のとおりです。

PHP:

$url = $_POST['surl'];
$id = $_POST['sid'];

db_query("UPDATE xcart_slideshow_slides SET url='$url' WHERE slideid='$id'");

echo "URL Updated to " . $url;

素晴らしく機能し、必要なことを行います。私はこれを数回試みましたが、さらにいくつかの関連する ajax プロジェクトを実行した後、それを理解しました。

于 2013-09-23T18:32:07.077 に答える
0

問題は、非表示ではなく、$( this )関数LinkUploadの参照にあると思いますbuttoninput

      function LinkUpload() {
                    var id = $(this).attr("rel"); 
                    $("#link-upload").dialog();
                    alert($id);
                    }

私はそれを次のように変更します：

      function LinkUpload() {
                    var id = $( this ).parent().attr( "rel" );
                    $( "#link-upload" ).dialog();
                    alert($id);
            }

編集

にはあまり詳しくありませんsmartyが、投稿したスクリーンキャストに基づいて、最初に正しい URL を表示し、arrayその後の呼び出しで次の URL を表示しているように見えます。

最後のループは問題になる可能性があります。

  {foreach from=$slides item=v}
    <div class="link-upload" title="Update Image Link" id="link-upload">
            <p>Insert the link address you wish this Slide/Banner to link to when clicked.</p>
            <form action="link_upload.php" method="POST">
            Link: <input type="text" size="40" name="link" value="{$v.link}"><br />
            <input type="submit" value="Update Link" name="update_link">
            </form>
    </div>
  {/foreach}

上記のループが の複数のバージョンを作成している場合は、 のようにバージョンごと#link-uploadに一意の を使用する必要があります。そうしないと、 の呼び出しが正しく機能しません。また、これが 1 つのdialogを作成するよりも優れているかどうかはわかりませんが、自信を持って推奨するために構築しているものについて十分な洞察がありません。ID#link-upload-01, 02, etc$("#link-upload").dialog();

            function LinkUpload() {
                   var id    = $( this ).prev('input').attr("rel"),
                     , input = $( '#link-upload' ).find( '.slidelink' );

                     input.val( id );

                    $("#link-upload").dialog();

                    alert(id);
                  }
    </script>


 <div class="link-upload" title="Update Image Link" id="link-upload">
        <form action="link_upload.php" method="POST">
             <input class="slidelink" type="text" size="40" name="link" value="0"><br />
             <input type="submit" value="Update Link" name="update_link">
        </form>
 </div>
于 2013-05-14T16:00:09.270 に答える