We Keep Coding

Show a hidden div using jQuery show() not working [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 1 year ago.
I have a hidden div called recipeDetailsDiv inside a form as below
$("#recipes").change(function() {
var selectedVal = $("#recipes").val();
if (selectedVal != "") {
$("#recipeDetailsDiv").show();
}
});
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<form>
<div class="form-group">
<div class="row">
<div class="col-sm">
<label for="recipes">Recipes</label>
<select class="form-control" id="recipes" name="recipes" required>
<option></option>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
</div>
<div class="card" style="margin-top: 10px;" id="recipeDetailsDiv" hidden>
<ul class="list-group list-group-flush">
<div id="populateRecipeDetails">Recipe Details</div>
</ul>
</div>
</form>
I am trying to show the hidden div when someone changed the drop down box
I included jQuery CDN too. But it is not showing on change of drop down box. This could be a simple problem. But I cannot figure out how to solve. Can someone help?
Edit 1
I have the following codes included in the following order
<?php include "commonFiles/assignModal.php"; ?>
<?php include "../commonFilesForAll/jsLibraries.php"; ?>
jsLibraries.php contain CDN.
assignModal.php is the same HTML codes I showed above

Your code is working fine. So as #Phil's comment, you should show us the side effect rendering code. Because it may be this problem: Event handler not working on dynamic content
Besides, I would suggest enhancement your logic code.
There are 2 ways to resolve:
Using toggle to handle the case empty select.
If the selected item is diff empty then use show, else then use hide
$("#recipes").change(function() {
const isToggle = $("#recipes").val() !== "";
$("#recipeDetailsDiv").toggle(isToggle);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
<div class="row">
<div class="col-sm">
<label for="recipes">Recipes</label>
<select class="form-control" id="recipes" name="recipes" required>
<option></option>
<option >1</option>
<option>2</option>
</select>
</div>
</div>
</div>
<div class="card" style="margin-top: 10px;" id="recipeDetailsDiv" hidden>
<ul class="list-group list-group-flush">
<div id="populateRecipeDetails">Recipe Details</div>
</ul>
</div>
</form>

If recipes are optional and empty option are selected, you only need show div when an option are selected.
$("#recipes").change(function() {
$("#recipeDetailsDiv").show();
});
The show problem, you can refactor it for class. Creating a class which hides your div and use jQuery.removeClass().

Change <select> id on click in jQuery

There is a select option in search form and it has an id (e.g. main_cat).
Now I want that when I click on a link('a'), the id of select should be changed with second_cat.
Note Give me solution with nesting div classes on jsFiddle, because main_cat id also used in another section on same page
Here is my sample code:
<div class="widget widget_vehicle_search">
<div class="search-form-widget">
<form id="wp-advanced-search" name="wp-advanced-search" class="wp-advanced-search" method="" action="">
<div id="wpas-main_cat" class="wpas-main_cat wpas-generic-field wpas-field">
<div class="label-container">
<label for="main_cat">Select A Manufacturer:<i class="icon-help-circled-1 tooltip"></i></label>
</div>
<select id="main_cat" name="main_cat">
<option value="any">Any Manufacturer</option>
</select>
</div>
</form>
</div>
</div>
When Click on a link main_cat id changed with second_cat
Hope you understand my question

I'm not sure if that what you mean, but you could attach click event to anchor then on click change the id attribute of the select by the new one :
$('a').on('click', function(){
$('#main_cat').prop('id', 'second_cat');
})
Hope this helps.
$('a').on('click', function(e){
e.preventDefault();
console.log('Before : '+$('select').prop('id'));
$('#main_cat').prop('id', 'second_cat');
console.log('After : '+$('select').prop('id'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="widget widget_vehicle_search">
<div class="search-form-widget">
<form id="wp-advanced-search" name="wp-advanced-search" class="wp-advanced-search" method="" action="">
<div id="wpas-main_cat" class="wpas-main_cat wpas-generic-field wpas-field">
<div class="label-container">
<label for="main_cat">Select A Manufacturer:<i class="icon-help-circled-1 tooltip"></i></label>
</div>
<select id="main_cat" name="main_cat">
<option value="any">Any Manufacturer</option>
</select>
</div>
</form>
</div>
</div>
<br>
<a href='#'>change select id</select>

Onclick set value to input

I want to change the value form input onclick. I've tried it but the input value don't change. Can't find the error. For example when I click on the choice-label the input should get the value 5.
$('.training-niveau .choice-label').click(function() {
$('#train-niveau').val(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field training-niveau-icon training-niveau">
<input id="train-niveau" class="train-niveau" name="train-niveau" value="1" type="radio" aria-required="true" autocomplete="off">
<li class="choice-line thirst-line">
<div class="choice-wrapper">
<div class="choice-label">4</div>
<div class="choice-line"></div>
<div class="choice-container">
<div class="choice-inset"></div>
<div class="choice-bg"></div>
<div class="choice-bd"></div>
<div class="choice-overlay"></div>
</div>
</div>
</li>
</div>

$('#train-niveau').val(this);
is setting the value of the input to the jquery object of the label.
use $('#train-niveau').val($(this).text());

Just calling this only pulls in the document object.
$('.training-niveau').on('click', '.choice-label', function() {
console.log($('#train-niveau').val()); //before
$('#train-niveau').val($(this).text());
console.log($('#train-niveau').val()); //after
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field training-niveau-icon training-niveau">
<input id="train-niveau" class="train-niveau" name="train-niveau" value="1" type="radio" aria-required="true" autocomplete="off">
<li class="choice-line thirst-line">
<div class="choice-wrapper">
<div class="choice-label">4</div>
<div class="choice-line"></div>
<div class="choice-container">
<div class="choice-inset"></div>
<div class="choice-bg"></div>
<div class="choice-bd"></div>
<div class="choice-overlay"></div>
</div>
</div>
</li>
</div>

this doesn't contain the value, but rather a whole set of functions and values (to verify, do console.log(this); If you want the value of this, use this instead:
$('#train-niveau').val(this.val()); < Which only applies if a value is set to your choice label.

Inside the click function this is the normal javascript DOM element, it is not a jQuery object. If you want to use .val() you need to convert this to a javascript variable
$('.training-niveau .choice-label').click(function(){
var $this = $(this);
$('#train-niveau').val($this.val());
});

Bootstrap Combobox Update

The Background
I have the following HTML document:
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
<!-- Plugins CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-combobox.css">
</head>
<body class="one-page fixed-header">
<div class="page-box">
<div class="page-box-content">
<h3>Form 1</h3>
<div class="content">
<div class="combobox-container" id="employee-name-box">
<label for="addScheduleLoc">Location: <span class="required">*</span></label>
<select class="form-control combobox location" name="addScheduleLoc" id="addScheduleLoc" required>
<option value selected="selected">---Select Location---</option>
</select>
</div>
<div class="combobox-container" id="employee-name-box">
<label for="addScheduleTier">Tier: <span class="required">*</span></label>
<select class="form-control combobox tier" name="addScheduleTier" id="addScheduleTier" required>
<option value selected="selected">---Select Tier---</option>
</select>
</div>
</div>
<hr>
<h3>Form 2</h3>
<div id="changeScheduleModalBody" class="content">
<div class="combobox-container" id="employee-name-box">
<label for="chScheduleLoc">Location: <span class="required">*</span></label>
<select class="form-control combobox location" name="chScheduleLoc" id="chScheduleLoc" required>
<option value selected="selected">---Select Location---</option>
</select>
</div>
<div class="combobox-container" id="employee-name-box">
<label for="chScheduleTier">Tier: <span class="required">*</span></label>
<select class="form-control combobox tier" name="chScheduleTier" id="chScheduleTier" required>
<option value selected="selected">---Select Tier---</option>
</select>
</div>
</div>
</div>
<!-- .page-box-content -->
</div>
<!-- .page-box -->
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-combobox.js"></script>
<script src="js/testJavascript.js"></script>
</body>
</html>
There is an AJAX call to a server which retrieves some data after the page has loaded and puts the data into a variable and is used to populate the comboboxes. There are multiple comboboxes that should contain the same information (eg. All comboboxes with class "location" should contain the same list of locations). I have simulated this in the following javascript file. Please note that the initialization of the comboboxes must happen first because I may need to update the contents of the associated <select> element after the combobox is initialized.
//file: js/testJavascript.js
var options = {
locations: "<option id='1'>London</option><option id='2'>Los Angeles</option><option id='3'>Sydney</option>",
tiers: "<option id='1'>Upper</option><option id='2'>Middle</option><option id='3'>Lower</option>"
}
$(document).ready(function(){
$('.combobox').combobox({
bsVersion: '3'
}); //This statement cannot be moved.
$('select.location').append(options.locations);
$('select.tier').append(options.tiers);
});
The Problem
The problem that I'm running into is after I append the options to the <select> elements, the comboboxes aren't updated to show the most recent information. I realize that if I call $('.combobox').combobox({...}); after options are added, the combobox will be correct. But I may need to update the information in the comboboxes after the comboboxes are initialized the first time.
The Question
How can I get the comboboxes to update after I add options to the corresponding <select> tag and after they have already been initialized?

After some more research and fiddling around, I found that the following code works to refresh the combobox. (using the issue shown here)
$('select.location').each(function(){ //need to run in .each to refresh all the elements
$(this).data('combobox').refresh();
});
$('select.tier').each(function(){
$(this).data('combobox').refresh();
});

Try to refresh your combobox using the following code :
$('select.location', 'select.tier').data('combobox','refresh');
Hope this helps.

Angular JS: ngShow isn't binding my change

I've got an Angular module here within a larger rails project. I'm new to Angular and wish to avoid jQuery if I can (but do use it throughout the rails project and can use it if necessary). What I'm trying to do is hide a checkbox if the End Time is "", and show a checkbox if there's a value in the End Time. Unfortunately I have been unable to hide it if End Time is "". See:
You can see my HTML code below:
<div class="control-group span8">
<h4 class="pull-left"><strong>Active Hours (UTC):</strong></h4>
</div>
<div class="control-group span1">
<label class="control-label label-unstyled font-size-14" for="inputStartTime">Start Time</label>
<div class="controls">
<select ng-model="geoRegion.start_time" id="inputStartTime" class="input-small" ng-options="thisHour.value as thisHour.name for thisHour in hours" value="{{geoRegion.start_time}}"></select>
</div>
</div>
<div class="control-group span1">
<label class="control-label label-unstyled font-size-14" for="inputEndTime">End Time</label>
<div class="controls">
<select ng-model="geoRegion.end_time" id="inputEndTime" class="input-small" ng-options="thisHour.value as thisHour.name for thisHour in hours" value="{{geoRegion.end_time}}"></select>
</div>
</div>
<div class="control-group span8">
<div ng-show="clearGeoSegment(geoRegion.end_time)"><label class="inline checkbox label-unstyled font-size-14"><input type="checkbox" id="clearGeoSegment" ng-model="geoRegion.clear_segment">Clear Geo Segment at end of active time period.</label></div>
</div>
<div class="control-group span8">
<p id="broadcast-notice" class="pull-left font-size-14"><strong>Note:</strong> If active hours is blank, the Geo Segment is always active.</p>
</div>
My controller code (yes, I used jQuery. But please suggest otherwise!):
$scope.clearGeoSegment = (endTime) ->
if endTime is ''
$('#clearGeoSegment').hide()
else
$('#clearGeoSegment').show()
Any help would be greatly appreciated!

So you don't need to do the hide/show with jquery. You need to just bind to an expression that will be truthy when the checkbox should be visible. In this case it should be as simple as:
<div ng-show="geoRegion.end_time">
And you can delete your clearGeoSegment function entirely.