Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1234
  • Last Modified:

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.
 
0
jeff_suhr
Asked:
jeff_suhr
  • 2
1 Solution
 
raterusCommented:
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=""
0
 
jeff_suhrAuthor Commented:
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.
0
 
raterusCommented:
Right, like I said in my last post, "OnContactXYZ" means nothing to the browser, it's invalid syntax completely and will never work.  If you want the showXYZ() function to run, you MUST put it on the "onclick" event of the <input type="submit" /> button.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now