is there anyway to get fcbkcomplete working in a jquery ui dialog

Question

i see other questions on this that say the solution is to set autoOpen = true but i don't want to have autoopen true.

Is there anyway to get fcbkcomplete working on a jquery dialog without autoOpen = true.

Answer 1

Given your feedback here is an update.

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

Hope that helps.

Answer 2

ooo what doesn't seem to work? Could you explain what you are trying to do a little more? Just I have setup the basic FCBKcomplete demo up, put it inside a dialog and triggered it and it will suggest things - could you give an example of what isn't working for you?

Here is the code I used:

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" />

And the 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();

The demo of it is here

---

Please bear with me, the example takes up quite a lot of code. There are now three examples, two which work, one which doesn't.

A brief explanation, jQuery code normally runs when the page finished loading. Its finished loading when all the items are there. So when you add items with ajax, anything you originally did, won't affect the new items. So now you need to do things again so the new items are affected.

NOTE: As I can't load the HTML using ajax, I have simulated it with a click...

// 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!

Updated demo is here