Databases
StackOverflow2013
Postsdbo
POjQuery plug-in and variable scope
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery plug-in and variable scope
    text
    copied!<p>I've developed a simple plug-in that allows you to create a multi-column dropdown for a text box. You pass in a web service URL, and an array of jQuery selectors that corresponds to each element you would like populated from each column in the result set.</p> <p>$('#txtProduct').multiColumnDropDown({ 'url': '/api/GetProductAndCategoryByRegion', 'targets' : ['#txtProduct', "#txtCategory"] });</p> <p>This will build a multi-column dropdown, and when the user clicks a record in it, #txtProduct and #txtCategory get populated.</p> <p>Everything works as it should, but I want to be able to apply multiple multiColumnDropDowns to my page. I'm going to run into issues in that I don't know how to reference the dynamically-generated dropdown markup specific to an instance of the plugin.</p> <p>In my plug-in, I generate a wrapper for the dropdown and position it where needed. If I want to update the wrapper and its dropdown by re-querying, how do I ensure I only update the one I want, and not all the wrappers I have generated?</p> <p>Complete code below:</p> <pre><code>(function ($) { var methods = { init: function (options) { return this.each(function () { var settings = $.extend({ 'targets': [this] }, options); var targets = settings["targets"]; var yOffset = $(this).position().top + $(this).height() + 'px'; var xOffset = $(this).position().left + 'px'; var wrapper = $('&lt;div class="dropdown-wrapper"&gt;&lt;/div&gt;') .css('top', yOffset) .css('left', xOffset) .hide(); $(document).click(function () { wrapper.hide(); }) if (settings["url"] != undefined &amp;&amp; settings["url"] != '') { methods.populateDropDown(settings["url"], targets, wrapper); } $(this).click(function (e) { e.stopPropagation(); wrapper.show(); }); }); }, update: function (options) { return this.each(function () { var settings = $.extend({ 'targets': [this] }, options); var targets = settings["targets"]; //How do I reference the correct wrapper? //The following will reference all wrappers on the page :\ var wrapper = $('div.dropdown-wrapper') //Repopulate the wrapper and dropdown code goes here.... }) }, populateDropDown: function (url, targets, wrapper) { $.ajax({ url: url, type: 'get', dataType: 'json' }) .done(function (data) { var $table = $('&lt;table class="multi-column-table"&gt;'); data.forEach(function (item) { var $tr = $('&lt;tr&gt;').appendTo($table); var idx = 0; $.each(item, function (k, v) { var $td = $('&lt;td&gt;'); if (targets[idx] != undefined) $td.attr('data-target', targets[idx]); $td.text(v); $td.appendTo($tr); idx++; }); }); $table.on('click', 'tr', function () { $.each(this.children, function (i, td) { if ($(td).attr('data-target')) $($(td).attr('data-target')).val($(td).text()); }); }); $(wrapper).append($table).prependTo('body'); }) .fail(function (jqXHR, textStatus, errorThrown) { alert('Error: ' + errorThrown); }); } }; $.fn.multiColumnDropDown = function (method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist on jQuery.multiColumnDropDown'); } }; </code></pre> <p>})(jQuery);</p> <p>And in case any one is interested in the CSS:</p> <pre><code>.dropdown-wrapper { border:1px solid #000; border-bottom-right-radius:3px; border-bottom-left-radius:3px; z-index:100; background-color:#fff; position:absolute; } .dropdown-wrapper tr:hover { background-color:#0081C2; color:#fff; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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