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

[Tom Armitage]

When you say ‘modal’, I’m guessing you mean some kind of modal popover? And
you’re using a library for this modal?

You also haven’t mentioned what the actual JS you’re trying to execute is.

I’d put money on it not being an asset pipeline issue. Rather: I think your
JS is not being bound to anything, because the dropdown isn’t present until
the modal is triggered. The DOM is ready, you bind an onchange element to
the 0 dropdowns that are present, and then when your dropdown pops into the
DOM, there are no events bound to it.

So, you have two options: one is you bind the change event when the modal
comes into being - I don’t know how your library works, so can’t tell you
the syntax for this, but it’ll be a callback that fires when the modal is
loaded - then, the dropdown inside it will have events bound to it.

The other is to bind the change method to a larger context. Because of the
way event bubbling works, jQuery lets you do something like this:

$(body).on(‘change’, ‘select.my-select-inside-modal’, function() {
  $(“#thing-to-hide”).hide();
});

…and that’ll work even if the select element with that class isn’t present
when the binding is made - all that matters (in that example) is that *body* is
there to have that bound to. More here: http://api.jquery.com/on/ . The JS
developer console will be your friend debugging this - if in doubt, spit
out the number of objects it can see that match the query when you make the
binding, using console.log, and that’ll give you some clues.

As for your second question, that’s another big question, but suffice to
say: the first A in Ajax is *asynchronous*. You won’t be firing off any
database queries until the user requests it. So: when the change is made,
you fire off a request, the server does a query and returns some data -
probably as JSON - you parse the JSON to make some <option> objects and,
finally, append them into the select. Have a look at the documentation
around *responds_to* in Rails.

On Mon, Nov 21, 2016 at 3:41 PM, 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
>
>


-- 
Tom Armitage
http://infovore.org
07813 060578
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.lrug.org/pipermail/chat-lrug.org/attachments/20161121/6b7f12d4/attachment-0002.html>