如何通過編號設置對話框

Question

首先，這是用smarty編寫的，所以請牢記編碼風格。它不是我的選擇，但這是我被迫與之合作的原因。

我正在修改一個nivo橫幅滑塊以將clickability包含到鏈接。所以這是問題。我需要將幻燈片變量傳遞給每張幻燈片的對話框。這裏的目標是建立一個對話框，以便我可以讓用戶根據需要更新每張幻燈片的鏈接。該網頁看起來是這樣的：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} 

這裏是陣列從變量$滑拉，所以你可以參考它：

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來。這意味着他們不會出現在被點擊的幻燈片上，像這樣：http://griff4594.com/images/5-14-2013%209-13-12%20AM.png

我想要的是如果我單擊幻燈片1我想要一個對話框彈出它的框中的鏈接。但現在它只是隨機抽取。任何人都可以將我指向正確的方向嗎？

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

這裏是溶液的第二部分。

JQUERY：

$('.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() 
    }); 
}); 

這裏是第三部分：

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項目之後發現了它。

Answer 2

我認爲這個問題是在你的函數LinkUpload引用button$(this)，而不是隱藏input

 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，但是，根據您發佈的屏幕錄像，它看起來像是首次使用正確的網址，然後在隨後的通話中使用array中的下一個網址。

最後一個循環可能是有問題的：

{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多個版本，那麼你需要使用一個獨特的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>