диалог jquery в файле заголовка не работает

Question

У меня возникла проблема с диалоговым окном Jquery. Мое намерение состоит в том, чтобы отобразить предупреждающее сообщение, чтобы уведомить пользователя, когда пользователь внес некоторые изменения в HTML-форму и пытается покинуть страницу, нажав любую из гиперссылок. Но диалоговое окно jquery не появляется при изменении значений формы и нажатии любой из гиперссылок на странице.

Things отметить:

Этот код находится в файле мастер FTL и все другие мои файлы FTL будут внесены в этот файл. У меня тот же код на другой странице, и когда пользователь нажимает кнопку отмены на странице после внесения некоторых изменений в поля формы, отображается диалоговое окно. Значок нормального java-скрипта внутри моего условия if (см. Код ниже) отображается, но диалоговое окно jquery не отображается.

Цените свою помощь и благодарите заранее.

CSS Включает

<title><@tiles.getAsString name="title" ignore=true /></title> 
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"></meta> 
     <meta http-equiv="content-type" content="text/xhtml; charset=utf-8"/> 
     <@tiles.insertAttribute name='metas' ignore=true/> 
     <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"/> 
     <link href="/styles/<@tiles.getAsString name='cssFilename' ignore=true/>" type="text/css" rel="stylesheet"/> 
     <link href="/styles/<@tiles.getAsString name='cssErrorFilename' ignore=true/>" type="text/css" rel="stylesheet"/> 
     <link href="/styles/login-style.css" type="text/css" rel="stylesheet"/> 
     <link href="/styles/jtable-green.css" type="text/css" rel="stylesheet"/> 
     <link href="/css/themes/base/jquery-ui.css" type="text/css" rel="stylesheet"/> 

Сценарий Lib включает

<script type="text/javascript" src="/js/moment.min.js"></script> 
<script type="text/javascript" src="/js/jquery-1.8.2.js"></script> 
<script type="text/javascript" src="/js/ui/jquery-ui.js"></script> 
<script type="text/javascript" src="/js/ui/jquery-ui.min.js"></script> 
<script type="text/javascript" src="/js/ui/jquery.ui.core.js"></script> 
<script type="text/javascript" src="/js/ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="/js/ui/jquery.ui.datepicker.js"></script> 
<script type="text/javascript" src="/js/ui/jquery.ui.autocomplete.js"></script> 
<script type="text/javascript" src="/js/jquery.jtable.js" ></script> 

HTML Div Часть

<div style="display:none"> 
    <div id="diaBack" class="dialog" title="Are You Sure!"> 
     <p> 
      Are you sure you want to cancel the changes. 
     </p> 
    </div> 
</div> 

Jquery сценария часть

$("a").click(function(e) 
    { 

      if ($("#UnsavedChanges").val() == "1") 
      { 
       alert("You have done some changes"); 
       $("#diaBack").dialog({ 
          modal: true, 
          show: "slide", 
          dialogClass: "myTitleClass", 
          width: defaultDialogWidth, 
          buttons: { 
           "OK": function() { document.location = "/tickerdefinitions"; }, 
          } 
         });; 
      } 
     }); 

Answer 1

Спасибо за все ваши ответы. Сделал пару вещей и сработало.

У меня возникла ошибка скрипта, говорящая, что «defaultDialogWidth undefined». Не знаю, почему. Так изменилось, что до 350. Также заменил строку оповещения на e.preventDefault() ;.