Javascript $find function

11 posts, 0 answers
  1. Michael Dunbar
    Michael Dunbar avatar
    129 posts
    Member since:
    Sep 2007

    Posted 26 May 2009 Link to this post

    Hi,

    Bit of a long shot this, but here we go. It's more of a generic Javascript issue than a problem with the Telerik controls, although I am using the controls.

    I have a problem where when I try to $find a telerik control in an ASP.NET user control it is always returned as null. However, if I $get this control using the same ID then a HTML Input Object is returned. I've tried using the $find function on a stand alone page and it works fine with either:

    var control = $find("controlID") 
     
    or 
     
    var control = $find('<%= controlID.ClientID %>'); 

    The ID of the control I am looking for is rendered like this in the HTML:

    ctl00_ucRTKTemplate_ctl04_ctl00_cmFileView

    ucRTKTemplate being an ASP.NET user control that loads another ASP.NET user control that contains the Telerik context menu I am attempting to find. If I type the above ID directly into the $find function then I do find the control, but obviously I would like to be able to find this control dynamically.

    Any ideas?

    Thanks,

    Michael


  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 26 May 2009 Link to this post

    Hi Michael,

    Probaly you are trying to obtain a reference to the control client object with $find() too early, before the object  has been initialized. That's why $get() returns a value, while $find() does not.

    http://blogs.telerik.com/dimodimov/posts/08-12-13/don_t_use_body_onload_in_asp_net_ajax_websites.aspx

    You might also want to try a Telerik productivity tool - JustCode. It’s a Visual Studio add-in that offers advanced JavaScript code navigation, refactorings, quick fixes and code analysis features which  can help you be more productive writing JavaScript code. What’s more JustCode can be used for multi-language solutions, as it also provides features for C#, VB.NET, ASP.NET, XAML and HTML.

    Kind regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael Dunbar
    Michael Dunbar avatar
    129 posts
    Member since:
    Sep 2007

    Posted 26 May 2009 Link to this post

    Thanks Dimo. I do have one eye on the life cycle of my application for this, but I am not yet convinced that is the issue. I'll have a read of that article.

    I am firing the Javascript event on double click of a RadGridRow.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 26 May 2009 Link to this post

    Hello again,

    Well, feel free to send us a runnable example in case you think there is a problem with RadControls.

    Greetings,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Michael Dunbar
    Michael Dunbar avatar
    129 posts
    Member since:
    Sep 2007

    Posted 26 May 2009 Link to this post

    I don't think that is necessary. I was rather hoping I had just done something wrong in my Javascript, it not being my strongest language.

    Can you find a control and then loop through that control in Javascript to find what control you want? I think the issue lies around me nesting a user control in another user control. If I manually enter the IDs of the controls then all my script starts working, so I must be confusing it with IDs basically.
  7. Michael Dunbar
    Michael Dunbar avatar
    129 posts
    Member since:
    Sep 2007

    Posted 26 May 2009 Link to this post

    Interestingly, I can get the following id with this bit of script:

    // Gets the ASP.NET generated control ID 
    function GetClientId(controlId) { 
        var count = document.forms[0].length; 
        var i = 0
        var aspControlId; 
        for (i = 0; i < count; i++) { 
            aspControlId = document.forms[0].elements[i].id; 
            pos = aspControlId.indexOf(controlId); 
            if (pos >= 0) break; 
        } 
        return aspControlId; 

    ctl00_ucRTKTemplate_ctl04_ctl00_cmFileView_ClientState

    Is the ClientState bit at the end making it invalid?






  8. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 26 May 2009 Link to this post

    Hello Michael Dunbar,

    Using $find("<%= SomeControl.ClientID %>") is the recommended way to get reference to client-side objects. What it does it to output the generated client-id in the final markup of your page.
    The $find() routine may fail in the occasion when the control is not yet initialized. All ASP.NET Ajax controls are initialized when the page is fully loaded - the required initialization statements are output at the end of the page just before closing the form tag. This means that the following will not work as the client-side object is not initialized:

    <telerik:RadMenu runat="server" id="RadMenu1" />

    <script type="text/javascript">
    var menu = $find("<%= RadMenu1.ClientID%>"); // menu will be null here
    </script>

    The workaround here is to register your code after control initialization. This can be done in the following ways:
    1. Define a pageLoad method JavaScript method which is called on initial load and after ajax updates.
    2. Subscribe to the load event of the Sys.Application javascript object. The pageLoad method mentioned earlier is just a shortcut to this event
    3. Use window.setTimeout. This would just delay the execution of your code and may need tweaking to find the timeout which works.

    In your case it would be best to use the load event of the application. Emit that script using ScriptManager.RegisterStartupScript method. You can find examples in this forum thread.

    I hope this helps,
    Albert
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  9. sp
    sp avatar
    8 posts
    Member since:
    Jan 2009

    Posted 02 Jun 2009 Link to this post

    Hi,

    I am trying to deploy my application from my development machine to our test server. The application works well on my development machine but it throws a sys.argumentnullexception:Value cannot be null. Parameter name:id Javascript error.
    The error is after 
    var MasterTable = grid.get_masterTableView();  in the ExpandPane(sender, eventArgs) function. The radgrid is being databound in button1_click event during postback
     I have attached my code here. Only difference between my development machine and test server is Telerik Controls are not installed on the test server. Is it necessary to install the controls? Thanks.

     

  10. sp
    sp avatar
    8 posts
    Member since:
    Jan 2009

    Posted 02 Jun 2009 Link to this post

    I was able to reproduce this scenerio on one of our spare machine. Here is what I did on that:
    I installed telerik controls and my application started working without the javascript errors. Out of curiosity I then uninstalled telerik controls from the machine. My application still works without issues.
    Thats make me think that its not the install per se, but during the install telerik is making some setting change which was missing earlier. Anybody have any idea what this could be? I will have to do it manually on our test server because I cannot install/uninstall telerik controls on that machine.
    Also, the version I installed was 2009 Q1(without the SP) so I had to go through the step of reinstalling SMdiagnostics.dll and System.Runtime.Serialization.dll in the GAC. Could this have fixed the issue?
    Thanks.
  11. Oscar
    Oscar avatar
    3 posts
    Member since:
    May 2012

    Posted 14 May 2012 Link to this post

    try
    var control = Document.GetElementsByID("ControlID")

    work for me
  12. Phil
    Phil avatar
    84 posts
    Member since:
    Apr 2005

    Posted 25 Feb 2014 Link to this post

    @Oscar

    var control = document.getElementById("<%= ControlID.ClientID %>");

    ;)
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017