Databases
StackOverflow2013
Postsdbo
POBinding multiple events of the same type?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBinding multiple events of the same type?
    primarykey
    data
    text
    <p>Firstly, is it possible? Been struggling with this one for hours; I think the reason my events aren't firing is because one event is unbinding/overwriting the other. I want to bind two <code>change</code> events to the same element. How can I do that?</p> <hr> <p>As per request, here's the function I'm struggling with:</p> <pre><code>(function($) { $.fn.cascade = function(name, trigger, url) { var cache = {}; var queue = {}; this.each(function() { var $input = $(this); var $trigger = $input.closest('tr').prev('tr').find(trigger); //$input.hide(); var addOptions = function($select, options) { $select.append('&lt;option value=""&gt;- Select -&lt;/option&gt;'); for(var i in options) { $select.append('&lt;option value="{0}"&gt;{1}&lt;/option&gt;'.format(options[i][0], options[i][1])); } $select.val($input.val()).trigger('change'); } var $select = $('&lt;select&gt;') // copy classes .attr('class', $input.attr('class')) // update hidden input .bind('change', function() { $input.val($(this).val()); }) // save data for chaining .data('name', name) .data('trigger', $trigger); $input.after($select); $trigger.bind('change', function() { var value = $(this).val(); $select.empty(); if(value == '' || value == null) { $select.trigger('change'); return; } // TODO: cache should be a jagged multi-dimensional array for nested triggers if(value in cache) { addOptions($select, cache[value]); } else if(value in queue) { $select.addClass('loading'); queue[value].push($select); } else { var getDict = {} getDict[name] = value; // TODO: use recursion to chain up more than one level of triggers if($(this).data('trigger')) { getDict[$(this).data('name')] = $(this).data('trigger').val(); } $select.addClass('loading'); queue[value] = [$select]; $.getJSON(url, getDict, function(options) { cache[value] = options; while(queue[value].length &gt; 0) { var $select = queue[value].pop(); $select.removeClass('loading'); addOptions($select, options); } }); } }).trigger('change'); }); return this; } })(jQuery); </code></pre> <p>The relevant chunk of HTML is even longer... but essentially it's a select box with a bunch of years, and then an <code>&lt;input&gt;</code> that gets (visibly) replaced with a <code>&lt;select&gt;</code> showing the vehicle makes for that year, and then another <code>&lt;input&gt;</code> that gets replaced with the models for that make/year.</p> <p>Actually, it seems to be running pretty well now except for on page load. The initial values are getting wiped.</p> <hr> <p>Solved the issue by pulling out that <code>$select.bind()</code> bit and making it live:</p> <pre><code>$('select.province').live('change', function() { $(this).siblings('input.province').val($(this).val()); }); $('select.make').live('change', function() { $(this).siblings('input.make').val($(this).val()); }); $('select.model').live('change', function() { $(this).siblings('input.model').val($(this).val()); }); </code></pre> <p>Sucks that it's hard-coded in there for my individual cases though. Ideally, I'd like to encapsulate all the logic in that function. So that I can just have</p> <pre><code>$('input.province').cascade('country', 'select.country', '/get-provinces.json'); $('input.make').cascade('year', 'select.year', '/get-makes.json'); $('input.model').cascade('make', 'select.make', '/get-models.json'); </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USmpen
    1. USmpen
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POBinding multiple events of the same type?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POBinding multiple events of the same type?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POBinding multiple events of the same type?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou should be able to have two `change` events on the same element (here's a test: http://jsfiddle.net/fdCRW/). Care to share your code?
      singulars
      1. POBinding multiple events of the same type?
      1. USGert Grenander
    2. COAgree with Gert G - putting your code here can help us better pinpoint your problem.
      singulars
      1. POBinding multiple events of the same type?
      1. USJasCav
    3. CO@Jason: It's about 70 lines worth, and includes some ajax calls you won't be able to run (testing on localhost). Nevertheless... I can post it.
      singulars
      1. POBinding multiple events of the same type?
      1. USmpen
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload