jquery - select2 plugin not working inside a popup -
i have been working select2 plugin while , until been perfect.
i have page 3 selects loading info , working well, , multiple selects within popup. looking can't write on search field. in main page search working can't figure out problem..
i'm workign blockui plugin popup. have tried z-index, destroy , starting plugin on callback blockui function nil working , have no thought why.
code:
<!doctype html> <html> <head> <title>ff</title> <link type="text/css" rel="stylesheet" href="http://cdn.jsdelivr.net/select2/3.2/select2.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.jsdelivr.net/select2/3.2/select2.js"></script> <script type="text/javascript" src="http://xiao3meng.googlecode.com/files/jquery.blockui.js"></script> <script> $(document).ready(function() { $(".startselect").select2(); $('#clickstartpopup').click(function() { $.blockui({ message: $('#popblock'), onblock: function() { $(".popupselect").select2(); } }); }); }); </script> </head> <body> <div id="maincontent1" class="maincontent mywebsitepage"> <select class="startselect" id="merchantlist"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select> </div> <div style="clear: both; height: 15px;"></div> <span id="clickstartpopup" style="cursor: pointer;color:red;" >click me!</span> <div style="height: 300px;background-color: red;display:none;" id="popblock" > <select class="popupselect"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select> </div> </body> </html>
the reason happening because of way chosen/select2 works. actual native controls still there, made invisible elements can overlayed styled way them.
in case, select2 elements rendered outside of #popblock, this:
<div class="blockui blockmsg blockpage" style="z-index: 1001; position: fixed; padding: 0px; margin: 0px; width: 30%; top: 40%; left: 35%; text-align: center; color: rgb(0, 0, 0); border: 3px solid rgb(170, 170, 170); background-color: rgb(255, 255, 255); cursor: wait;"> <div style="height: 300px; background-color: red;" id="popblock"> <div class="select2-container popupselect select2-dropdown-open select2-container-active" id="s2id_autogen1"> <a href="#" onclick="return false;" class="select2-choice" tabindex="-1"> <span>volvo</span><abbr class="select2-search-choice-close" style="display:none;"></abbr> <div><b></b></div></a> </div> <select class="popupselect" style="display: none;"> <option value="volvo"> volvo </option> <option value="saab"> saab </option> <option value="mercedes"> mercedes </option> <option value="audi"> audi </option> </select> </div> </div> <div class="select2-drop select2-with-searchbox select2-drop-active" style="top: 337px; left: 692px; width: 76px;"> <div class="select2-search"> <input type="text" autocomplete="off" class="select2-input" style=""> </div> <ul class="select2-results"> <li class="select2-results-dept-0 select2-result select2-result-selectable select2-highlighted"> <div class="select2-result-label"> <span class="select2-match"> </span> volvo </div> </li> <li class="select2-results-dept-0 select2-result select2-result-selectable"> <div class="select2-result-label"> <span class="select2-match"> </span> saab </div> </li> <li class="select2-results-dept-0 select2-result select2-result-selectable"> <div class="select2-result-label"> <span class="select2-match"> </span> mercedes </div> </li> <li class="select2-results-dept-0 select2-result select2-result-selectable"> <div class="select2-result-label"> <span class="select2-match"> </span> audi </div> </li> </ul> </div> the reason search bar seems not working search bar ui command not have native counterpart.
jquery html blockui jquery-select2
No comments:
Post a Comment