Adding a handler to an object that calls a global javascript function

Question

I'm not sure I worded the question the best way possible so I'll show my code example.

I have multiple pages that use the same javascript function. Instead of adding that function to every page, I added it to a .js and imported it in the site master. How can I add a handler to my objects that will call that function, the way I have it doesn't seem to be working.

Edit: I found the problem to be in

document.getElementById('<%= PostBackButton.ClientID %>').click();

The javascript function does get called correctly and the page does have a PostBackButton asp button, but the getelement is returning null.

//chart-ajaxDateSelection.js
function dateSelectionChanged(sender, args) {
  selectedDate = sender.get_selectedDate();

  document.getElementById('<%= PostBackButton.ClientID %>').click();
}

function getSlide()
{
  var i,x,y,ARRcookies=document.cookie.split(";");
  for (i=0;i<ARRcookies.length;i++)
  {
    x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
    y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
    x=x.replace(/^\s+|\s+$/g,"");
    if (x=="slide")
    {
      return y;
    }
  }
}

My handler:

<asp:TextBox ID="OverviewChartStartDateTextBox" runat="server"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="OverviewChartStartCal" 
  OnClientDateSelectionChanged="dateSelectionChanged" runat="server" 
  TargetControlID="OverviewChartStartDateTextBox">
</ajaxToolkit:CalendarExtender>

As you can see, I'm trying to call the dateSelectionChanged method when the selected date is changed on the ajax calendar.

Just to check, if you place dateSelectionChanged() inside a <script></script> on the master page itself, does your code work then? — Jason Evans
– Jason Evans, Commented Aug 28, 2012 at 14:57
No, I in fact get a server error. I commented out the .js import and added the function in the site master. — tareqx3
– tareqx3, Commented Aug 28, 2012 at 15:04
OK. Bascically I needed a baseline to work from, in other words, knwoing whether that JavaScript function works when it's directly on the master page. If it does not work in that scenario, then at least you know it's the function at fault, not that the ".js" file is not being included or something. — Jason Evans
– Jason Evans, Commented Aug 28, 2012 at 15:06

Mihai Iorga · Accepted Answer · 2012-08-28 18:30:04Z

1

It sounds like the Javascript file is not being included properly. As a test, please include the function inside of the page itself, in <script> tags:

<script>
    function dateSelectionChanged(sender, args) {
        selectedDate = sender.get_selectedDate();  
        document.getElementById('<%= PostBackButton.ClientID %>').click();
    }
</script>

Test the date changed event, and if it works, you know your script file wasn't included properly.

If it still doesn't work, the script might have an error. Does the OnClientDateSelectionChanged event for the calendar extender have arguments?

Perhaps sender is null, and the script is erroring before it gets to your button click event.

edited Aug 28, 2012 at 18:30

Mihai Iorga

39.8k17 gold badges109 silver badges109 bronze badges

answered Aug 28, 2012 at 15:13

Dave Zych

22k7 gold badges53 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

tareqx3 Over a year ago

I don't believe that the arguments are the case. I had the dateSelectionFunction on each individual page and I'm trying to generalize it to a global function. It worked fine when it was on each page separately and I copied and pasted exactly what I had into the .js

Dave Zych Over a year ago

Can you use a browser's dev tools (push f12 in chrome, IE, etc) to set a breakpoint in your dateSelectionChanged function to see if it's ever hit? You can also check the console in the dev tools to see what errors show up. It might indicate the missing .js file, or that it can't find the function.

tareqx3 Over a year ago

I somewhat figured out the problem. document.getElementById('<%= PostBackButton.ClientID %>').click(); this line is not working correctly. There is an asp button named PostBackButton, but the global javascript is not invoking the click. Is there a way around this?

Dave Zych Over a year ago

Oh... The code tags (<% %>) will not work in the JS file. The server will not parse the C# inside the tags, so if you look at the output in your browser the file will still show <%= PostBackButton.ClientID %> instead of the id you want. What I would recommend is adding a css class to your button, such as "dateSelectionChangedPostbackButton" and then calling the button click via JQuery and that class selector. $('.dateSelectionChangedPostbackButton').click();

Brian Rizo · Accepted Answer · 2012-08-28 16:38:40Z

0

FYI if you have have .net >= 3.5 you can set your controls ClientIDMode to static and access the control with document.getElementById("controlId"); this way you don't have to use the <% %> tags

<asp:TextBox ID="tb_companyEmail" ClientIDMode="Static" runat="server" CssClass="input"
                                    type="email" />


document.getElementById("tb_companyEmail");

answered Aug 28, 2012 at 16:38

Brian Rizo

8589 silver badges14 bronze badges

Collectives™ on Stack Overflow

Adding a handler to an object that calls a global javascript function

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related