CODEWITHSUNDEEP
javascriptjquery
Mdjon26
Mdjon26

Reputation: 2255

Un-hide an element with Javascript

I have two options for select. I am trying to get it to where if the user selects "Case Manager" for option for select #1, then option for select #2 appears (it is currently hidden from the user).

Haml:

= form_tag app_configurations_path, :method=> 'put' do |f|
  -@all_configurations.each do |config|
      =hidden_field_tag "config_ids[]", config.id
      %label= t('workflow.duplicate_claim_manager')
      = select_tag('duplicate_claim[case_manager]', options_for_select(@case_managers_drop_down, config.configuration_value),name: "config[#{config.id}]", :include_blank => true)

      %label.hidden(for="duplicate_claim_manager_secondary")
      = hidden_field('duplicate_claim_manager_secondary', options_for_select(@case_managers_drop_down, config.configuration_value),name: "config[#{config.id}]", :include_blank => true)

The Haml appears to be correct, but I can't get the Javascript to correctly unhide option for select #2. Any ideas?

if ($("#duplicate_claim_case_manager :selected").text() == "Case Manager") {
   $("#duplicate_claim_manager_secondary).setAttribute(type => text)
}

Upvotes: 3

Views: 163

Answers (3)

Robert
Robert

Reputation: 371

I don't know if this was a simple transcription error, but you're missing a closing quote in the following block:

This:

if ($("#duplicate_claim_case_manager :selected").text() == "Case Manager") {
    $("#duplicate_claim_manager_secondary).setAttribute(type => text)
}

Should be this:

if ($("#duplicate_claim_case_manager :selected").text() == "Case Manager") {
    $("#duplicate_claim_manager_secondary").setAttribute(type => text); //Added closing quotation mark
}

To make an object visible, remove the display css attribute or set it to your desired mode. To make an object invisible set its css display attribute to none.

Standard JavaScript:

document.getElementById("duplicate_claim_manager_secondary").style.display = "none"; //Hide
document.getElementById("duplicate_claim_manager_secondary").style.display = "";     //Make Visible

jQuery:

$("#duplicate_claim_manager_secondary").toggle(); // Toggle visibility

//Or...

$("#duplicate_claim_manager_secondary").show(); // Make Visible
$("#duplicate_claim_manager_secondary").hide(); // Hide

Upvotes: 0

Velimir Tchatchevsky
Velimir Tchatchevsky

Reputation: 2815

This line is not right $("#duplicate_claim_manager_secondary).setAttribute(type => text)

setAttribute syntax:

element.setAttribute(name, value);

To change an attribute use: $("#duplicate_claim_manager_secondary).setAttribute("type", "text")

References:

But to actually hide or show an element, you are better off changing the css display property - with jQuery that is:

$("#duplicate_claim_manager_secondary").show()

and

$("#duplicate_claim_manager_secondary").hide();

Upvotes: 0

Steve Kinney
Steve Kinney

Reputation: 776

You might consider using jQuery's awesome .toggle() method. By itself, it will hide an element if it's currently being shown and show it if it's currently being hidden. This isn't exactly what you want.

But .toggle() also has a secret power. You can pass it a boolean as an argument. If that boolean is truthy, then it will show the element and if it's falsey, it will hide the element.

You could keep the input as a text field the entire time and just hide it (using the style="display: none;" attribute) by default or with JavaScript on page load.

Then you could use some code like this:

var isCaseManager = $("#duplicate_claim_case_manager :selected").text() === "Case Manager";

$("#duplicate_claim_manager_secondary").toggle(isCaseManager);

Upvotes: 1

Related Questions