hi have regular select box values in it. problem is long it's causing page load speed issues on mobile networks , causing page fail on load more might expect..
since field changed thought better event
i googled lot , found little dynamic select box - came with
html
<br> <div class="ui-widget-header">customer:</div> <select name="customer_id" id="customer_id" class="ui-widget-content" style="width:642px;"> <option value="1">francis l. mcbride</option> </select> jquery
<script> $(function() { $("#customer_id").click(function(){ $('#customer_id').prop("disabled", true); $.getjson("select.php?table=customer", function(j){ var current = $("#customer_id").val(); var options = ''; $.map(j.params, function(item) { options += '<option value="' + item.id + ((current==item.id)?' selected':'')+'">' + item.name + '</option>'; }); $("#customer_id").html(options); $('#customer_id').prop("disabled", false); }); }); }); </script> hopefully can see doing - showing "old" value in drop down - populating , redrawing .getjson call - problem is doesn't work - - first click shows 1 item (top of json get) 2nd , subsequent clicks flickers , changes selected top of list every time
i fixed latter part of there typo around select
$.map(j.params, function(item) { options += '<option value="' + item.id + '"' +((current==item.id)?' selected':'')+'>' + item.name + '</option>'; }); in chrome:
- but still fails work on first use after page load.. bizarre.. appears browser animation literally finishes fast after first render of 1 option feel confident case because if use alerts around getjson call renders fine first time (albeit alertbox interruption).
in firefox
- totally different bug - brower refuses not redraw new text selectbox. if click drop down removes previous setting
=====================================================================
verdict
there no solution because can't interrupt drop-down event **at all**, decided upon hybrid (poor) solution.
pseudo code solution:
- mask selectbox event overlay containing disabled input box only
- cause overlay swap dropdown underlay after user engages event
jquery
<script> $(function() { $("#customer_id_slidebutton").button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }); $('#customer_id_slidediv').hide(); $("#customer_id_slidebutton").click(function(e){ if ($('#customer_id_overlay').is(":visible")){ $.getjson("select.php?table=customer", function(j){ var current = $("#customer_id").val(); var options = ''; $.map(j.params, function(item) { options += '<option value="' + item.id + '"'+((current==item.id)?' selected':'')+'>' + item.name + '</option>'; }); $('#customer_id').html(options); $('#customer_id_slidediv').show(); $('#customer_id_overlay').hide(); }); } else{ $('#customer_id_slidediv').hide(); $('#customer_id_overlay').show(); } return false; }); $("#customer_id").change(function(){ $('#customer_id_fakedisplay').val($("#customer_id option:selected").text()); }); }); </script> html
<button id="customer_id_slidebutton" class="formbox" style=" z-index : 3; width:26px; height:26px; position:relative; top:29px; left: 200px;">customer_id display</button><br> <div id="customer_id_overlay" style="position: relative; top: -9px; height:21px; "> <input class="ui-widget-content formview" id="customer_id_fakedisplay" disabled value="russell y. guerrero" style="width:602px;"> </div> <div id="customer_id_slidediv" style="position: relative; top: -10px; height:21px; "d> <select name="customer_id" id="customer_id" class="ui-widget-content formbox" style="width:610px;"> <option value="2">russell y. guerrero</option> </select> </div> json
{"params":[{"id":"7","name":"amena d. bradford"},{"id":"9","name":"cameron n. morse"},{"id":"8","name":"camille e. preston"},{"id":"10","name":"doris z. cline"},{"id":"1","name":"francis l. mcbride"},{"id":"4","name":"quamar q. gregory"},{"id":"5","name":"reece w. rhodes"},{"id":"2","name":"russell y. guerrero"},{"id":"3","name":"tamekah i. barton"},{"id":"6","name":"yetta v. poole"}],"count":"10"} i don't fulfils objectives me:
- only loads single
<option></option>unless needs changing - very rare event - means don't cause server burden every time page loaded
- goes json select no "pre-select" load hit (event driven server
get) - cleanly shows change choices user
note
thanks psl deleted thread reason
fiddle can see jsfiddle of (some of positioning of button looked bad reworked widthe , things works) http://jsfiddle.net/ups54/
Comments
Post a Comment