Как заблокировать диалог («открыть») с помощью диалога jQuery/UI

Question

Я пытаюсь создать функцию, которая показывает модальное диалоговое окно, которое при вызове блоков будет закрыто до тех пор, пока диалог не будет закрыт. Это позволит получить результат возвращается вызывающему абоненту

Следующая функция - попытка, которая имеет две проблемы.

1. Он возвращает результат, пока диалог по-прежнему открыт.
2. Тест-селектор не находит диалоговое окно, проверка с помощью firebug показывает, что элемент id теряется после создания диалога.

.

function getCountrySelection() { 
    var ctryCode; 
    var dlg = $("#JS-field-dlg-ctry-select"); 

    if (dlg.size() === 0) { 
     dlg = $("<div id='JS-field-dlg-ctry-select' title='Select Country' class='dialog-fields'></div>"); 
     dlg.append("Customer found in both Australia and New Zealand"); 
     dlg.dialog({ 
      autoOpen: false, 
      width: 400, 
      height: 160, 
      modal: true, 

      buttons: { 
       "Australia": function() { 
        ctryCode = "au"; 
        $(this).dialog("close"); 
       }, 
       "New Zealand": function() { 
        ctryCode = "nz"; 
        $(this).dialog("close"); 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    } 

    dlg.dialog('open'); 

    return ctryCode; 
} 

EDIT: Я думал, что я хотел бы показать, как я звоню это:

buttons: { 
    "Find": function() { 
     var custAu = JS.sales.getCustomer("au", inpCust.val()); 
     var custNz = JS.sales.getCustomer("nz", inpCust.val()); 

     var cust; 
     if (custAu === undefined && custNz === undefined) { 
      alert('No customer could be found with that number.'); 
      return; 
     } else if (custAu !== undefined && custNz !== undefined) { 
      var ctry; 
      getCountrySelection(function(result) { 
       ct = result; 
      }); 
      if (ctry === "au") { 
       cust = custAu; 
      } else if (ctry === "nz") { 
       cust = custNz; 
      } else { 
       return; 
      } 
     } else if (custNz === undefined) { 
      cust = custAu; 
     } else { 
      cust = custNz; 
     } 

     if (cust) { 
      $(this).dialog("close"); 
      // Do something with cust. 
     } else { 
      alert('Customer could not be found.'); 
     } 
    }, 
    "Cancel": function() { 
     $(this).dialog("close"); 
    } 
} 

Answer 1

Там нет никакого способа, чтобы блокировать выполнение, пока диалог не закрывается; JavaScript не позволяет «приостановить» выполнение. Лучше всего изменить договор своей функции; вместо того, чтобы сразу возвращать значение, он должен принять функцию обратного вызова, которая будет вызываться с результатом, как только диалог будет отклонен. Тогда код, вызывающий это, предоставит соответствующий обратный вызов, в котором он сможет продолжить его выполнение.

Что-то вроде этого:

function getCountrySelection(callback) { 
(...) 
      buttons: { 
       "Australia": function() { 
        $(this).dialog("close"); 
        callback("au"); 
       }, 
       "New Zealand": function() { 
        $(this).dialog("close"); 
        callback("nz"); 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
        callback(); 
       } 
      } 
     }); 
    } 
    dlg.dialog('open'); 
} 

Затем используйте:

getCountrySelection(function(result) { 
    if (result) { 
     ...handle result... 
    } else { 
     ...the user cancelled the dialog... 
    } 
}); 

Это в основном то же самое, как и вызовы AJAX; вы не можете «приостановить» ваш вызов AJAX дождаться завершения AJAX и вернуть результат, следовательно, «асинхронный».

EDIT: В вашем конкретном примере, вы могли бы использовать его как это:

buttons: { 
    "Find": function() { 
     var custAu = JS.sales.getCustomer("au", inpCust.val()); 
     var custNz = JS.sales.getCustomer("nz", inpCust.val()); 

     if (custAu === undefined && custNz === undefined) { 
      alert('No customer could be found with that number.'); 
      return; 
     } else if (custAu !== undefined && custNz !== undefined) { 
      getCountrySelection(function(ctry) { 
       var cust; 
       if (ctry === "au") { 
        cust = custAu; 
       } else if (ctry === "nz") { 
        cust = custNz; 
       } 
       handleCustomer(cust); 
      }); 
     } else if (custNz === undefined) { 
      handleCustomer(custAu); 
     } else { 
      handleCustomer(custNz); 
     } 

     function handleCustomer(cust) { 
      if (cust) { 
       $(this).dialog("close"); 
       // Do something with cust. 
      } else { 
       alert('Customer could not be found.'); 
      }    
     } 
    }, 
    "Cancel": function() { 
     $(this).dialog("close"); 
    } 
}