Question

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

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

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

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

 <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类型的事情......

感谢。

Answer 1

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

在运行时，php将被读入div，并且用于创建对话框的jquery选项将处理其余部分。像dialogView.php

这样的东西

不要忘记在表单视图页面中包含您的javascript表单（在我的示例中为$("#dlgPopUpForm").dialog({ autoOpen: false, modal: true }); $("#someButton").click(function(e){ $("#dlgPopUpForm").dialog("open"); });）

也许当我不那么懒惰的时候，我会在今天晚些时候做一个例子，但是，它非常直接

codeigniter - 如何使用jquery在div标签中显示弹出窗体

1 个答案: