0

我想在我的页面上有一个按钮，显示一个包含文本框和两个按钮的表单（在一个 div 中）。
我对 jquery 还不太熟悉，但我确实做了一些阅读，并尝试将我的代码建立在以下示例中：http: //jqueryui.com/demos/dialog/#modal-form

我有一个看起来像这样的按钮：

 <input type='button' class='btn btn-info' value='Change VLAN' id='changevlan'/>

和一个 div，其中包含我想要的弹出表单的详细信息：

 <div id="dialog-form" title="Change Vlan">
<p>You must supply a new vlan number</p>

<form>
<fieldset>
    <label for="vlan">Vlan Number:</label>
    <input type="text" name="vlan" id="vlan" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
 </div>

然后在我的页面底部，我包含了 jquery 和 jquery ui 库（我在底部加载以加快页面加载速度）并且我有以下 javascript：（我基于我在本文开头提到的示例.)

<script type="text/javascript">
$(function() {
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
    $( "#dialog:ui-dialog" ).dialog( "destroy" );

    var vlan = $( "#vlan" ),
      tips = $( ".validateTips" );

    function updateTips( t ) {
        tips
            .text( t )
            .addClass( "ui-state-highlight" );
        setTimeout(function() {
            tips.removeClass( "ui-state-highlight", 1500 );
        }, 500 );
    }

    function checkLength( o, n, min, max ) {
        if ( o.val().length > max || o.val().length < min ) {
            o.addClass( "ui-state-error" );
            updateTips( "Length of " + n + " must be between " +
                min + " and " + max + "." );
            return false;
        } else {
            return true;
        }
    }

    function checkRegexp( o, regexp, n ) {
        if ( !( regexp.test( o.val() ) ) ) {
            o.addClass( "ui-state-error" );
            updateTips( n );
            return false;
        } else {
            return true;
        }
    }

    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Change Vlan": function() {
                var bValid = true;
                allFields.removeClass( "ui-state-error" );

                bValid = bValid && checkLength( vlan, "vlan", 1, 1 );
                bValid = bValid && checkRegexp( vlan, /^([0-9])+$/i, "vlan must be numeric." );

                if ( bValid ) {
                    //this is where I need to redirect to another URL passing the vlan number.
                    $( this ).dialog( "close" );
                }
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

    $( "#changevlan" )
        .button()
        .click(function() {
        alert('in here');
            $( "#dialog-form" ).dialog( "open" );
        });
});
</script>

如您所见，我插入了一条警告语句以确保我正在进入 javascript。但我没有收到警报消息。并且 div 表单的内容仅在最初呈现时显示在主页上。

到目前为止我检查过的内容：

我试图仔细检查应该触发 div 表单显示的按钮的名称是否与我在 javascript 函数中查找的变量的名称相匹配：

    $( "#changevlan" )
        .button()
        .click(function() {
        alert('in here');
            $( "#dialog-form" ).dialog( "open" );
        });

我还确保我的 div 表单名为#dialog-form

但我不太确定还能尝试什么。如果您有任何建议，我将不胜感激。我还需要知道如何访问文本框的内容，然后将用户重定向到新的控制器和方法，将 vlan 号作为参数传递。也许我可以做一个 window.location 类型的事情......

谢谢。

4

1 回答 1

3

你不需要更多的库，只需制作一个简单的 jQueryUI .dialog，在对话框的“div”元素内放置一些来自 CI 的内联 php，例如<div id="dlgPopUpForm"><?= $this->load->view('dialogView.php'); ?></div>，然后当然构建你的表单dialogView.php。

在运行时，php 将被读入 div，你用来创建对话框的 jquery 选项将处理其余部分。就像是$("#dlgPopUpForm").dialog({ autoOpen: false, modal: true }); $("#someButton").click(function(e){ $("#dlgPopUpForm").dialog("open"); });

不要忘记在表单视图页面上包含表单的 javascript（dialogView.php在我的示例中）

也许当我不那么懒惰的时候，我会在今天晚些时候给你举个例子，不过，它很简单

于 2012-08-26T17:40:26.913 回答