Calling js function from asp repeater

Question

I want to call a javascript function from an aspx page in visual studios 2012. the function takes 7 values from a datbase, any number of times and makes changes to the css based on these values, and a div tag that changes each instance of the repeater

<asp:Repeater ID="repModules" runat="server">
     <ItemTemplate>
         <div id="<%#Eval("ModuleID")%>" onload="callFunction()">
           //different div tags, which have their 
           //styles edited by the js function
         </div>
         <script  type="text/javascript">
          function callFunction() {
              go("M1", "name", "20", "0", "80", "50", "70");
          }
         </script>
     </ItemTemplate>
</asp:Repeater>

the end goal is to have variables from the back, aspx.net.cs page, being called in the function but it is not even working as it is. I have tried to call the function several different ways and in several places, and have been stuck on this for some time now. The js script just looks like this:

 function go(Id, name, eworth, eattained, worth, attained, progress) {
    //here the variables that are read in are 
    //assigned to variables defined in the js
 }

I'm not very set in my ways and any other way we can access the aspx variables in the javascript would be good too. any input or feedback would be greatly appreciated. Thank you very much for your time.

Answer 1

You're declaring the same function, callFunction(), for each row in your Repeater. Instead of doing that, I'd declare it once at the top of the page. Then, in your repeater, make a call to the function, passing in the data from the back.

To do this, you can also make use of an ASP.Net feature that allows you to register javascript code to be called at startup. Here's an example (in VB.Net). This code would go in the ItemDataBound event handler for your Repeater. Notice that I'm calling the "go()" function instead of the "callFunction()" function. You won't need that extra function since you can call "go()" directly.

Dim csm As ClientScriptManager = Page.ClientScript
Dim sb As New StringBuilder
sb.AppendLine("go(""M1"", ""name"", ""20"", ""0"", ""80"", ""50"", ""70"");")
csm.RegisterStartupScript(Page.GetType, "js_code_startup__unique_key", sb.ToString, True)

You can then substitute the hard-coded values in the code above with your variables. Note that I'm using two double-quotes to escape the double-quotes surrounding the code in the sb.AppendLine call.

The fourth parameter in the RegisterStartupScript call set to True gets it to automatically include tags for you.

When the page loads, this javascript code will be loaded at the bottom of the page and executed as it's encountered. If you'd prefer, you could try to get it called via some type of onload function (maybe assigning to window.onload in your javascript, or using jQuery document.ready).

If you didn't want to use the ItemDataBound event handler, you could probably just call the function directly in your script tags (though that could be a problem if not all items it needs are loaded at the time it gets executed). To get the values from the database, you'd probably do data binding, so you'd have to do something like I did for your first parameter in the function call.

<script  type="text/javascript">
    go('<%# Eval("YourVarName") %>', "name", "20", "0", "80", "50", "70");
</script>

UPDATE - Converted code to C#

I'm not as familiar with C#, but here's what I think it would be. I put it in the ItemDataBound event handler. I haven't tested this, so I'm not sure that it's 100% accurate.

protected void repModules_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e){ 
    if (((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))) {  
        ClientScriptManager csm = Page.ClientScript;
        StringBuilder sb = new StringBuilder();
        sb.AppendLine("go(\"M1\", \"name\", \"20\", \"0\", \"80\", \"50\", \"70\");");
        csm.RegisterStartupScript(Page.GetType, "js_code_startup__unique_key", sb.ToString, true);
    }
}