JSFiddle - React, Tailwind, and code Playground

by ricardojriosr

HTML

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!-- Here i commented some external references but in my project they are active-->

<!--<script src="http://maps.google.com/maps/api/js?sensor=false"></script>-->

<!-- Include jQuery -->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->

    <!--<script src="@Url.Content("~/Scripts/grid.locale-en.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>-->

<!--<script src="@Url.Content("~/Scripts/jquery-ui-1.7-min.js")"  type="text/javascript"></script> -->

<!-- End of external references -->

<center>

<fieldset>

<legend>Items Tests on site</legend>

<br />
    
    <div class="form-group">
      <label for="JobsLoaded" class="col-lg-2 control-label" >Select Job</label>
        <div class="col-lg-10">        
            <select class="form-control" id="JobsLoaded" name="JobsLoaded" onchange="OnSiteJob(this.value)"> </select>
        </div>
    </div>

    <div id="GroupDivs">

    <div class="form-group" id="OnSiteDiv">
        <br />
      <div class="col-lg-10">
        <div class="checkbox">
          <label>
            <input type="checkbox" id="OnSiteCB" > <strong>On site?</strong>
          </label>
        </div>
      </div>
      <br />
    </div>

    <div class="form-group" id="OnSiteGridTools">
        <br />
        <div class="row">
            <div class="col-lg-10">
                <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
                <div id="pager" class="scroll"></div>
            </div>
        </div>
        <br />
    </div>

    <div class="form-group" id="DivMap">
        <br />
        <div class="row">
            <div class="col-md-10">
               <!-- Map Container -->
               <div id="mapContainer"></div>
            </div>
        </div>
        <br />
    </div>

    </div>
   ...

JavaScript

$(document).ready(function () {
        $("#OnSiteDiv").hide();
        $("#OnSiteGridTools").hide();
        $("#DivMap").hide();
        $("#test").hide();
        LoadCombos();
        LoadGridItems();
        $(window).resize(function () {
            //CSS Resizes Container So Lets Recall The Map Function           
            showMap();
        });
    });

    function LoadCombos() {
        FillCombobox("/JOBS/PROG41/LoadJobs", $("#JobsLoaded"), "Select");
    }

    function PassedTest(elem) {
        var data = { idserial: elem, idjob: idjobx };
        idserialF = elem;
        Funciones_Ajax_conAlert("/JOBS/PROG41/PassedItemOnSite", data, AfterPassedTest)
        SiGrabo = true;
    }

    function AfterPassedTest() {
        $("#list").jqGrid('setGridParam', { postData: { elem: idjobx} }).trigger("reloadGrid");
        ExistenRegistros();
    }

    function ExistenRegistros() {
        if (typeof (idjobx) != "undefined" && idjobx != null) {
            var variable;
            $.ajax({
                type: "POST",
                url: "/JOBS/PROG41/ExistsTools",
                data: { idjob: idjobx },
                async: false,
                success: function (data) {
                    console.log(data) //Solo para propositos de debug
                    if (data.success) {
                        variable = data.mensaje;
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Failed ExistenRegistros");
                    alert(xhr.responseText);
                    alert(thrownError);
                }
            });
            if (variable == "NO") {

                ReviewAtEnd();
                $("#GroupDivs").html("<div class='col-lg-10'><br/><br/><center><span class='text-info'>There is no items left for tests.</span></center></div><br/><br/>");
                $("#GroupDivs").show();

            }
        }
    }

    function ReviewAtEnd() {
       ...