如何通过id设置对话框

时间:2013-05-14 15:17:59

标签: jquery jquery-ui smarty

首先,这是用smarty编写的,所以请记住编码样式。它不是我的选择,但它是我被迫与之合作的。

我正在修改一个nivo横幅滑块,以便将clickabilty包含在链接中。所以这就是问题所在。我需要将幻灯片变量传递到每张幻灯片的对话框中。这里的目标是有一个对话框,以便我可以让用户根据需要更新每个幻灯片的链接。页面如下所示: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正确显示。这意味着它们不会出现在点击的幻灯片上,如下所示:http://griff4594.com/images/5-14-2013%209-13-12%20AM.png

我想要的是如果我点击幻灯片1我想要一个对话框,弹出框中的链接。但是现在它只是拉随机的。谁能指出我正确的方向?

2 个答案:

答案 0 :(得分: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项目之后想出来了。

答案 1 :(得分:0)

我认为问题是$( this )在您的函数中LinkUpload引用了button,而不是隐藏的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不太熟悉,但是,根据您发布的截屏视频,它似乎是第一次提供正确的网址,然后是{{1}中的下一个网址在随后的电话上。

最后一个循环可能有问题:

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();