facebook风格的jquerytokeninput脚本在jqueryui模态窗口中保留值

facebook style jquery tokeninput script retains value in the jquery-ui modal window

本文关键字：窗口 模态 保留 jqueryui 风格 jquerytokeninput 脚本 facebook      更新时间：2023-09-26

尝试使用facebook风格的tokeninput脚本，我将以与FB相同的方式使用该脚本（使用jquery ui获取模态窗口）在社交网络系统中向朋友发送消息。

点击"打开对话框"按钮（"打开者"id显示模式窗口）

javascript片段：

    <script type="text/javascript">
    $(document).ready(function() {
        $("input[type=button]").click(function () {
            alert("Would submit: " + $(this).siblings("input[type=text]").val());
        });
    });
</script>
    <script type="text/javascript">
    $(document).ready(function() {

             $(".show_dialog script").remove();
         $dialog = $('.show_dialog');

         $dialog.dialog({
                width:500,
                height:300,
                autoOpen: false,
                title: 'Basic Dialog'
            });
        $('#opener').click(function() {
            $dialog.dialog('open');
            $(this).siblings("input[type=text]").val('this is a value ')// ADDED BY ME 

            //$("#demo-input-facebook-theme", $dialog).val('');


            $(".border_text", $dialog).css("border","1px solid red");
            // prevent the default action, e.g., following a link
            return false;
        });
    });
    </script>

html片段是：

<button id="opener">Open the dialog</button>

<div class="show_dialog" style="display:block ;">

               <label class="send_meg_recipient_txt">To:</label>



<h2 id="theme">Facebook Theme</h2>
    <div>
        <input type="text" id="demo-input-facebook-theme" name="blah2" " /><br></br>
        <input type="button" value="Submit" />

        <script type="text/javascript">
        var script = jQuery('<script/>').attr('src', 'js/jquery.tokeninput.js').appendTo('head');
        $(document).ready(function() {

        var script = jQuery('<script/>').attr('src', 'js/jquery.tokeninput.js').appendTo('head');

        var q_string=$("#demo-input-facebook-theme").val();


            $("#demo-input-facebook-theme",$dialog).tokenInput("token_find/my3.php?q=q_string", {
                preventDuplicates: true,
                theme:"facebook"
            });

        /*
        */  
        });

        </script>

    </div>

 </div><!--end of class  show_dialog-->

我可以从脚本中获得标记。但是，在标记化一次之后，如果我点击"opener"id，模式窗口就会出现，并保留其以前的标记，这显然是我不想要的。

如何摆脱它？

您似乎要加载jquery.tokeninput.js文件两次——只要它在jQuery之后，就不应该在$(document).ready(...)中使用它。

一旦你显示了你的模态（称为$dialog.dialog('open');），尝试，调用：

$('#demo-input-facebook-theme').tokenInput("clear");

这应该会清除以前的所有令牌，然后您可以在这之后添加任何您想要的默认令牌。

相关文章：