One interesting challenge I am facing involves a page section that is dynamically generated by the server. This particular section contains inline JavaScript code written by the server itself (This is ASP.NET webforms). The purpose of this JavaScript is to bind an onchange event to a dropdown on my page, all within the $(document).ready() function.
The issue arises when the page section is not open upon pageload - in such cases where I have to manually click an 'expand' button to load and display the section from the server, the inline script fails to execute.
Essentially, the root cause seems to be the placement of the <script> tag within the HTML structure. If it is present during the initial pageload, everything works fine; however, if added after the fact, it does not trigger as intended.
Here is the snippet of the inline script causing me trouble:
<script type="text/javascript">
alert('hi inline!');
$j(document).ready( function(){
var $emailNameHidden = $j('#hidden_TargetedEmailName');
$emailNameHidden.on('change', function(){
van.TargetedEmails.loadTestCaseNameSelect($emailNameHidden.val());
});
});
</script>
I even attempted moving the alert outside the $(document).ready() block in hopes of triggering it, but alas, that also only worked during the initial pageload scenario.
The burning question remains: how can I ensure the inline script fires successfully once it has been dynamically added to the page?
As a side note, I experimented with moving this functionality into an external JS file included within the page section. However, I faced issues with binding my dropdown as the script executed before the dropdown had fully loaded. Further attempts to use $(document).ready() for this setup also failed to achieve the desired outcome.