$('#uimsg').html('sometring') stopped working

See more:

jQuery

ASP.NET4

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');
    }