Question

I am new to ASP.NET and JQuery.

Currently, I have the codes for JQuery to load two different pages and passing value based on two different buttons click (controling by button ID). It seems like I am duplicating the codes, so I wonder if I can make this some sort like javascript function to pass 4 parameters (Page or URL, RecordID, width, height). Lets me explain with the codes.

I have these two buttons:

<table width="80%" align="center" >
    <tr>
        <td width="45%"></td>
        <td width="10%" class="PageTitle"></td>
        <td width="45%" style="text-align:right;">
            <asp:Button runat="server" CommandName="buttonCreateApprovedMDF" ID="buttonCreateApprovedMDF" 
            Text="Create Approved MDF" href="ApprovedCreateNew.aspx?AnotherID=" title="Create Approved MDF" class="button3"/>  
            <asp:Button runat="server" CommandName="buttonCreateNote" ID="buttonCreateNote" 
            Text="Create Note" href="ProposalCreateNote.aspx?ProposalID=" title="Create Note" class="button3"/>           
        </td>
    </tr>
</table> 

And this is the JQuery codes (duplicated), just the Page and RecordID are different, everything is the same.

$(document).ready(function () {  
    $('#<%= buttonCreateNote.ClientID %>').live('click', function(e) { 
    e.preventDefault(); 
    var lblID = $("[ID$='ProposalID']").text();
    var page = '<%= ResolveClientUrl("ProposalCreateNote.aspx")%>' + '?ProposalID=' + encodeURIComponent($('span[id$="ProposalID"]').text());
    var pagetitle = $(this).attr("title"); 
    //alert(page); 
    var $dialog = $('<div></div>') 
    .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"  frameBorder="0"  align="middle"> ></iframe>') 
    .dialog({ 
        autoOpen: false, 
        modal: true, 
        height: 650, 
        width: 900, 
        title: pagetitle 
    }); 
    $dialog.dialog('open'); 
    });

    $('#<%= buttonCreateApprovedMDF.ClientID %>').live('click', function (e) {
        e.preventDefault();
        var lblID = $("[ID$='AnotherID']").text();
        var page = '<%= ResolveClientUrl("ApprovedCreateNew.aspx")%>' + '?AnotherID=' + encodeURIComponent($('span[id$="AnotherID"]').text());
    var pagetitle = $(this).attr("title");
        //alert(page); 
    var $dialog = $('<div></div>')
    .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"  frameBorder="0"  align="middle"> ></iframe>')
    .dialog({
        autoOpen: false,
        modal: true,
        height: 650,
        width: 900,
        title: pagetitle
    });
    $dialog.dialog('open');
    });
}); 

These the Labels (in the DetailsView) where the JQuery use for passing the parameters.

<asp:Label ID="ProposalID" runat="Server" style="text-align:left;" 
Text='<%# Eval("ProposedID")%>' />
<asp:Label ID="AnotherID" runat="Server" style="text-align:left;" 
Text='<%# Eval("AnotherID")%>' />

How can I combine the duplicated JQuery above into one function like “OpenIframe(URL, RecordID, Width, Height)”? and possibly using OnClientClick (with those parameters) to trigger IFrame popup?

Thanks in advance.

Answer 1

Try something like this:

function OpenIframe(url, recordId, width, height, event)
{
    if(event.preventDefault)
        event.preventDefault(); 
    else
        event.returnValue = false;

    var page = url + "?" + recordId + "="+ encodeURIComponent($('span[id$="' + recordId + '"]').text());
    var pagetitle = $(this).attr("title"); 
    var $dialog = $('<div></div>') 
    .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"  frameBorder="0"  align="middle"> ></iframe>') 
    .dialog({ 
        autoOpen: false, 
        modal: true, 
        height: height | 650 , 
        width: width | 900, 
        title: pagetitle 
    }); 
    $dialog.dialog('open');
}

Your aspx would look like this:

<table width="80%" align="center" >
     <tr>
        <td width="45%"></td>
        <td width="10%" class="PageTitle"></td>
        <td width="45%" style="text-align:right;">
            <input type="button" onclick="OpenIframe('<%= ResolveClientUrl("ProposalCreateNote.aspx")%>', 'ProposalID', 900, 650, event); return false;" value="Create Approved MDF" title="Create Approved MDF" class="button3" />
            <input type="button" onclick="OpenIframe('<%= ResolveClientUrl("ApprovedCreateNew.aspx")%>', 'AnotherID', 900, 650, event); return false;" value="Create Note" title="Create Note" class="button3" />
        </td>
    </tr>
</table> 

Didn’t use asp.net button markup because you would have to define it as runat=”server” and you wouldn’t be able to put escape characters on the OnClientClick event call.