jquery - How to set up a dialog box by id -

first of written in smarty, please keep in mind coding styles. not choice, i'm forced work with.

i modding nivo banner slider include clickabilty links. here problem. need pass slide variable on dialog box each slide. goal here have dialog box can have user update link each slide needed. pages looks this: http://griff4594.com/images/5-14-2013%209-05-41%20am.png

here code:

{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 link address wish slide/banner link 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} 

here array pulled variable $slide can reference it:

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" 

so dialog box right popping , giving me urls database, not coming correctly id. meaning not coming slide clicked on, this: http://griff4594.com/images/5-14-2013%209-13-12%20am.png

what want if click on slide 1 want dialog box pop it's link in box. right pulling random ones. can point me in right direction?

i simplified problem using ajax. here final solution me.

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> 

here second part of solution.

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

here third part:

php:

$url = $_post['surl']; $id = $_post['sid'];  db_query("update xcart_slideshow_slides set url='$url' slideid='$id'");  echo "url updated " . $url; 

works wonderfully , need to. have tried couple of times figured out after doing few more related ajax projects.