c# - ASP.NET and AJAX Embedded HTML Modification -

my project has "hud" on front page lists students in process of switching course plans. doing ajax call seperate .ascx page runs sql statements in c# , renders html. delivers front page placed div named "dynamic". here's code on front page calls it:

    function loaddynamic() {         var controlname = "utilities/hud.ascx";         $.ajax({             type: "post",             url: "default.aspx/result",             data: "{controlname:'" + controlname + "'}",             contenttype: "application/json; charset=utf-8",             datatype: "json",             success: function (response) {                 $('#dynamic').html(response.d);             },             failure: function (msg) {                 $('#dynamic').html(msg);             }         });     } 

this done in order facilitate multiple people working on system , being able live updates (there's script re-calls loaddynamic() function every 10 seconds, that's irrelevant problem).

however, there can quite few students trying change course plans @ 1 time, in order save space on page, we've decided try putting in "...and # more records" link (an < > tag javascript call in href) activate javascript function show seperate list students , hide list few students on (this javascript function located on hud.ascx page).

<script type="text/javascript">     function loadmorepending() {         this.document.getelementbyid(<% =pnlmorepending.clientid %>).style.visibility = 'visible';         this.document.getelementbyid(<% =pnlpending.clientid %>).style.visibility = 'hidden'; } </script> 

now have background, here's problem:

the second code block shown above contains references 2 asp:panels, contain lists, located on hud.ascx page. when clicks "...and more" link, should hide 1 asp:panel , show other. however, when goes call function, throws "microsoft jscript runtime error: 'ctl01_pnlmorepending' undefined". upon further investigation (when looking @ html source after it's been rendered in browser), when 'dynamic' div populated data hud.ascx page, remains empty!

<div id="dynamic"></div> 

while explain why pnlmorepending couldn't found, doesn't give me leads on how rectify this. how supposed reference doesn't exist on page? i've tried substituting panels divs, still doesn't work. problem, think, lies in fact script transfers on front page fine, doesn't run on hud.ascx page needs to. there way without having 2 different hud.ascx pages , 2 different "loaddynamic()" functions (the second being called , populated 'dynamic' div when "...and more" button pressed)?

sorry if it's little hard follow. first time posting , problem pretty in-depth.

you missing quotes:

this.document.getelementbyid('<% =pnlmorepending.clientid %>').style.visibility = 'visible';