I have a PSD like this.
I want to when select the check box open like https://getbootstrap.com/docs/4.5/components/collapse/#multiple-targets .
I see this demo
Accordion is Important. I want to PSD to bootstrap 4.5
<div class="container-fluid">
<b>درخواست شغل</b>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="change_jobs">قصد انتخاب یا تغییر شغل دارم</label>
<input type="checkbox" id="change_jobs" name="change_jobs" data-toggle="collapse" data-target="#change_jobs" role="button" aria-expanded="false" aria-controls="change_jobs">
<div class="collapse" id="change_jobs">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="job_group">گروه شغلی</label>
<select id="job_group" name="job_group">
#foreach ($job_groups as $job_group)
<option value="{{ $job_group->id }}">{{ $job_group->name }}</option>
#endforeach
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="how_cooperate">نحوه همکاری</label>
<select id="how_cooperate" name="how_cooperate">
#foreach ($how_cooperates as $how_cooperate)
<option value="{{ $how_cooperate->id }}">{{ $how_cooperate->name }}</option>
#endforeach
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Could anyone please suggest where I am going wrong?
Thanks.
You should use .slide() function in jQuery.
By defining listener to see when checkbox is check, the div or whatever you want to toggle will hide/show.
$(document).ready(function(){
$('input:checkbox').change(
function(){
if ($(this).is(':checked')) {
$( "p" ).slideDown( "slow", function() {
// Animation complete.
});
}
else{
$( "p" ).slideUp( "slow", function() {
// Animation complete.
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p style="display:none;">Watch me come and go.</p>
<input type="checkbox">Toggle
Related
I'm using Asp.NetCore, C#,Ajax javascript and jquery .I created a Model Component in my application.
the model component is shown but the hidden element didn't show. when I choose my option in the Axe option it doesn't show any one of the GRaison / DRaison / PRaison / CRaison. I try it with "show" and doesn't work even I set the option: selected and doesn't work too. I don't have any idea to make this code work
here's the page :
#model Segment
<div class="modal fade" id="addSegment">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-uppercase text-white" style="height:5%;">
<h5 class="modal-title" id="addSegmentLabel">Create Segment</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close">
<span>x</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label asp-for="SName" class="control-label">Name : </label>
<div class="col-md-12">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input asp-for="SName" class="form-control" placeholder="Enter segment name" />
<span asp-validation-for="SName" class="text-danger"></span>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group ">
<label asp-for="SRang" class="control-label">Rang</label>
<input asp-for="SRang" class="form-control" />
<span asp-validation-for="SRang" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label asp-for="SType" class="control-label">Type</label>
<select asp-for="SType" class="form-control" id="SType">
<option selected disabled>Selectionnez type..</option>
<option id="Compte">Compte</option>
<option id="Contact">Contact</option>
</select>
<span asp-validation-for="SType" class="text-danger"></span>
</div>
</div>
<div class="col-md-12">
<div class="form-group ">
<label asp-for="Description" class="control-label"></label>
<textarea class="form-control" rows="3"></textarea>
<span asp-validation-for="Description" class="text-danger"></span>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label asp-for="Axe" class="control-label"></label>
<select asp-for="Axe" class="form-control" id="Axeya ij" asp-items="Html.GetEnumSelectList<Axe>()">
<option value="null" selected>Selectionnez Axe..</option>
</select>
<span asp-validation-for="Axe" class="text-danger"></span>
</div>
<div class="form-group" id="g" hidden>
<label asp-for="GRaison" class="control-label">Raison</label>
<select asp-for="GRaison" class="form-control">
<option> Personalité </option>
<option> Soucis</option>
<option> Intérêt</option>
<option>Valeurs</option>
</select>
<span asp-validation-for="GRaison" class="text-danger"></span>
</div>
<div class="form-group" id="d" hidden>
<label asp-for="DRaison" class="control-label">Raison</label>
<select asp-for="DRaison" class="form-control">
<option> Age </option>
<option> Sexe</option>
<option> Education</option>
<option> Revenu</option>
</select>
<span asp-validation-for="DRaison" class="text-danger"></span>
</div>
<div class="form-group" id="p" hidden>
<label asp-for="PRaison" class="control-label">Raison</label>
<select asp-for="PRaison" class="form-control">
<option> Personalité, </option>
<option> Soucis</option>
<option> Intérêt</option>
<option>Valeurs</option>
</select>
<span asp-validation-for="PRaison" class="text-danger"></span>
</div>
<div class="form-group" id="c" hidden>
<label asp-for="CRaison" class="control-label">Raison</label>
<select asp-for="CRaison" class="form-control">
<option> Pays</option>
<option> Ville</option>
<option> Language</option>
<option> Population</option>
</select>
<span asp-validation-for="CRaison" class="text-danger"></span>
</div>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#section Scripts{
<script src="~/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#SType").change('pageload', function () {
if ($(this).val() == "Contact") {
$(function () {
$("#Axe").change('pageload', function () {
if ($(this).val() == 0) {
$("#g").removeAttr('hidden');
$("#p,#c,#d").hide();
} else if ($(this).val() == 1) {
$("#p").removeAttr('hidden');
$("#g,#c,#d").hide();
} else if ($(this).val() == 2) {
$("#c").removeAttr('hidden');
$("#p,#g,#d").hide();
} else {
$("#d").removeAttr('hidden');
$("#p,#c,#g").hide();
}
});
});
} else {
$("#g,#p,#c,#d").hide();
}
});
});
</script>
}
when I choose my option in the Axe option it doesn't show any one of the GRaison / DRaison / PRaison / CRaison. I try it with "show" and doesn't work even I set the option: selected and doesn't work too.
Firstly, we can find that you set id="Axeya ij" for select in your code as below, which would cause you can not get that element using $("#Axe").
<select asp-for="Axe" class="form-control" id="Axeya ij" asp-items="Html.GetEnumSelectList<Axe>()">
Secondly, if you check the source code of your hidden element after you run .hide() method, you can find it would help add style="display: none;" inline style to the element(s), it does not add hidden attribute.
To fix the issue and achieve your requirement, you can try to modify the code like below.
$(function () {
$("#SType").change('pageload', function () {
if ($(this).val() == "Contact") {
$("select[name='Axe']").change('pageload',function () {
if ($(this).val() == 0) {
$("#g").removeAttr('hidden');
$("#g").show();
$("#p,#c,#d").hide();
} else if ($(this).val() == 1) {
$("#p").removeAttr('hidden');
$("#p").show();
$("#g,#c,#d").hide();
} else if ($(this).val() == 2) {
$("#c").removeAttr('hidden');
$("#c").show();
$("#p,#g,#d").hide();
} else {
$("#d").removeAttr('hidden');
$("#d").show();
$("#p,#c,#g").hide();
}
});
} else {
$("#g,#p,#c,#d").hide();
}
});
});
I am having a popup and a foreach on my view , it has a dropdown too, on a button click I need to get the selected value of the drop-down,
Each time I click it returns the first drop down value
I couldn't use $(this).val()
Is there any way.
This is my code
$( ".ecg_followup_submit" ).click(function(e) {
alert($( ".reviewoutcome_change option:selected" ).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<label for="exampleInputPassword1">Review outcome:</label>
</div>
<div class="col-md-6">
<select class="form-control reviewoutcome_change" name="review_outcome" id="declined_reason">
<option value="select">Select</option>
<option value="normal">Normal</option>
<option value="minor" >Minor</option>
</select>
</div>
</div>
</div>
</div>
<div class="row" style="height:10px;"></div>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
</div>
</div>
</div>
<div class="row">
<div class="col-md-9"></div>
</div>
<div class="modal-footer" style = "margin-top:15px;">
<div class="row">
<div class="col-md-6">
<input type="submit" class="btn btn-primary ecg_followup_submit" name="Submit" style = "width:50%; height:35px; margin-right:150px;" />
</div>
</div>
</div>
I have removed the unwanted codes
Thank you
To get the value of 'selected' option you do not need to use :selected. you can get the selected value like any other input. $('your selector').val()
However, if you do not change your selection, the first option will be selected by default.
Here is an example inspired from your code.
jQuery(document).ready(function($){
$('.btn').click(function(e){
e.preventDefault();
console.log($('.reviewoutcome_change').val());
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control reviewoutcome_change" name="review_outcome" id="declined_reason">
<option value="select">Select</option>
<option value="normal">Normal</option>
<option value="minor">Minor</option>
</select>
<button class="btn">show selected</button>
just change
$( ".ecg_followup_submit" ).click(function(e) {
alert($( ".reviewoutcome_change option:selected" ).val());
});
to this
$( ".ecg_followup_submit" ).click(function(e) {
alert($( '.reviewoutcome_change' ).val());
});
Find one common ancestor. I assume that you have multiple rows then?
$(".ecg_followup_submit").click(function (e) {
const row = $(this).closest(".row")
const selectedOption = row.find(".reviewoutcome_change");
alert(selectedOption.val());
});
I have multiple div with class rows and in each row there is a dropdown on change of dropdown i want to hide the anchor tag with class "add_marks" which is inside the same row.
I'm using the following code to hide it:
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row');
var elem = $(nearest_row).closest(".add_marks");
elem.hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Class</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="col-xs-1 col-sm-7 col-md-1"><i class="material-icons">add</i>Add Marks</div>
</div>
</div>
You have to get the next div and find the a link, then hide it.
var nearest_row = $(this).closest('div.row');
gets you the div.row.clearfix.attr_fields but the link is present in the next div, so doing next gets you the next div element, then you find the 'a' element.
You can also do next('div') instead of getting the next element to find the next div.
jQuery(document).on('change', '.subject', function(e) {
var nearest_row = $(this).closest('div.row').next().find('.add_marks').hide();
//console.log(nearest_row);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="row clearfix attr_fields">
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Class</h2>
<div class="form-line focused">
<input type="text" name="name" class="form-control" required="">
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h2 class="card-inside-title">Subject</h2>
<select name="subject_name" class="form-control subject" required="" aria-invalid="false">
<option value="">Select</option>
<option value="1">Maths</option>
<option value="2">Science</option>
</select>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="col-xs-1 col-sm-7 col-md-1"><i class="material-icons">add</i>Add Marks</div>
</div>
</div>
Here is Working code example run it with js (shortcut: ctrl + enter)
...want to hide the anchor tag with class "add_marks" which is inside the same row.
So I have moved that button inside row.
Using .col* as direct child of .row is proper way of using bootstrap grid.
Used the following jQuery considering your requirement.
jQuery(document).on('change', '.subject', function (e) {
$(this)
.parents('.row')
.find('.add_marks')
.hide();
});
I am writing a code which dynamically creates rows.
The problem is when I click on button it adds row after the already present row. but Now div with id dynamic contains two rows and so if I click now button it will add two rows. If I use ('#dynamic').html() then it grabs columns but if it is done so it violates the indentation because it will not add the div with class row.
Please any body can tell me the solution to problem?
$(function() {
$("#button1").click(function() {
$("#main-row").after($('#dynamic').html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="above">
<div class="container">
<div class="row">
<div class="col-sm-1">No.</div>
<div class="col-sm-2">Name of Item</div>
<div class="col-sm-3">Quanity</div>
<div class="col-sm-3">Price</div>
<div class="col-sm-1"><span class="btn"></span></div>
</div>
</div>
<div class="container" id="dynamic">
<div class="row padding-3 " id="main-row">
<div class="col-sm-1 ">1</div>
<div class="col-sm-2 ">
<select class="container-fluid">
<option value="1">Computer</option>
<option value="2">Mobile</option>
<option value="3">LCD</option>
<option value="4">Keyboard</option>
<option value="5">Mouse</option>
</select>
</div>
<div class="col-sm-3 "><input class="container-fluid" type="number" name="name" value="" /></div>
<div class="col-sm-3 "><input type="text" name="text" value="" /></div>
<div class="col-sm-1 ">-</div>
</div>
</div>
<button class="btn btn-primary" id="button1">Add Row</button>
</section>
Try:
$(function() {
$("#button1").click(function() {
$('#dynamic').append($("#main-row").clone().removeAttr('id'));
});
});
So im trying to build the front end of a form builder however i've run into a problem when trying to clone collapsible elements. Im an absolute beginner at jquery so sorry for the dirty code.
When an element is cloned and it is nested under itself with a modified sortable jquery plugin, any one of the bottom levels collapsible's will open the collapsible of the top level parent (but not any of the other nested elements).
My jquery is:
var count = 1;
$("#displayUpload").click(function() {
var clonecount = 'Uploadpanel' + count;
var cloneobject = $("#toggleUpload").clone(true).appendTo(".sortable").show();
$("#Uploadpanel", cloneobject).attr('id', clonecount);
$(cloneobject, this.id).on("click", (".edit", ".panel-title"), function() {
$("#" + clonecount, this.id).collapse('toggle');
});
$(cloneobject).on("click", ".remove", function() {
$(cloneobject).remove();
});
count = count + 1;
});
Html:
<li id="toggleUpload" data-role="main" class="js-form-element" style="display: none">
<div>
<div class="panel panel-default" data-role="collapsible" id="panel3">
<div class="panel-heading">
<h4 class="panel-title" data-target="#Uploadpanel"
href="#Uploadpanel">
<a data-target="#Uploadpanel"
href="#Uploadpanel" class="edit">
File upload
</a>
<span class="btn-group pull-right">
<a data-target="#Uploadpanel"
href="#Uploadpanel" class="collapsed">Edit</a>
<span class="padding-line">|</span>
<a class="remove" href="#">Delete</a>
</span>
</h4>
</div>
<div id="Uploadpanel" class="panel-collapse collapse">
<div class="panel-body">
<div class="margin-bottom-20">
<p class="font-italic">Label:</p>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Label">
</div>
<div class="margin-bottom-20">
<p class="font-italic">Placeholder text:</p>
<input type="text" class="form-control" placeholder="Placeholder message">
</div>
<div class="margin-bottom-5">
<div class="checkbox">
<label>
<input id="required" type="checkbox"> Required
</label>
</div>
</div>
<div class="margin-bottom-20">
<p class="font-italic">Validation message:</p>
<input type="text" class="form-control" id="validation" placeholder="Validation message">
</div>
<div>
<div class="row">
<div class="col-sm-6">
<p class="font-italic">Form input size:</p>
<div class="form-group">
<select name="form_select">
<option value="0">100% (1 in a row)</option>
<option value="0">33% (3 in a row)</option>
<option value="0">50% (2 in a row)</option>
</select>
</div>
</div>
<div class="col-sm-6">
<p class="font-italic">Form position:</p>
<div class="form-group">
<select name="form_select">
<option value="0">Left</option>
<option value="0">Middle</option>
<option value="0">Right</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
Any help would be great,
Thanks
There can be some issues using clone on objects that already has event handlers. I had this issue for a while, and I just resolved it by creating a function that generates a new jQuery object, instead of cloning an existing one.