locked
Placement of Javascript in Asp.Net Page with Ajax Controls RRS feed

  • Question

  • User-748031297 posted

    Windows Server 2008 R2.  IIS 7.  Visual Studio 2012.  .NET Framework 4.5. Ajax Control Toolkit (Dec 2013).

    The following JavaScript worked on an aspx page prior to the addition of a Ajax tab control.  This code is placed at the bottom of the aspx page just before the </asp:content> tag.

            <script type="text/javascript">
                try {
                    var e = document.getElementById("<%= ReportJurisdiction.ClientID %>");
                    alert(e.id);
                    e.options[e.selectedIndex].selected = true;
                }
                catch (Error) {
                    alert('error RJ');
                }
            </script>

    When the page posted back, it ensured that a listbox named "ReportJurisdiction" did not scroll back to the top, but instead remained at the first selected item in the list.  The listbox has now been placed in a Ajax tab panel.  Now when the code runs (on page load), it does not find the control and the alert "error RJ" pops up.  I guess I understand this, as perhaps on initial page load, the control has not been rendered yet.  However, when the panel is updated, the code does not run again and the listbox scrolls back to the top.

    WHERE should I place this code to ensure that it runs when the panel in which the listbox resides is updated/refreshed?  Thanks for any help.

    Tuesday, September 2, 2014 10:52 AM

Answers

  • User-1926401737 posted

    Hi Chaplain,

    According to error message, I'd like to know that have you added jQuery script file in your page.

    Best Regards,

    sw-ing

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 9, 2014 9:25 PM

All replies

  • User-748031297 posted

    SOME MORE INFO.

    When I took the script and placed it inside the tab panel just before the end, the code was reached and ran ONLY IF I have the Ajax tab container control set to OnDemand="false".  IF I have the tab container set to OnDemand ="true", then the code does not run (I placed alerts in the code to test).

    Tuesday, September 2, 2014 11:16 AM
  • User61956409 posted

    Hi Chaplain,

    Thanks for your post.

    Based on my experience, a page can't be manipulated safely until the document is "ready", so you could modify your code as below and try it.

    <script>
    
            $(document).ready(function () {
    
                try {
    
                    var e = document.getElementById("<%=ReportJurisdiction.ClientID %>");
    
                    alert(e.id);
    
                    e.options[e.selectedIndex].selected = true;
    
                }
    
                catch (Error) {
    
                    alert('error RJ');
    
                }
    
            })
    
    </script>
    

    If you have any question about my reply, please feel free to let me know.

    Best Regards,

    Fei Han

    Wednesday, September 3, 2014 6:38 AM
  • User-748031297 posted

    Fei:

    Is there a missing ")" in the code example you gave.  They seem to be unbalanced.  Ooops.  Never mind.  I see the ")" at the very end.  Will give it a try and report.

    By the way, I see how this will keep the code from running until all controls have been rendered.  But I still have the issue that this code does not run at all unless I have OnDemand="false" on the tabcontainer control.  I need to use OnDemand="true" AND have the JScript code run.  Any ideas?

    Wednesday, September 3, 2014 12:44 PM
  • User-748031297 posted

    Okay.  I implemented your suggestion as follows.  It errors out each time the code attempts to be executed.  It does not get to the first alert in the script.  The error message follows the code.  It chokes right at the leading $ of the first line of script.  I might note that this page has an Ajax ToolkitScriptManager rather than an Ajax ScriptManager.  What might be wrong here?

                            <script type="text/javascript">
                                $(document).ready(function(){
                                    alert('got here');
                                    try {
                                        var e = document.getElementById("<%= ReportJurisdiction.ClientID %>");
                                        e.options[e.selectedIndex].selected = true;
                                    }
                                    catch (Error) {
                                    }
                                    try {
                                        var e = document.getElementById("<%= ReportMonth.ClientID %>");
                                        e.options[e.selectedIndex].selected = true;
                                    }
                                    catch (Error) {
                                    }
                                    try {
                                        var e = document.getElementById("<%= ReportType.ClientID %>");
                                        e.options[e.selectedIndex].selected = true;
                                    }
                                    catch (Error) {
                                    }
                                    try {
                                        var e = document.getElementById("<%= EventType.ClientID %>");
                                        e.options[e.selectedIndex].selected = true;
                                    }
                                    catch (Error) {
                                    }
                                    try {
                                        var e = document.getElementById("<%= RDName.ClientID %>");
                                        e.options[e.selectedIndex].selected = true;
                                    }
                                    catch (Error) {
                                    }
                                });
                            </script>
    
    Unhandled exception at line 412, column 29 in http://localhost:7202/ExtranetNew/Extranet/Events/Events.aspx
    
    0x800a138f - JavaScript runtime error: Object expected


    Wednesday, September 3, 2014 3:49 PM
  • User-1926401737 posted

    Hi Chaplain,

    According to error message, I'd like to know that have you added jQuery script file in your page.

    Best Regards,

    sw-ing

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 9, 2014 9:25 PM