Delayed execution of Javascript

Question

In my project I have a modal window where a cascading dropdownlist is shown for two properties (Family, TypeID) of a class (Machine).

The issue: The dependant dropdownlist populates only when the modal window has been open for the second time. On the first time, nothing happens:

Here is a picture of how it works for a better understanding:

Notice that the row that says Modelo (Modelo is the name for TypeID) is empty in the first moment, but once re-opened, it populates with the expected information.

The code:

Note The Javascript is located in the Index page that contains the link to the modal window

This modal window is used when a New Machine is Created, or Edited. For that reason, in the first section of the Javascript, I check in which situation I am and check if the Machine property: MchName, has a value. In case it doesn't have a value, I assign the value of the variable items to the property TypeID that should be shown when the Modal opens.

@section scripts{






}

Get Method:

    [HttpGet]
    public IActionResult CreateEdit(int? id)
    {
        //Lista de Familias
        List FamilyList = new List();
        FamilyList = (from family in _context.MachineFamilies
                      select family).ToList();
        FamilyList.Insert(0, new MachineFamily { FamilyID = 0, FamilyDescription = "-- Seleccione Familia --" });
        ViewBag.ListofFamily = FamilyList;

        ViewBag.TypeID = string.Empty;
        return PartialView("~/Views/Shared/Machines/_Create.cshtml");
    }

JsonResult:

    public JsonResult GetModel(int FamilyID)
    {
        List ListaModelos = new List();
        ListaModelos = (from model in _context.MachineTypes
                        where model.FamilyID == FamilyID
                        select model).ToList();
        ListaModelos.Insert(0, new MachineType { TypeID = 0, TypeDescription = "-- Seleccione Modelo --" });
        return Json(new SelectList(ListaModelos, "TypeID", "TypeDescription"));
    }

View: Modal

@model Application.Models.ApplicationviewModels.MachineIndexData
@using Application.Models


    @await Html.PartialAsync("_ModalHeader", new ModalHeader
{ Heading = String.Format("Actualización de Modelo") })

    
    
        
        
            
            
                
            
        
        
            
            
                
            
        
        
            
            
                
                
            
        
        
            
            
                
                
            
        
        
            
            
                
                
            
        
        
            
            
                
                
            
        
        
            
            
                
                
                
            
        
        
            
            
                
                
            
        
        
            
            
                
                
            
        
        
            
            
                
                
                
            
        

        @await Html.PartialAsync("_ModalFooter", new ModalFooter { })

Final notes: I believe that to fix this I should change the Javascript. Can someone please explain to me why this happens and how to fix it?

Update: Attempting to assign a new id to the ´MchName´ field and send it to the Script

View:

Script:

        $('#modal-action-machine').on('shown.bs.modal', function () {
            var test = document.getElementById("MchName2").value;
            if (test) {

            } else {
                var items = "";
                $('#TypeID').html(items);
            }
        });

No luck tho.

Update: Second attempt

View:

Script:

        $('#modal-action-machine').on('shown.bs.modal', function () {
            var test = "#MchName2 #MchName";
            if ($(test).val()) {

            } else {
                var items = "";
                $('#TypeID').html(items);
            }
        });

Luis Alberto Delgado de la Flo · Accepted Answer

I have found an answer that works for this specific case.

The first thing that was wrong was evaluate a variable that is not defined inside an ifstatement.

$('#modal-action-machine').on('shown.bs.modal', function () {
    var test = "#MchName";
    if ($(test).val()) {

In this code I was assigning the value of #MchName to testbut in a first moment, #MchName does not get defined until the modal opens for a first time, and for that, not executing the rest of the code.

Second: A turn around was to use click event of the Create button to identify if I'm in a case of a New Machine or just an update.

For this I will declare a global variable and assign it the value of zero. If the Create button is clicked, assign this variable the value of 1, and if this is true, assign the default value that was intended to the #TypeID variable.

After the modal closes, re-asign the global variable to zero. This, for the case that another button (Update) is hitted to call the modal.

This is the code:

var global = this;
var wasclicked = 0;

$(document).ready(function () {

    document.getElementById("modalbutton").onclick = function () {
        global.wasclicked = 1;
    };

    $('#modal-action-machine').on('hidden.bs.modal', function () {
        global.wasclicked = 0;
    });

    $('#modal-action-machine').on('shown.bs.modal', function () {
        if (global.wasclicked == 1) {
            var items = "";
            $('#TypeID').html(items);
        }

    });

With this, the project works as intended.

Thanks for the help!

Delayed execution of Javascript

Answers (2)

Related Questions