Is there an issue with ScriptManager.RegisterStartupScript(…);

Question

Im trying to get a Bootstrap modal to pop up, using the following code,

ScriptManager.RegisterStartupScript(this.Parent, this.GetType(), "Pop", "openMsgModal5();", true);

but it works some times, and other times it just flashes as Chrome gets focus with no pop up. Really time wasting and frustrating. Is there a Javascript issue or AJAX issue with this script or is there an incompatibility between JQuery and some Bootstrap code (I know they use Javascript but just asking) because I can't get JQuery popups to run either. Or is it ASP.net 4.0?

I have set my ASP:Updatepanel to UpdateMode="Always".

Im loading javascripts as follows:

<script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>

<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

<script src="js/bootstrap.min.js" type="text/javascript"></script>

I also have a scriptmanager on my page

<asp:ScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ScriptManager>

any ideas would be appreciated if someone has seen similar as not much hair left to pull out and read and tried about 15 forum posts so far, with all saying the same but none working for me.

Answer 1

Don't know asp.net but your problem looks like a loading-order issue. You have the "show modal" buttons declared, bootstrap add event listeners(I'll call it init afterwards) to them using jquery's $(document).ready() funtionality( src code here, note the click event on the bottom ), so if you hard code your modal buttons and modal dialogs in html, they'll surely work, while if you add them by an ajax call using ScriptManager(if I'm not mistaken about what it does), whether modal init or ajax call finishes first is not determined . Ajax call finishes first, everything's fine; finishes after the other, :( ( the newly arrived html fragments won't have the event listeners to work properly as modals )
So the solution is, ensure all your modal htmls arrive before bootstrap inits the modals, seems LoadScriptsBeforeUI does that. Or, before we inits them manually: if ScriptManager has a callback or something which can be executed after the html fragments are loaded, add this to the callback: $('#myModal').modal() .

Answer 2

When I want to show an alert box after a partial update, I set the UpdatePanel as the control that registers the script block. To avoid any conflict with other script code, I also call the code asynchronously with setTimeout .

In your case, it could look like this:

ScriptManager.RegisterStartupScript(updatePnl, updatePnl.GetType(), "Pop", "setTimeout(function() { openMsgModal5(); }, 200);", true);