無論如何有讓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!

更新的演示在這里