有沒有辦法讓fcbkcomplete在jQuery UI對話框中工作

Question

我看到其他問題，說解決方案是設置autoOpen = true，但我不想讓autoopen爲true。

反正有沒有autoOpen = true的fcbkcomplete在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

ooo什麼似乎沒有工作？你能解釋一下你想要做的更多嗎？我剛剛設置了基本的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(); 

它的演示是here

---

請耐心等待，這個例子佔用了相當多的代碼。現在有三個例子，其中兩個有效，一個沒有。

簡單解釋一下，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! 

更新演示是here