I have created a dropdown as below:
<div class="col s4">
<label class="control-label flabels">Name</label>
<div class="asteRisk">*</div>
<div class="row d-flex align-items-center">
<div id="FLevelRow" class="row">
<div class="select-wrapper">
<div class="form-group">
<div class="multipleSelection" id="TaskName">
<select required class="dynamic_Time form-control" id="TaskSKAdd">
<option value="">--Select--</option>
</select>
<div class="overSelect"></div>
</div>
</div>
</div>
</div>
</div>
</div>
and I have written below ajax success method in Js file to append ajax response to this dropdown options.
success: function (response) {
console.log("Lookupresponse", response)
for (var application of response) {
var value = application.NAME.toLowerCase();
$('#TaskName .dynamic_Time')
.append(`<option value="${application.id}" name="${value}">${value} </option>`)
}
},
But while running this code, by default some extra html elements and a select option appears before the above appended options and hence it hides appended options with ajax data from the dropdown list as shown in the below image. Because of that, original content are not visible while clicking on the dropdown. There is no error in the console also.
Related
My Javascript code is as follows
`
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', '.modal_view_user_btn', function() {
$('#modal_view_user').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#vid_user_name').val(data[0]);
$('#vid_user_email').val(data[1]);
$('#vid_user_designation').val(data[2]);
$('#vid_user_mobile').val(data[3]);
$('#vid_user_landline').val(data[4]);
$('#vid_user_role_id').val(data[5]);
$('#vid_user_login_status').val(data[6]);
$('#vid_user_picture').val(data[7]);
0
});
});
</script>
`
I used above code to fetch data in modal. placed one input as follows:
`
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="vid_user_designation"
class="col-sm-8 col-form-label text-primary">Designation</label>
<div>
<input class="form-control" type="text" name="user_designation"
id="vid_user_designation" style="border-style: hidden; background-color: white;"
readonly>
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="vid_user_mobile"
class="col-sm-8 col-form-label text-primary">Mobile</label>
<div>
<input class="form-control" type="tel" name="user_mobile" id="vid_user_mobile"
style="border-style: hidden; background-color: white;" readonly>
</div>
</div>
</div>
</div>
`
it workds properly When the table is shown as full screen[![enter image description here]the results are ok for instance as per below screen
(https://i.stack.imgur.com/j5me8.png)](https://i.stack.imgur.com/j5me8.png)
When i change the view to responsive style the data is not shown , infact headings of table started shown.
Need guidance to resolve this issue.
I am trying to fetch the data in my modal from table through a java script. When the screen for table is open as per picture it works fine, but when i change the view of table i.e to responsive view, it doesnot show information
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().
I have a search feature built into a page that hits an API to get a list of items if a user chooses to search instead of manually enter (in an attempt to get some clean data). I have the first column of said table set to call a JavaScript function onclick. That function looks similar to this:
function loadDataFromTable(fname, lname, mname, stn, grade, school) {
$('#StudentFirstName').val(fname);
$('#StudentLastName').val(lname);
if (mname !== "undefined") {
$('#StudentMiddleName').val(mname);
}
else {
$('#StudentMiddleName').val('');
}
$('#StudentNumber').val(stn);
$('#Grade').val(grade);
$('#School').val(school);
return false;
}
The associated HTML elements are all ASP.NET Core Razor View input elements. They look like this:
<div class="form-group">
<label class="col-md-3 control-label">Last Name</label>
<div class="col-md-9">
<input type="text" asp-for="StudentLastName" class="form-control" />
<span asp-validation-for="StudentLastName" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">STN</label>
<div class="col-md-9">
<input type="text" asp-for="StudentNumber" class="form-control" />
<span asp-validation-for="StudentNumber" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Grade</label>
<div class="col-md-9">
<input type="text" asp-for="Grade" class="form-control" />
<span asp-validation-for="Grade" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="School" class="col-md-3 control-label"></label>
<div class="col-md-9">
<select asp-for="School" asp-items="ViewBag.SchoolList" class="form-control"></select>
<span asp-validation-for="School" class="text-danger"></span>
</div>
</div>
Now, if a user clicks on one of the links from the table, all of the values are properly passed into the function, and all of the values for First Name, Last Name, Middle Name, and STN properly update on the view. Grade and School do not update on the View, but their value attribute does update. When I submit the form after the data fills, the correct values are passed to my controller.
What I can't figure out is why the Grade and School values are not populating on the view. The only thing that stands out as different for these two are within the model they are nullable integers, whereas other fields are strings.
I have tried a mixture of .attr('value', grade), .text(grade), and .val(grade), and none of them are working. I can verify that the proper elements are being selected because if I output $('#Grade') I get the input object.
I have search functionality on one of the field once user finished search and selected the value from the data grid i am populating value into field, So I am printing value in console correctly console.log($scope.challengesDTO.chlgOwner) but its not binding it to view model challengesDTO.chlgOwner
main.html
<div class="row">
<div class="form-group col-md-12 fieldHeight">
<label for="chlgOwner" class="col-md-4">Challenge Initiated on behalf of:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="chlgOwner"
ng-model="challengesDTO.chlgOwner" ng-click="openChallengerSearch()"
name="chlgOwner">
</div>
</div>
searchCtrl.js
$scope.selectedChallenger = function(workerObj) {
$scope.challengesDTO.chlgOwner = workerObj.fullName;
$scope.challengesDTO.chlgKey = workerObj.workerKey;
console.log($scope.challengesDTO.chlgOwner);
$scope.viewChallengeWin.close();
};
I have the following which works perfectly in a browser but the onchange element fails to fire on Android, and maybe other, devices. I have searched for a solution to this but my understanding of javascript is not so good, as you may be about to tell me.
HTML:
<div class=" col-md-12 col-sm-8 col-xs-8 search-panel search">
<div class=" col-md-3 col-sm-8 col-xs-8 search-panel">
<form method="POST" action="/">
<select class="form-control home_cat_id" name="home_cat_id">
<option value='0'>Select Sales or Rentals</option>
<option value='12'>Sales</option>
<option value='1'>Rentals</option>
<option value='4'>Rentals2</option>
</select>
</form>
</div>
</div>
JAVASCRIPT:
$(document).ready( function(){
//Reset dropdown on page load
$('.home_cat_id').val(0);
// Check if value has changed //
$(".home_cat_id").on("change", function(){
// Pass the form values to the homepage_search.html file
$.post('/includes/homepage_search.html', $("select[name='home_cat_id']").serialize(), function(ret){
// Detect if values have been passed back
if(ret!=""){
$('.search').html(ret);
} else {
alert('ERROR');
}
});
// Stop the page refreshing
return false;
});
});
Thanks in advance for any advice given
Give the dropdown an id and use that id to select the element in you jQuery. Also, if you cache the select element, you get a small performance boost.
HTML
<div class=" col-md-12 col-sm-8 col-xs-8 search-panel search"></div>
<div class=" col-md-3 col-sm-8 col-xs-8 search-panel"></div>
<form method="POST" action="/">
<select id="home_cat_id" class="form-control home_cat_id" name="home_cat_id">
<option value='0'>Select Sales or Rentals</option>
<option value='12'>Sales</option>
<option value='1'>Rentals</option>
<option value='4'>Rentals2</option>
</select>
</form>
Javascript
$(document).ready( function(){
// Cache the select element for performance
$home_cat_id = $('#home_cat_id');
//Reset dropdown on page load
$home_cat_id.val(0);
// Check if value has changed //
$home_cat_id.on("change", function(){
// Pass the form values to the homepage_search.html file
$.post(
'/includes/homepage_search.html',
$home_cat_id.serialize(),
function(ret){
// Detect if values have been passed back
if(ret!=""){
$('.search').html(ret);
} else {
alert('ERROR');
}
});
// Stop the page refreshing
return false;
});
});