Question

I have a UI Dialog for View selection that is on almost every page, so I moved it to an external js file.

It works perfectly on every page where it is called by click functions, but on one page, where I am trying to automatically open dialog depending on the value of a javascript variable, it fails.

Is this because when the external js file is loaded, the html of the dialog doesn’t exist? If I move the in the external back to the page, it works Ok.

Can anyone offer me a solution, I really would like to keep the View Dialog initialization code in the external files.

External js file

$(function() { // ******* The Views Dialog
  var $divViewDialog = $('#divViewDialog');
  $divViewDialog.dialog({ autoOpen: false, modal: true,title: 'Select required view'});
  ..... etc

Page code calling the dialog –

$(function() {

// ********* Other unrelated stuff

  if (ulx>1) { $divViewDialog.dialog('open');} // If logged in, Show View Dialog

  else {$divLoginDialog.dialog('open');}       // else show Login Dialog

});

Answer 1

Probably because they are both set to execute on document ready, if the second one executes first then the dialog wire up hasn’t actually happened yet. You should change the wire up to be a JavaScript function, then call said function in your page before opening the dialog.

EDIT: Also, you’re putting the divViewDialog into a variable that is only accessible to the function in the page, so it won’t work in your external file. I have updated the code below to no longer use the divViewDialog variable.

Try this:

External JS File

function wireUpDialog() {
    $('#divViewDialog').dialog({ autoOpen: false, modal: true,title: 'Select required view'});
    ..... etc
}

Page:

$(function() {
    wireUpDialog();
    if (ulx>1) { $('#divViewDialog').dialog('open');}
    else {$divLoginDialog.dialog('open');}
});