Alertify Prompt - Позволяет пользователю вводить значения и отправлять форму

Question

Используя alertify - version 0.3.11, я могу получить данные о вводе пользователя и показать его в оперативном диалоге. Но у меня есть несколько ценностей, а именно. пользовательского ввода, выпадающие значения, выбор даты и т.д.

var totalResources = jQuery('#grid').jqGrid('getGridParam', 'selarrrow'); 

//set custom button title for Form Submit 
    alertify.set({ labels: { 
     ok  : "Submit Data", 
     cancel : "Cancel" 
    } }); 


    //fetch user input comment 
    alertify.prompt("Please enter note/remarks for this Form :<br/>Total Resource(s): <strong>"+totalResources.length+"</strong>", function (e,value) { 


if (e) { 
    alertify.success("Data has been submitted"); 

      //encodes special characters remarks 
      var sow = encodeURIComponent(value); 

      $.post(SITE_URL+"somecontroller/someaction",$("#frm_submit").serialize()+ "&resource_ids="+resource_ids+"&sow="+sow, function(data) { 
      }); 


    }else{ 
      alertify.error("Your Data is not submitted"); 
    } 
}); 

Аналогично, как показано на рисунке ниже

Как я мог построил модальную форму с помощью alertify, где пользователь будет видеть предварительно fethced детали и может ввести свои данные и отправить?

Answer 1

Это фактически выходит за рамки Alertify. Он просто не поддерживает такую ​​функциональность. Он был разработан в качестве замены типичных встроенных функций браузера, таких как confirm() и alert().

Возможно, вы захотите посмотреть другие плагины. Тем более, что вы используете jQuery, не должно быть слишком сложно найти что-то, что будет работать для вас. Поиск лайтбоксов или модалов jQuery может привести к тому, что у вас есть возможности, которые вы ищете.

Возможно использование одной опции: Fancybox. У них есть демо форма входа в систему, что делает что-то подобное. Я никогда не пользовался Fancybox, поэтому вы можете варьироваться, но есть много разных вариантов.

Answer 2

Они добавили функцию формы в Alertify. Взгляните на this

с веб-сайта код как в: -

<!-- the form to be viewed as dialog--> 
<form id="loginForm"> 
    <fieldset> 
     <label> Username </label> 
     <input type="text" value="Mohammad"/> 

     <label> Password </label> 
     <input type="password" value="password"/> 

     <input type="submit" value="Login"/> 
    </fieldset> 
</form> 

И JS код: -

alertify.genericDialog || alertify.dialog('genericDialog',function(){ 
    return { 
     main:function(content){ 
      this.setContent(content); 
     }, 
     setup:function(){ 
      return { 
       focus:{ 
        element:function(){ 
         return this.elements.body.querySelector(this.get('selector')); 
        }, 
        select:true 
       }, 
       options:{ 
        basic:true, 
        maximizable:false, 
        resizable:false, 
        padding:false 
       } 
      }; 
     }, 
     settings:{ 
      selector:undefined 
     } 
    }; 
}); 
//force focusing password box 
alertify.genericDialog ($('#loginForm')[0]).set('selector', 'input[type="password"]');