html - How could *data inter-dependent* <select> dropdowns in rails be populated quickly? -


users need select car.
have several dropdowns when picking car in order pick year, make, model , submodel. don't know use select options make/model/submodel interdependent.
once pick year use ajax make requests query activerecord populate make dropdown.
when pick make use ajax query , populate model dropdown. when pick model ajax query , populate submodel dropdown.

the problem lot of separate network requests , in real-world conditions of low bandwidth, network issues, etc. quite there pauses severely impacting user experience , leading failures.

what approaches avoid these network requests. in there approach store of several thousand makes-model combinations on client browser?

currently data stored in sql database accessed via activerecord in rails framework. each dropdown selection results in query because yuou can't show populate , show make until know year , can't populate , show model until know make. same submodel (though i've omitted submodel rest of post simplicity!).

would session (http://simonsmith.io/speeding-things-up-with-sessionstorage/) storage of json data 10,000 combinations possible? see sessionstorage can relied on have @ least 5mb(5,200,000 bytes) gives me 5200000/10000= 520 bytes per record. enough? if persists session , across pages in many cases kick off on previous page , if had time finish wouldn't need external call @ on relevant (next) page. need refresh data either or on demand new year-make-models added periodically (several times year).

ultimately think solution here useful large number of applications , companies. example here of picking vehicle used dozens of major car insurance websites (who multiple calls right now). general appraoch of storing client side data relatioship dependent sdropdown mapply in many other situations such online shopping make-brand-year-model. backend framework populate sessionstorage done via different backend frameworks.

another options might try google's lovefield - https://github.com/google/lovefield more @ https://www.youtube.com/watch?v=s1auiq8ga1k it's open source , works in ff, chrome, ie, safari, etc.

seems sessionstorage might better our (considerable) business basing on google 100 day dev thing - though open source.

hello can create json object detail , based on value selected can loop array , populate value. let me 

var cardetail = [{    "name": "maruti",    "model": [{      "name": "swift",      "year": ["2005", "2006", "2008"]    }, {      "name": "alto",      "year": ["2009", "2010", "2011"]    }]  }, {    "name": "hundai",    "model": [{      "name": "i20",      "year": ["2011", "2012", "2013"]    }, {      "name": "i20",      "year": ["2013", "2014", "2015"]    }]  }];    var currentcumpany = null;  var currentmodel = null;  $(document).ready(function() {   $("#company").append("<option value=''>select company</option>");    (i = 0; < cardetail.length; i++) {      $("#company").append("<option value='" + cardetail[i].name + "'>" + cardetail[i].name + "</option>");    };      $("#company").change(function() {        (i = 0; < cardetail.length; i++) {        if (cardetail[i].name == $("#company").val()) {          currentcumpany = cardetail[i];        }      };       $("#model").html("");      (i = 0; < currentcumpany.model.length; i++) {        $("#model").append("<option value='" + currentcumpany.model[i].name + "'>" + currentcumpany.model[i].name + "</option>");      };    });     $("#company").change(function() {        (i = 0; < cardetail.length; i++) {        if (cardetail[i].name == $("#company").val()) {          currentcumpany = cardetail[i];        }      };       $("#model").html("");      (i = 0; < currentcumpany.model.length; i++) {        $("#model").append("<option value='" + currentcumpany.model[i].name + "'>" + currentcumpany.model[i].name + "</option>");      };    });           $("#model").change(function() {                     (i = 0; < currentcumpany.model.length; i++) {                if (currentcumpany.model[i].name == $("#model").val()) {          currentmodel = currentcumpany.model[i];        }              };                     $("#year").html("");             (i = 0; < currentmodel.year.length; i++) {        $("#year").append("<option value='" + currentmodel.year[i] + "'>" + currentmodel.year[i] + "</option>");      };    });            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <select id="company"></select>  <select id="model"></select>  <select id="year"></select>


Comments

Post a Comment

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

i'm trying link specific pdf page msoutlook'10 or msword'10, #page=... anchor particularly useful , works fine elsewhere. unfortunately when click [ctr-k] in outlook or winword, links re-formatted assuming unc path. pdf file located on shared drive. using "file:" prefix links open pdf in adobe reader (outside of browser), , "http:" open inside browser. issue seem need open in browser "file:" prefix in order anchor work. know anchors work inside browser. outlook uses windows/explorer default program (based on file extension) seems open in adobe reader neglecting anchor. is aware of solution, link specific page or bookmark of shared-pdf ms outlook and/or winword link? common references: mailermailer.com/...anchor-tags-html-emails campaignmonitor.com/...anchor-links-in-email-newsletters/ stackoverflow.com/...anchor-in-pdf-document
Read more

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

consider code: test = function() { } t = new test(); (var = 0; < 8; i++) { result = t instanceof test; } if change number of iterations 8 9 , loop take 100 times longer complete in latest version of firefox (41.0.1). tested on 2 different pcs , magic limit 8. here jsperf test used: http://jsperf.com/instanceof-8-times-vs-9-times does have idea why might happen? seems specific instanceof . not happen if else object, example check property. note: filed bugzilla bug this. jan de mooij mozilla team has posted details in bugzilla thread . here's simplistic interpretation of highly technical answers: in i < 8 case, firefox smart enough hoist result = t instanceof test; statement out of loop (according tests, doesn't seem omit altogether). in i < 9 case, apparently doesn't optimization . why? reason not clear, related fact 9 iterations threshold above function considered "hot" enough run through jit compiler. i < 8 cas...
Read more

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -

following this guide setup app on digital ocean droplet, not working. site not loading , it's throwing: "gateway time-out". the puma server works, since ps aux | grep puma prints: root 15878 0.0 0.4 376832 2168 ? sl 12:50 0:00 puma 2.13.4 (unix:///var/www/myapp/shared/tmp/sockets/myapp-puma.sock) [20150930164940] root 15881 0.0 0.7 903676 3692 ? sl 12:50 0:06 puma: cluster worker 0: 15878 [20150930164940] root 24654 0.0 0.1 11748 916 pts/2 s+ 18:00 0:00 grep --color=auto puma my nginx config: user root; worker_processes 1; events { worker_connections 1024; } http { upstream puma { server unix:///var/www/myapp/shared/tmp/sockets/myapp-puma.sock; } server { listen 80; server_name myapp.com; root /var/www/myapp/current/public; access_log /var/www/myapp/current/log/access.log; error_log /...
Read more