CODEWITHSUNDEEP
javascriptc#asp.net
Null
Null

Reputation: 511

How to pass control's ID into an external javascript file?

I'm trying to call an External JavaScript Function that accept 3 parameters as below:

function CalculateSum(grdID, hiddenID, TargetColumnIndex) {
    debugger;
    var oDataGrid = document.getElementById("<%= grdID.ClientID %>");
    var tableRows = oDataGrid.rows;
    var sum = 0;
    for (var i = 1; i < tableRows.length; i++) {
        var col1 = oDataGrid.rows[i].cells[TargetColumnIndex];
        for (j = 0; j < col1.childNodes.length; j++) {
            if (col1.childNodes[j].type == "text") {
                if (!isNaN(col1.childNodes[j].value) && col1.childNodes[j].value != "") {
                    sum += parseInt(col1.childNodes[j].value)
                }
            }
        }
    }
    if (!isNaN(sum)) {
        document.getElementById('<%=hiddenID.ClientID %>').value = sum;
    }
}

And this is how i did call it:

<asp:Button ID="btnSave" runat="server" CssClass="btn btn-primary" 
    OnClientClick="CalculateSum('grdPlanObjectivesStandardWeights', '#hidden', 2);" 
    OnClick="btnSave_Click" 
    Text="<%$Resources:DCAACommon, Save%>" 
    ValidationGroup="SaveStandardWeight" />

Notes:

What is wrong with my code/approach?

Upvotes: 1

Views: 1162

Answers (3)

Dave
Dave

Reputation: 740

Have you considered trying to set ClientIdMode="Static" for your controls and just reference the id names as is?

Upvotes: 1

VDWWD
VDWWD

Reputation: 35564

It looks like you are trying to send the aspnet Control ID's as variable client-side, and then using them with ClientID.

You either don't send the ID's as variable, but just use the aspnet ID with ClientID

<asp:GridView ID="GridView1" runat="server"></asp:GridView>

<asp:HiddenField ID="HiddenField1" runat="server" />

<script type="text/javascript">
    function CalculateSum(TargetColumnIndex) {
        var oDataGrid = document.getElementById("<%= GridView1.ClientID %>");

        if (!isNaN(sum)) {
            document.getElementById('<%=HiddenField1.ClientID %>').value = sum;
            }
        }
</script>

Or send the correct ID's to the function, but then you won't need <%= GridView1.ClientID %>

<script type="text/javascript">

    CalculateSum("<%= GridView1.ClientID %>", "<%= HiddenField1.ClientID %>", 2)

    function CalculateSum(grdID, hiddenID, TargetColumnIndex) {
        var oDataGrid = document.getElementById(grdID);

        if (!isNaN(sum)) {
            document.getElementById(hiddenID).value = sum;
            }
        }
</script>

Or call from code behind

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "CalculateSum", "CalculateSum('" + GridView1.ClientID + "', '" + HiddenField1.ClientID + "', 2)", true);

Note that <%= GridView1.ClientID %> will not work in an external file, so the second option would be better. Of coure CalculateSum("<%= GridView1.ClientID %>", "<%= HiddenField1.ClientID %>", 2) should then be placed on the aspx page.

Upvotes: 1

Paul Stoner
Paul Stoner

Reputation: 1522

From your markup it appears you are working with asp.net MVC, or at least asp.net. If this is the case you need to register your script.

Something like the following should work:

Page.ClientScript.RegisterStartupScript(this.GetType(),"CallMyFunction","MyFunction()",true);

You can find out more at this MSDN article

To expand upon my answer. In your web form code behind, place thee following in the Page_Load method:

Page.RegisterClientScriptBlock("MyScript",
   "<script language=javascript src='MyJavaScriptFile.js'>");

You should then be able to reference your JS functions

Upvotes: 1

Related Questions