Hello everyone,
Environment:
ASP.NET (Webforms) (Framework4.6.1)
Master Page -> Content Page -> UserControl
At first, the following "code" was 100% operational (somehow, for I could see 'n' errors and warnings in Firefox's WebConsole)
<script type="text/javascript">
function showSiiValidateMsg() {
$('#uiMsg').html('Por favor, espere mientras <br/> validamos los documentos en el SII.');
$('#modal_ProgressCotizacion').modal('toggle');
}
</script>
The html content of my uiMsg object was being successfully updated, and the modal displayed.
After cleaning and reorganizing all script tags in the Master Page, I was able to get rid of almost all of those warning/error messages with the following exception:
Loading failed for the <script> with source "https://localhost:44399/e0275a0961d04ca6aff64b4032dc2302/browserLink"
, which has always been present.
Anyhow, all bootstrap modals remain operational and the above mentioned script
showSiiValidateMsg(), does activate the modal:
$('#modal_ProgressCotizacion').modal('toggle');
but this code:
$('#uiMsg').html('Por favor, espere mientras <br/> validamos los documentos en el SII.');
simply stopped working. I does nothing, in fact, I tried showing an
alert($('#uiMsg').html());
. The dialog comes up, but completely empty.
This lack of action is, obviously, related to re-ordering the tags in the Master Page, but since, there are no more warning/error messages in Firefox's WebConsole, I have no idea how to tackle this issue while keeping things in order.
Here's how the Master Page section looks like:
...
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/MsAjaxJs") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="Recursos/normalize.css" />
<link rel="stylesheet" href="Recursos/estilos.css" />
<link rel="stylesheet" href="Recursos/menu.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
...
<form id="FormMain" runat="server">
<asp:ScriptManager ID="AjaxMngr" runat="server" EnablePartialRendering="true" EnableCdn="true"> </asp:ScriptManager>
....
Here's the ScriptManages's Definition override:
string str = "3.2.1";
ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition
{
Path = "~/Scripts/jquery-" + str + ".min.js",
DebugPath = "~/Scripts/jquery-" + str + ".js",
CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-" + str + ".min.js",
CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-" + str + ".js",
CdnSupportsSecureConnection = true,
LoadSuccessExpression = "window.jQuery"
});
string strUI = "1.8.24";
ScriptManager.ScriptResourceMapping.AddDefinition("jquery.ui.combined", new ScriptResourceDefinition
{
Path = "~/Scripts/jquery-ui-" + strUI + ".min.js",
DebugPath = "~/Scripts/jquery-ui-" + strUI + ".js",
CdnPath = "http://ajax.aspnetcdn.com/ajax/jquery.ui/" + strUI + "/jquery-ui.min.js",
CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jquery.ui/" + strUI + "/jquery-ui.js",
CdnSupportsSecureConnection = true
});
Guidance is much needed and appreciated.
Thanks.
What I have tried:
Just in case, this is the modal that contains the {uiMsg} element, as it is rendered in the client. i.e. this object's id is not being modified at all.
<div class="modal fade" id="modal_ProgressCotizacion" role="dialog" tabindex="-1">
<div class="modal-dialog modal-sm">
<div class=" modal-content" style="background: #fff">
<div class="modal-header center">
<p id="uiMsg"></p>
</div>
<div class="modal-body col-sm-12">
<div class="col-sm-4"></div>
<div class="col-sm-4"> <img src="../Recursos/Images/loader.gif" alt="" /> </div>
<div class="col-sm-4"></div>
</div>
<div class="modal-footer">
<p> Muchas gracias.</p>
</div>
</div>
</div>
</div>
2017/10/13 13:47 (UTC-4)
I have just tried something else. I called the Alert() function after the $('#uiMsg').html(....) and it does show the object's expected value, but when the modal comes up, it does not display such content.
function showSiiValidateMsg() {
var aver = document.getElementById('uiMsg');
$('#uiMsg').html('Por favor, espere mientras <br/> validamos los documentos en el SII.');
alert(aver.innerHTML);
$('#modal_ProgressCotizacion').modal('toggle');
}