添加具有输入值的listitem

时间:2014-09-25 09:36:45

标签: jquery html jquery-ui

我一直致力于为客户组织网站的可排序树列表。客户可以添加/拖动和删除页面。

要添加页面,必须点击"添加页面",这将打开一个对话框。

我想要实现的是让他们能够输入您要添加的页面的名称以及当您按下"保存"应在列表底部添加具有该名称的列表项。

对话框jquery:

           $(function() {
                    $("#dialog").dialog({
                            autoOpen: false,
                            show: {
                                    effect: "fade",
                                    duration: 500
                            },
                            hide: {
                                    effect: "fade",
                                    duration: 500
                            }
                    });

                    $("#opener").click(function() {
                            $("#dialog").dialog("open");
                    });
                    $("#closer").click(function() {
                        //add list item with value of input
                            $("#dialog").dialog("close");

                    });
            });

对话框html:

       <div id="dialog" title="Pagina toevoegen">
            <form>
                    Pagina: <input type="text" name="page"><br>

            </form>
            <button id="closer">opslaan</button>
    </div>

我不知道的部分是如何获取用户在对话框中输入的文本并将其放在列表项上。

我想补充一点,我是一名实习生的二年级学生。我尽力学习。这个网站及其用户已经为我提供了很多帮助。

我希望有人可以帮助我(也许其他人也会遇到类似情况)。

感谢

2 个答案:

答案 0 :(得分:1)

欢迎使用Stackoverflow;) 您可以做的最简单的事情是,当您单击“关闭”按钮时,从输入中抓取.val(),然后将.append()值设置为您在页面中某处的某个html列表。

$("#closer").click(function() {
                    //add list item with value of input

                        value_from_dialog_input = $("#dialog input").val();
                        $('#your_list_id').append(value_from_dialog_input);
                        $("#dialog").dialog("close");


});

答案 1 :(得分:0)

您需要使用与您在HTML中使用的相反类型的引号。因此,既然您在属性中使用双引号,请使用单引号括起代码。

$("#dialog").append('<li><a href="/user/messages"><span class="tab">Some text</span></a></li>');

希望它有所帮助。