[LRUG] Stumped: Dynamically showing and hiding a dropdown based on a previous dropdowns selection?

[Andrew McDonough]

Hi Jesse,

The issue could be down to a number of issues:

1. The file with the event handle isn't being loaded
Simple debug steps: put a console.log("HERE!") or even an
alert("something"); at the top of the file, and check if you see "HERE!" in
the JavaScript console or an alert box.  If you don't see it, you probably
haven't configured your asset loading correctly.

2. The file is loaded, but you forgot to wrap your binding JavaScript
function in a document ready function, so event binding happens before the
elements are available.
Solution: Make sure it looks something like this:

$(function() {
  $(document).ready(function() {
    // Your code here
  });
});

3. The event binding code is executed after the document is ready, but
you're loading a modal, which loads the elements after the event binding
code is executed
Easy solution: Load the form on a new page instead of in a modal
More difficult solution: read about delegated events, and use an element
that contains the modal to bind the event
http://api.jquery.com/on/

On the population of the dropdown, if there's not a lot of data, you may
find it easier to just load the data structures you need to render the
dropdowns as part of the initial request.  If you do want to go down the
AJAX route, you could let your controller respond to JSON, and send back a
serialised collection, which you use in a callback to redraw the dropdown
.  If you want to hit two different endpoints, e.g. users#index or
products#index, then just change the path you request in your jQuery AJAX
call, e.g. from "/users" to "/products".  If you need to filter these
lists, you could do so by sending parameters, or by using a nested route.

However, before doing any of this, really consider if you can simplify the
whole thing.  Would it really be that bad if there was a page to choose the
first thing, which then took you to a second page to choose the next thing,
etc?

Andrew


On Mon, 21 Nov 2016 at 16:23 Jesse Waites <jesse.waites at gmail.com> wrote:

> Hi all,
>
> I wanted to run this by you. I have a project wherein I have a dropdown
> inside of a modal. Lets say it says "Users" and "Products". (It is more
> complex and more than 2 options but this example gets the point across)
>
> If the user selects "Users", I then need another dropdown to appear below
> it that contains all of the users, so one can be selected. If the user
> selects "Products", that dropdown is populated with all of the products.
>
> In getting this started, I have the secondary dropdown in a div, lets call
> it <div id="secondary">
>
> If I open the console, I can hide and show it with $('#secondary).hide();
> or $('#secondary').show();
> but I can't seem to get it working inline, in a script tag, on the page.
> At this point I'm not sure if I need to chase down an asset pipeline issue,
> or perhaps it isn't working due to the fact it is inside a modal and not
> immediately rendered. I'm kind of stumped and this is the first time I've
> done something like this.
>
> After I defeat this issue, I'll need to populate that dropdown, and I
> guess I will use AJAX for that? Am open to any advice or input there as
> well. I'll basically call Users.all or Products.all, but I don't want to
> hit the database for that until the initial selection takes place... the
> user might not select ANYTHING from that first dropdown and so would be
> wasteful to make DB calls at that point.
>
> Thank you very much for your time and advice,
>
> --
> Jesse Waites
> Web Developer
> JesseWaites.com
> _______________________________________________
> Chat mailing list
> Chat at lists.lrug.org
> Archives: http://lists.lrug.org/pipermail/chat-lrug.org
> Manage your subscription: http://lists.lrug.org/options.cgi/chat-lrug.org
> List info: http://lists.lrug.org/listinfo.cgi/chat-lrug.org
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.lrug.org/pipermail/chat-lrug.org/attachments/20161121/78b088b6/attachment-0002.html>