Question

在我的表单验证并写入数据库后，我只想显示一条模式消息，确认数据已保存 - 我在这里查看：

http://jqueryui.com/dialog/#modal-message

我没有错误，没有任何反应。我没有打电话/激活模态消息吗？

   the template html that contains the form and validation has this:

  </form>
  <div id="dialog-message" title="Data Saved">
     <p><span class="ui-icon ui-icon-circle-check" style="float: left; 
         margin: 0 7px 50px 0;"></span> You have been successfully registered.
      </p>
   </div>

 the view looks like this:

define([
  'jquery',
  'underscore',
  'backbone',
  'lib/jquery-migrate-1.2.1',
  'models/RegisterModel',
  'text!templates/RegisterTemplate.html',
  'lib/jquery.maskedinput-1.0',
  'lib/bootstrap-acknowledgeinput.min',
  'lib/jqBootstrapValidation',
  'lib/jquery-ui'
], function($, _, Backbone, jQueryMigrate, RegisterModel, RegisterTemplate,   
    MaskedInput, Ack, jqAck, jqUI){

  var RegisterView = Backbone.View.extend({

   el: $("#container"),

   render: function(){
    var compiledTemplate = _.template( RegisterTemplate, this.model );
    this.$el.html(compiledTemplate); 

saveClient: function (e) {
    var hasError = false;

$('div.help-block ul').each(function() {
                hasError = true;
       }); 

 if (hasError)
        {
        return false;
        }
        else
        {
        registermodel.save();

       $(function() {
           $( "#dialog-message" ).dialog({
             modal: true,
             buttons: {
               Ok: function() {
                 $( this ).dialog( "close" );
               }
             }
           });
             });
         return false;
            }

Answer 1

不确定主干哲学，但这是一个简单的基于jquery-ui的函数，用于显示提示对话框：

function showDialogPrompt(pTitle, pText, pDefaultValue, btOKText, fnAceptar) {

    var _tag_prompt = $("<div id='prompt__x'></div>");
    try { _tag_prompt.dialog('destroy'); } catch (e) { /**/ }

    _tag_prompt.dialog({
        dialogClass: "no-close",  modal: true, width: 420,  height: 260,
        title: pTitle, draggable: false, closeOnEscape: false,
        buttons: [ {
                text: btOKText,
                click: function () {
                    var value = $('#dialog_prompt_value__x').val();
                    $(this).dialog("close");  
                    $(this).dialog("destroy");
                    fnAceptar(value);
                }
            }, {
                text: "Cancelar",
                click: function () {
                    $(this).dialog("close"); 
                    $(this).dialog("destroy");
                }
            }
        ]
    });

   var _dialog_prompt_template =
     '<div style="width:100%;"><p>' + pText + '</p>' +
     '<textarea style="width:100%;"' + 
     'id="dialog_prompt_value__x" rows="5">' + 
      pDefaultValue + '</textarea>' +
     '</div>';

    _tag_prompt.html(_dialog_prompt_template);
    _tag_prompt.dialog('open');
}

功能应调用为：

$(function () {
    $('#ButtonAny').click(function () {
        showDialogPrompt
            ('The Dialog Title',
            'Please type a comment:', '', 'ButtonOK Label',
            function (value) {
             alert(value);
            });
    });
});

带有主干和引导程序的jquery模态消息

1 个答案: