无论如何有让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!

更新的演示在这里