CODEWITHSUNDEEP
jqueryasp.nethtmlvb.net
Steve
Steve

Reputation: 65

JQuery Popup from LinkButton

I have the below code which is using the JQuery framework and ASP.NET (VB).

Basically the below code snippet is on the asp page, and is hidden from view until you click a hyperlink/button and then the popup appears, below is the hidden popup code, which I know works:

<!--HIDDEN POPUP 1 BEGIN-->
<div class="ui-popup-screen ui-overlay-a ui-screen-hidden" id="popupDialog1-screen">    </div>
<div class="ui-popup-container pop ui-popup-hidden" id="popupDialog1-popup"><div data-role="popup" id="popupDialog1" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all ui-popup ui-body-c ui-overlay-shadow" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="none" data-position-to="origin" data-dismissible="true">
        <div data-role="header" data-theme="a" class="ui-corner-top ui-header ui-bar-a" role="banner">
            <h1 class="ui-title" role="heading" aria-level="1">Export Data</h1>
        </div>
        <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content ui-body-d" role="main">
            <h3 class="ui-title">Export Data</h3>
            <asp:HiddenField ID="hidDataName" runat="server" />
            <p>Choose one of the formats below to export the data to.</p>
                <div data-role="controlgroup" data-type="horizontal">
                    <asp:LinkButton ID="btnExcel" runat="server" data-role="button"><asp:Image ID="imgExcel" runat="server" ImageUrl="~/images/Excel.ico" Width="50px" Height="50px" />Excel</asp:LinkButton>
                    <asp:LinkButton ID="btnPDF" runat="server" data-role="button"><asp:Image ID="imgPDF" runat="server" ImageUrl="~/images/PDF.ico" Width="50px" Height="50px" />PDF</asp:LinkButton>
                    <asp:LinkButton ID="btnWord" runat="server" data-role="button"><asp:Image ID="imgWord" runat="server" ImageUrl="~/images/Word.ico" Width="50px" Height="50px" />Word</asp:LinkButton>
                    <asp:LinkButton ID="btnCSV" runat="server" data-role="button"><asp:Image ID="imgCSV" runat="server" ImageUrl="~/images/CSV.ico" Width="50px" Height="50px" />CSV</asp:LinkButton>
                </div>      
        </div>
</div></div>
<!--HIDDEN POPUP 1 END-->

Now I have the link below which opens the popup fine with no issues:

<a href="#popupDialog1"  data-rel="popup" data-position-to="window" data-role="button" data-inline="false" data-transition="pop" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" aria-haspopup="true" data-theme="j" aria-owns="#popupDialog1" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-hover-j ui-btn-up-j">
<span class="ui-btn-inner"><span class="ui-btn-text">Approve All</span></span></a>

However I want to be able to run some code on the click of the above button, I have tried using a LinkButton however I can't get the popup to show. The reason I want to run some code is I need to know what button on the page requested the popup.

I hope that makes some sense.

Any help appreciated.

Thanks, Steve

Upvotes: 0

Views: 2601

Answers (2)

Steve
Steve

Reputation: 65

Everyone thanks for all your help, I have solved the issues with help from Wade73.

I have added the code below to the click event of an asp.net link button.

Page.ClientScript.RegisterStartupScript(Me.GetType(), "MyScript", "$(function () {$('#popupDialog1').popup('open');});", True)

This causes the popup to show after my event has fired.

Thanks again.

Upvotes: 0

Wade73
Wade73

Reputation: 4509

I think you can solve it one of two ways.

  1. Use jQuery to handle the click event.
  2. Use the OnClientClick event on the control.
  3. Use the data-rel attribute on the link button.

Option 1:

Set the ClientIDMode="Static", easiest in my opinion, or use the control.ClientID in the javascript (shown below). This makes sure the jQuery code will execute on the control you want. Code up the jQuery and run your code.

<script>
    $(document).ready(function() {

         $("#btnExcel").click(function() {
             $("#popupDialog1-screen").popup();
         }

    });
</script>

or

<script>
    $(document).ready(function() {

         $("#<%= btnExcel.ClientID %>").click(function() {
             $("#popupDialog1-screen").popup();
         }

    });
</script>

Option 2:

    <asp:LinkButton ID="btnExcel" runat="server" OnClientClick="ExcelClick();" 
data-role="button"><asp:Image ID="imgExcel" runat="server" 
ImageUrl="~/images/Excel.ico" Width="50px" Height="50px" />
Excel</asp:LinkButton>

...

<script>
     function ExcelClick() {
         $("#popupDialog1-screen").popup();
     }
</script>

Option 3:

<asp:LinkButton ID="btnExcel" runat="server" data-rel="popup">
    <asp:Image ID="imgExcel" runat="server" ImageUrl="~/images/Excel.ico" 
       Width="50px" Height="50px" />Excel
</asp:LinkButton>

Note:

In the code you put up above the code is autoinitialized when the plugin is run (jQuery Mobile). Since you want to call it from a link button, you either need to add the data-rel attribute to the link button or you need to call the dialog manually like I did above in option 1 and 2. Consult the jQuery Mobile documentation for a more detailed explanation.

From the documentation:

Calling the popup plugin This plugin will autoinitialize on any page that contains a div with the attribute data-role="popup". However, if needed you can directly call the popup plugin on any selector, just like any jQuery plugin and programmatically work with the popup options, methods, and events API:

$( "#myPopupDiv" ).popup();

You will need to test the code to make sure I got the correct div id as I have not had a chance.

Hope this helps.

Wade

Upvotes: 2

Related Questions