有没有办法让 fcbkcomplete 在 jquery ui 对话框中工作

Question

我看到其他关于此问题的问题说解决方案是设置 autoOpen = true 但我不想将 autoopen 设置为 true。

无论如何，有没有办法让 fcbkcomplete 在没有 autoOpen = true 的情况下在 jquery 对话框上工作。

Answer 1

根据您的反馈，此处进行了更新。

$( ".selector" ).dialog({
    open: function(event, ui)
    {
        $("element").fcbkcomplete({
            json_url: "fetched.txt",
            cache: true,
            filter_case: true,
            filter_hide: true,
            newel: true
        });
    }
});

希望有帮助。

Answer 2

哦，什么似乎不起作用？您能解释一下您正在尝试做更多的事情吗？我已经设置了基本的 FCBKcomplete 演示，将其放入对话框中并触发它，它会提出建议 - 您能否举一个不适合您的示例？

这是我使用的代码：

HTML:

<div id="myDialog"> 
    <h1>FCBKcomplete Demo</h1> 
    <form action="submit.php" method="POST" accept-charset="utf-8"> 
        <select id="select3" name="select3"> 
            <option value="test1">sleep</option> 
            <option value="test3">sport</option> 
            <option value="test3">freestyle</option> 
            <option value="2">Терешкова Валентина</option> 
        </select> 
        <br/> 
        <br/> 
        <input type="submit" value="Send"> 
    </form> 
</div>
<input type="button" id="trigger" value="Open Dialog" />

和 javascript:

$("#myDialog").dialog({ 
    autoOpen: false,
    width: 550, 
    modal: true, 
    title: "FCBKcomplete Trial" 
});
$("#select3").fcbkcomplete({
    json_url: "/echo/json/",
    addontab: true,
    cache: true,
    height: 2                    
});
$("#trigger").click(function() {
   $("#myDialog").dialog('open'); 
}).button();

它的演示是 此处

---

请耐心等待，该示例占用了大量代码。现在有三个例子，两个有效，一个无效。

简单解释一下，jQuery 代码通常在页面加载完成时运行。当所有物品都到位时，就完成了加载。因此，当您使用 ajax 添加项目时，您最初所做的任何操作都不会影响新项目。因此，现在您需要再次执行操作，以便新项目受到影响。

注意： 由于我无法使用 ajax 加载 HTML，因此我通过单击来模拟它。 ..

// EXAMPLE ONE: (working)
    $("#dialogOne").dialog({ 
        autoOpen: false,
        width: 550, 
        modal: true, 
        title: "FCBKcomplete Trial" 
    });
    $("#selectOne").fcbkcomplete({
        json_url: "/echo/json/",
        addontab: true,
        cache: true,
        height: 2                   
    });
    $("#triggerOne").click(function() {
       $("#dialogOne").dialog('open'); 
    }).button();
// ABOVE SHOULD WORK CORRECTLY: its static DOM items, 
// there is a little clue for later......



// EXAMPLE TWO: (broken)
    // Replicate loading data - as though it had been returned from ajax:
    $("#loadTwo").click(function() {
        // Add the data to the end of the page:
        $("body").append(''
           +'<div id="dialogTwo"> '
           +'     <h1>FCBKcomplete Demo Two</h1> '
           +'     <form action="submit.php" method="POST" accept-charset="utf-8"> '
           +'         <select id="selectTwo" name="selectTwo"> '
           +'             <option value="test1">sleep</option> '
           +'             <option value="test3">sport</option> '
           +'             <option value="test3">freestyle</option> '
           +'             <option value="2">Терешкова Валентина</option> '
           +'         </select> '
           +'         <br/> '
           +'         <br/> '
           +'         <input type="submit" value="Send"> '
           +'     </form> '
           +' </div>'
           +' <input type="button" id="triggerTwo" value="Open Dialog Two" /><br/><br/');
    }).button();

    // Just as before setup the dialog (buuuut, the div isn't there yet ;) ):
    $("#dialogTwo").dialog({ 
        autoOpen: false,
        width: 550, 
        modal: true, 
        title: "FCBKcomplete Trial" 
    });
    // Initiate the FCBKcomplete (buuuut, the select input isn't there yet ;) ):
    $("#selectTwo").fcbkcomplete({
        json_url: "/echo/json/",
        addontab: true,
        cache: true,
        height: 2                    
    });
    // Add a listener to show the dialog containing the FCBKcomplete...:
    $("#triggerTwo").click(function() {
       $("#dialogTwo").dialog('open'); 
    }).button();
// ABOVE SHOULD FAIL: It will load the 'dynamic' items (imagine 
// $("body").append(....); being the success callback of an ajax
// function loading data) but remember, the other code runs when 
// the page is ready, buuut the items aren't actually there yet!

// EXAMPLE THREE: (working)
    // Replicate loading data - as though it had been returned from ajax:
    $("#loadThree").click(function() {
        // Add the data to the end of the page:
        $("body").append(''
           +'<div id="dialogThree"> '
           +'     <h1>FCBKcomplete Demo Three</h1> '
           +'     <form action="submit.php" method="POST" accept-charset="utf-8"> '
           +'         <select id="selectThree" name="selectThree"> '
           +'             <option value="test1">sleep</option> '
           +'             <option value="test3">sport</option> '
           +'             <option value="test3">freestyle</option> '
           +'             <option value="2">Терешкова Валентина</option> '
           +'         </select> '
           +'         <br/> '
           +'         <br/> '
           +'         <input type="submit" value="Send"> '
           +'     </form> '
           +' </div>'
           +' <input type="button" id="triggerThree" value="Open Dialog Three" /><br/><br/');
        // This time setup the dialog INSIDE the 'success' callback:
        $("#dialogThree").dialog({ 
            autoOpen: false,
            width: 550, 
            modal: true, 
            title: "FCBKcomplete Trial Three" 
        });
        // Initiate the FCBKcomplete again INSIDE the 'success' callback:
        $("#selectThree").fcbkcomplete({
            json_url: "/echo/json/",
            addontab: true,
            cache: true,
            height: 2                    
        });
        // Add a listener to show the dialog containing the FCBKcomplete:
        $("#triggerThree").click(function() {
           $("#dialogThree").dialog('open'); 
        }).button();            
    }).button();
// ABOVE SHOULD WORK: Now the data is being loaded dynamically, 
// just as example two. However this time we initiate the dialog
// and FCBKcomplete from the 'success' callback. That way, the 
// dynamic HTML has already been loaded, so when you try to intiate
// them they will work!

更新的演示位于此处