Link to home
Start Free TrialLog in
Avatar of jeff_suhr
jeff_suhr

asked on

VB.NET RaiseEvent in button component fires, but associated Javascript does not execute

I want to execute a javascript function upon button click, but I don't want to wire the Javascript function to the button's OnClick event.  Thus, I've created a custom event within a button component and added the component to the web page  with the goal of executing the Javascript function following several stored procedure calls.  The RaiseEvent fires within the button component, but the Javascript never executes.  The following code snippets are included below.

*----------------------------------------------------------------------------------------------------------------------------*
XYZ_Button component code:

Namespace XYZ_button

<DefaultProperty("Text"), ToolboxData("<{0}:XYZ_Button runat=server></{0}:XYZ_Button>")> Public Class XYZ_Button
        Inherits System.Web.UI.WebControls.Button

#Region "Declarations"
        Public Event ContactXYZ()

        Public Sub Raise_Contact()
            RaiseEvent ContactXYZ()
        End Sub

#End Region
End Class
End Namespace

*----------------------------------------------------------------------------------------------------------------------------*
.ASPX button code:

<%@ Register TagPrefix="cc1" Namespace="XYZ_Button.XYZ_button" Assembly="XYZ_Button" %>                                                            
<tr class="AddToCartButton" id="TRXYZ" runat="server">
   <td>
        <cc1:XYZ_Button ID="XYZ" Text="Search" oncommand="XYZ_Search" CommandName="XYZ"
                                    CommandArgument='<%# Container.DataItem("REWARD_ID") %>' Runat="server">
        </cc1:XYZ_Button>
   </td>
</tr>
*----------------------------------------------------------------------------------------------------------------------------*
.ASPX.vb button code:
   
   1) Instantiate the custom button

          Protected WithEvents XYZ_Button1 As New XYZ_Button.XYZ_button.XYZ_Button

   2) Register the Javascript function with the custom event for the button component:

                If Not bolShowButtonOrCall Then
                    If mstrGUID = String.Empty Then
                        objGUID = Guid.NewGuid
                        mstrGUID = objGUID.ToString
                    End If
                    XYZ_Button1.Attributes.Add("OnContactXYZ", "showXYZ(' " & mstrGUID & "')")
                Endif

   2) When the command for the button is fired, several stored procedure calls are executed culminating in the following
       code snippet:

                XYZ_Button1.Raise_Contact()

*----------------------------------------------------------------------------------------------------------------------------*
.ASPX Javascript code
<script language="javascript">
    ifDiv = '<IFRAME ID="IFXYZ" class="panel" frameborder="0" style="display: inline;background-        
                                                                                                                         color:orange;"></IFRAME>';
   function showXYZ(strGUID)
   {
       document.getElementById('DIVMain').innerHTML = ifDiv;
       document.getElementById('IFXYZ').src = 'http://XYZ.com/XYZRQ.cfm?data=' + strGUID;
   }
</script>
*----------------------------------------------------------------------------------------------------------------------------*
   
NOTE:  The Javascript executes if I use the 'OnClick' event for a standard button.  I don't understand why the Javascript won't execute even though the custom event fires.  Please advise.
 
Avatar of raterus
raterus
Flag of United States of America image

What worries me about your plan is this line,

XYZ_Button1.Attributes.Add("OnContactXYZ", "showXYZ(' " & mstrGUID & "')")

This results in this being rendered to the browser
<input type="button" OnContactXYZ="showXYZ(...)" ... />

You can't arbitrarily add event handlers to standard buttons in JavaScript, if you want to run an event, you have to do it through onclick=""
Avatar of jeff_suhr
jeff_suhr

ASKER

Hi raterus...thanks for looking at my issue.  I did a view source after completing the render.  Following is the HTML for one the XYZ_Buttons (I am dynamically building the button inside a datalist of approximately 15 datalist items):

<tr id="dlReward__ctl0_XYZ" class="AddToCartButton">
      <td align="center">
      <input type="submit" name="dlReward:_ctl0:XYZ" value="Search" id="dlReward__ctl0_XYZ"  
                           OnContactXYZ="showXYZ(' 1*b18ad4d7-448c-4885-bd97-d071b682ce54')" />
      </td>
</tr>

So while the event and action are built, it never executes because?  That is where my level of understanding is lacking.  If the event (OnContactXYZ) can be trapped and the action assigned (ShowXYZ), why won't it execute?  I appreciate anything you can provide to aid my understanding.

Thanks.
ASKER CERTIFIED SOLUTION
Avatar of raterus
raterus
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial