CODEWITHSUNDEEP
javascriptasp.net
MRH
MRH

Reputation: 11

Replace (or simulate) <asp:ImageButton with <asp:LinkButton by only changing .ascx file code

I have an .ascx page with a <asp:ImageButton on it which invokes an event when clicked.

I want to to change this to a <asp:LinkButton and invoke the same event.

I only have access to the .ascx file and not code behind.

I have considered leaving the ImageButton on the page just styled with "display:none;" and add the LinkButton control to invoke the ImageButton's event - but I cannot get the right JavaScript syntax to make this work.

I welcome suggestions.

I've made a bit of good progress using your advice here, thanks (i'm least familiar with jQuery so taken a crash course this w/e).

I can successfully fire the event using the following code:

jQuery("#jlink").click(function(event){ jQuery('#dnn_ctr594_ViewAjaxModuleWrapper_ctr604_ProductPage_btnAddItem').click(); });

(I didn't say that I was using DotNetNuke to keep my question simple - hence why the replacement of the $() with jQuery().

However whilst this works referencing the control's post-rendered ID I can seem to get <%=btnAddItem%> to work. I think (but can't prove) I can get a selector on it using jQuery("select[id$='btnAddItem']") but replacing this with dnn_ctr594_ViewAjaxModuleWrapper_ctr604_ProductPage_btnAddItem doesn't see to work.

So how do I reference the control object dynamically?

Final thoughts, thanks?

Upvotes: 1

Views: 479

Answers (2)

MRH
MRH

Reputation: 11

RESOLVED!

Simply I wildcarded the selector with the ID of the ImageButton, rather than trying to obtain the full object reference programatically.

Code used as follows:

<a href="#" id="jlink" class="txtbutton">Click Here</a>
<asp:ImageButton ID="btnAddItem" runat="server" ImageUrl="jbtn.gif" style="display:none;"></asp:ImageButton>

<script type="text/javascript">

jQuery("#jlink").click(function(event){
jQuery("[id$=btnAddItem]").click();
});

</script>

Couldn't have done it without your help. THANKS!

Upvotes: 0

Crab Bucket
Crab Bucket

Reputation: 6277

What about using JQuery to simulate the click on the link when the image button is pressed i.e.

$('#linkButtonID').click(function(){
    $('#imageButtonID').click();
});

That might work

EDIT

As another point - if you can't access the code behind then there is very little point putting asp.net webcontrols on your markup. You can't access the server side events and properties anyway which is rather the point. I would just put a normal anchor tag on - it will be a lot easier to work with in JavaScript and JQuery i.e.

<a href="#" id="linkID">Click this</a>

then the JQuery becomes

$('#linkButtonID').click(function(){
    $('#<%=imageButtonID.ClientID%>').click();
});

The first code was just to give you an idea but I've included the idea of writing out the client id for the asp.net web control that is already there (like previous answer) to contrast against writing it for a vanilla link

Also - don't forget to include the JQuery library for this

Upvotes: 1

Related Questions