Question

I have this tag:
<a id="link1" runat="server" href="http://www.selab.isti.cnr.it/ws-mate/example.pdf" title="PDF">Open iFrame</a>


This link opens a jquery ui dialog that contains an iframe of a PDF file with this javascript:

<script type="text/javascript">
$(function () {
    $("#<%=link1.ClientID%>").click(function() {
        //e.preventDefault();
        var $this = $(this);
        $('<iframe id="externalSite"  frameborder="0" src="' + this.href + '" />').dialog({
            title: ($this.attr('title')) ? $this.attr('title') : 'External Site',
            autoOpen: true,
            width: 700,
            height: 600,
            modal: true,
            resizable: true,
            overlay: {
                opacity: 0.5,
                background: "black"
            }
        }).width(650).height(550);
        return false;
    });
});
</script>

But i need to apply this block of code to mulitple a tags (the number of links can go up to dozens). I know how to create these links in my code behind using a loop, but I dont know how to get every link to work dynamically with the PDF its asigned to open.
help?

Answer 1

Add a class to the <a> tag while rendering from the server like class="iframelink"

<script type="text/javascript">
$(function () {
    $(".iframelink").click(function() {
        //e.preventDefault();
        var $this = $(this);
        $('<iframe id="externalSite"  frameborder="0" src="' + this.href + '" />').dialog({
            title: ($this.attr('title')) ? $this.attr('title') : 'External Site',
            autoOpen: true,
            width: 700,
            height: 600,
            modal: true,
            resizable: true,
            overlay: {
                opacity: 0.5,
                background: "black"
            }
        }).width(650).height(550);
        return false;
    });
});
</script>