Как реализовать диалог подтверждения JQuery с JSF

Я хочу использовать диалог JQuery, когда я нажимаю кнопку на странице JSF, чтобы подтвердить выполнение действия (в моем случае, чтобы подтвердить удаление строк). Я нашел это JQuery код прекрасно работает:Как реализовать диалог подтверждения JQuery с JSF

<html> 
    <head> 
     <title>jQuery UI Example Page</title> 
     <link type="text/css" href="css/custom-theme/jquery-ui-1.8.18.custom.css" rel="stylesheet" /> 
     <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script> 
     <script type="text/javascript"> 
      $(function(){ 

       // Accordion 
       $("#accordion").accordion({ header: "h3" }); 

       // Tabs 
       $('#tabs').tabs(); 


       // Dialog   
       $('#dialog').dialog({ 
        autoOpen: false, 
        width: 600, 
        buttons: { 
         "Ok": function() { 
          $(this).dialog("close"); 
         }, 
         "Cancel": function() { 
          $(this).dialog("close"); 
         } 
        } 
       }); 

       // Dialog Link 
       $('#dialog_link').click(function(){ 
        $('#dialog').dialog('open'); 
        return false; 
       }); 

       // Datepicker 
       $('#datepicker').datepicker({ 
        inline: true 
       }); 

       // Slider 
       $('#slider').slider({ 
        range: true, 
        values: [17, 67] 
       }); 

       // Progressbar 
       $("#progressbar").progressbar({ 
        value: 20 
       }); 

       //hover states on the static widgets 
       $('#dialog_link, ul#icons li').hover(
        function() { $(this).addClass('ui-state-hover'); }, 
        function() { $(this).removeClass('ui-state-hover'); } 
       ); 

      }); 
     </script> 
     <style type="text/css"> 
      /*demo page css*/ 
      body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 50px;} 
      .demoHeaders { margin-top: 2em; } 
      #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} 
      #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} 
      ul#icons {margin: 0; padding: 0;} 
      ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} 
      ul#icons span.ui-icon {float: left; margin: 0 4px;} 
     </style>  
    </head> 
    <body> 

     <!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller--> 
     <h2 class="demoHeaders">Dialog</h2> 
     <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-newwin"></span>Open Dialog</a></p> 

     <!-- ui-dialog --> 
     <div id="dialog" title="Dialog Title"> 
      <p>Dialog Test</p> 
     </div> 

    </body> 
</html>

Проблема заключается в том, что мне нужно, чтобы вызвать диалоговое окно с помощью этой кнопки в Java Server Faces страницы:

<h:commandButton value="Delete" action="#{bean.deleteid}" > 
    <f:ajax render="@form" execute="@form"></f:ajax> 
</h:commandButton>

ли вы помочь мне, пожалуйста, для осуществления этого пример?

источник

2012-05-18 user1285928

Вот подход, который я использую

Вам нужны две кнопок

первых из них будут скрыты и будут называться в результате нажатия Yes в диалоге подтверждающего, эта скрытая кнопка будет тот, будет вызывать метод на стороне сервера и будет делать render используя f:ajax

<h:commandButton id="myHiddenButtonID" value="DeleteHiddenButton" action="#{bean.deleteid}" style="display:none"> 
    <f:ajax render="@form" ></f:ajax> 
</h:commandButton>

теперь к кнопке, откроется диалоговое окно, эта кнопка будет также отправить форму в серы версия с execute="@form" (в случае, если у вас есть столбец выбора, например)

<h:commandButton value="Delete"> 
    <f:ajax execute="@form" onevent="openDialogFunc()"></f:ajax> 
</h:commandButton>

теперь к реализации функции Js

function openDialogFunc(data){ 
    if (data.status === 'success') { 
     $('#dialog').dialog({ 
      autoOpen: false, 
      width: 600, 
      buttons: { 
       "Ok": function() { 
        $("#myHiddenButtonID").click(); 
        $(this).dialog("close"); 
       }, 
       "Cancel": function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    } 
}

Обратите внимание, что только после нажатия на кнопку OK диалогового там будет выполнение ваши скрытые кнопки $("#myHiddenButtonID").click(); иначе ничего не произойдет ...

Но я очень сильно рекомендую вам использовать h:head вместо head и <h:panelGroup вместо DIV .. Посмотрите мой предыдущий пример ...jQuery Dialog in JSF

источник

2012-05-21 10:13:16 Daniel

Благодарим вас за ответ. Вы уверены, что нет другого возможного решения для прямого вызова ajax без использования скрытой кнопки? – user1285928

INMO вам действительно лучше это сделать, другой вариант - написать код js, который будет имитировать то же самое, что и 'f: ajax' do ... Я не видел" имитации f: ajax с js more чем один или два раза ", поэтому скрытая кнопка - это лучшее и безопасное решение ... – Daniel

Мне просто интересно, как это можно реализовать. Не могли бы вы показать мне быстрый фрагмент кода? – user1285928

Если вы должны назвать это сказать по щелчку CommandButton затем использовать onclick событие

<h:commandButton value="Delete" action="#{bean.deleteid}" onclick="return myjavascriptmethod"> 
    <f:ajax render="@form" execute="@form"></f:ajax> 
</h:commandButton>

затем в диалоговом окне вы можете проверить состояние подтверждения по щелчку Okay отправки события.

Редактировать По комментарий:

, когда вы не хотите использовать DIV, я просто использовал панели Grid, вы можете сделать что-то вроде этого:

XHTML

<h:panelGrid id="panelGridAsDialogTest" style="display:none;"> 
     <h:outputLabel value="I Am a dialog test" /> 
    </h:panelGrid> 
var alreadyValidated = false; 
function testJQueryDialog(buttonReference){ 
    if(!alreadyValidated) {     
    $('#panelGridAsDialogTest').dialog({ 
      autoOpen: true, 
      width: 600, 
      buttons: { 
       "Ok": function(event) { 
        $(this).dialog("close"); 
        alreadyValidated = true; 
        jQuery(buttonReference).trigger("click"); 
       }, 
       "Cancel": function(event) { 
        event.preventDefault(); 
        $(this).dialog("close"); 
       } 
      } 
     }); 
    } 
    return alreadyValidated; 
}

Если вы захотите придерживаться div, но сделайте свой код работой, вы можете просто использовать тот же javascript, указанный выше, и заменить id id div.

источник

2012-05-18 17:03:08 mprabhat

Я добавил атрибут onclick и он работает. Но независимо от того, что я нажимаю, код кнопки выполняется. Как мне нужно отредактировать код, чтобы остановить его? – user1285928

При щелчке «Нет» в вашем диалоговом окне добавьте event.preventDefault(), который решит вашу проблему – mprabhat

, поэтому в вашем случае код отмены будет выглядеть так: «Отмена»: function (event) { $ (this) .dialog ("Закрыть"); event.preventDefault(); } } – mprabhat

Гораздо более простой подход был бы не использовать Jquery dailog для сообщения подтверждения, просто используйте обычный яваскрипт окно подтверждения в OnClick, не нужно изобретать велосипед:

<h:commandButton value="Delete" action="#{bean.deleteid}" onclick="return confirm('Are you sure you want to delete this?')"> 
    <f:ajax render="@form" execute="@form"></f:ajax> 
</h:commandButton>

Вы должны добавить return В противном случае jsf будет игнорировать то, что пользователь выбрал из окна подтверждения, поэтому, если пользователь скажет, что клики будут отменены, функция удаления все равно будет выполнена.

источник

2013-07-07 14:15:23

Как реализовать диалог подтверждения JQuery с JSF

ответ

Смежные вопросы