Why are the changes immediately reset when a dialog window is opened?

July 13, 2022

I want to open a dialog, that loads the code of another page. This works so far. Now i want to set a select of the loaded dialog to one of its options and than disable (lock) it. But every change i make with JQuery is immidiatly reseted after the dialog is opened.

JavaScript Function:

function dialog(type) {
    $(".dialog").dialog({
      resizable: true,
      height: "auto",
      width: 800,
      modal: true,
      open: function () {
        $(this).load("../SearchPage/search_page.jsp"); 
        setDialogType(type);    
      }, 
    });    
  } 
  
function setDialogType(type) {
    $(".selectbox").empty();
    switch(type) {
        case "race":
            $(".selectbox").append('<option value="Race">Race</option>');
            break;
        case "class":
            $(".selectbox").append('<option value="Class">Class</option>');
            break;
        case "background":
            $(".selectbox").append('<option value="Background">Background</option>');
            break;
    }   
}

Select-Tag in the loaded HTML:

<select name="Auswahl" style="width: 100%" class="selectbox search">
    <option value="Race">Race</option>
    <option value="Class">Class</option>
    <option value="Background">Background</option>
</select>

>Solution :

I believe you need to wait for the content to load and only then call the setDialogType().
To wait for it to load, you need to pass a callbacak to load()

function dialog(type) {
  $('.dialog').dialog({
    resizable: true,
    height: 'auto',
    width: 800,
    modal: true,
    open: function () {
      $(this).load('../SearchPage/search_page.jsp', function () {
        setDialogType(type); 
      }); 
    }
  });
}