I have 3 div's in a View. Every div has unique single_value. so when i click on any of that it should alert that data value. For that i used the following script
$(document).on('click','.single_school',function(){
var school = $( ".single_school" ).attr('data-value');
alert(school)
});
But the problem is i'm only getting the first value whatever div I clicked on. How do i print only the specific div I clicked on.
Here is the View:
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="1">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="school_info">
<p class="school_name">ABC</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="2">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="school_info">
<p class="school_name">XYZ</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="3">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="school_info">
<p class="school_name">PQR</p>
</div>
</div>
</div>
$(document).on('click','.single_school',function(){
var school = $(this).attr('data-value');
alert(school)
});
You should use JQuery data() to fetch the value when clicked on the element. And secondly you should use $(this) to get the current element value and not the classname. In your code, it would always give one result because you are using $( ".single_school" ). This should be replaced with $(this):
$(document).on('click', '.single_school', function() {
var school = $(this).data('value');
alert(school)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="1">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="food_info">
<p class="school_name">ABC</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="2">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="food_info">
<p class="school_name">XYZ</p>
</div>
</div>
</div>
<div class="col-md-2 col-sm-4 col-xs-12">
<div class="single_school" data-value="3">
<div class="selection_area choosen_school">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</div>
<div class="food_info">
<p class="school_name">PQR</p>
</div>
</div>
</div>
Related
I need help whenever i click on div with .clickable class .bg-color class will be added to span.aa and span.aaa and when i select option any other option like c other from other option .bg-color class will be removed i tried many other methods but its not working kindly help me get through this
$('.clickable').on('click',function(){
$('.aa .aaa').removeClass('bg-color');
$(this).addClass('bg-color');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="div input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class=" aa input-group-text bor-clr" id="basic-addon1">A</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Full time</span>
</div>
</div>
<div class="input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class="aa input-group-text bor-clr" id="basic-addon1">B</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Part Time</span>
</div>
</div>
<div class="input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class="aa input-group-text bor-clr" id="basic-addon1">C</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Pinch</span>
</div>
</div>
<div class="input-group mb-3 col-md-6">
<div class="input-group-prepend">
<span class="aa input-group-text bor-clr" id="basic-addon1">D</span>
</div>
<div class="clickable input-group-prepend">
<span class="aaa input-group-text select-opt bor-clr ml-1" id="basic-addon1">Weekend Worrior</span>
</div>
</div>
</div>
</div>
You are selecting elements which each has multiple classes, it must be selecting elements which each has one of these classes. Below is a worked solution
$('.clickable').on('click', function() {
$('.aa, .aaa').removeClass('bg-color')
$(this)
.parent()
.find('.aa, .aaa')
.addClass('bg-color')
})
I tried design a Web Page.
I am using carousel.
The Left and Right options doesn't work, Instead all the images gets added on the Vertical Manner.
<h3 style="text-align:center;">Top Visiting Sites</h3>
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="row" id="Places">
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
This is what i have used on html.
And this is the Js I have used.
for (var i = 0; i < total.length; i++) {
var stars = '<i class="glyphicon glyphicon-star"></i>';
var obj = sort[i];
$('#Places').append(`
<div class="carousel-item active">
<div class="col-md-3" style="border-right:2px solid gray;">
<div class="panel panel-info">
<div class="panel-body">
<div style="background-image: url(/Images/${ obj.Name}.JPG)" class="TourismImage"></div>
<h4><span> ${ obj.Name}</span></h4>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
</div>
</div>
</div>
`); }
You are adding all of your elements inside of the div with the class="item active". You need to add them to the carousel-inner div, each in a separate div with only the "item" class.
Your end result should look like this :
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="carousel-item active">
<!-- html of your first item -->
</div>
<div class="carousel-item">
<!-- html of your second item -->
</div>
<div class="carousel-item">
<!-- html of your third item -->
</div>
<div class="carousel-item">
<!-- html of your fourth item -->
</div>
</div>
</div>
The content inside append function misses the ending quote. Please check that.
$('#Places').append('
<div class="carousel-item">
<div class="col-md-3" style="border-right:2px solid gray;">
<div class="panel panel-info">
<div class="panel-body">
<div style="background-image: url(/Images/${ obj.Name}.JPG)" class="TourismImage"></div>
<h4><span> ${ obj.Name}</span></h4>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-star"></i>
</div>
</div>
</div>
</div>
');
Can you try and see whether the above with end quote works?
You should also have your carousal-inner class id as Places and remove the class=row div
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner" id="Places">
</div>
</div>
Also remove active class as it should be set only on the first item, which you can do separately.
This is my HTML code:
<div data-repeater-item class="mt-repeater-item prescribeData">
<div class="mt-repeater-cell">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="prescribe_test" class="form-control typeahead-prescribetest input-circle-right" placeholder="Prescribe Test">
</div>
<span class="help-block">Name of Investigation</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="diagnosis_input" class="form-control typeahead-diagnosis input-circle-right" placeholder="Duration of Investigation (Optional)">
</div>
<span class="help-block">e.g. Once, Weekly, Monthly</span>
</div>
</div>
<div class="col-md-1 pull-right col-sm-6 col-xs-6">
<a href="javascript:;" style="margin-right:20px;" class="btn-circle prescribeAddData btn green-meadow mt-repeater-btn-inline"> <i class="fa fa-plus"></i>
</a>
</div>
</div>
</div>
</div>
I want to get all the input elements data in a variable using a JQuery code:
I am currently using this code:
$(document.body).on('click', 'a.prescribeAddData', function ()
{
console.log($(this).closest($(".prescribeData :input")));
});
But this code doesn't display the data that the elements are holding after inputting in it.
How can I fix this logic?
You can use the find method to find all elements that are children of a specific element then iterate over them, and store the values in an array for example.
var inputFields = $('.prescribeData').find('input');
var values = [];
inputFields.each(function(){
values.push($(this).val())
})
console.log(values)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-repeater-item class="mt-repeater-item prescribeData">
<div class="mt-repeater-cell">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="prescribe_test" class="form-control typeahead-prescribetest input-circle-right" placeholder="Prescribe Test">
</div>
<span class="help-block">Name of Investigation</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="diagnosis_input" class="form-control typeahead-diagnosis input-circle-right" placeholder="Duration of Investigation (Optional)">
</div>
<span class="help-block">e.g. Once, Weekly, Monthly</span>
</div>
</div>
</div>
</div>
</div>
I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!
You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/
I've tried to implement answers I found on stackoverflow asked by other people, but I'm not getting the results that I want.
I have an about section on a site I'm building. In that section I have four different about items. At the bottom is a button and when that button is clicked I want the four boxes to be hidden and for a large about item to appear(show) in their place and display the information of the about item who's button was clicked. With the code I have now, when I click one of the buttons, all large about item divs show up instead of just one. Is it possible to just display only one large about item(showfullabout) when clicked, instead of all four? I want to individually show items when clicked.
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
<div class="about-item-full">
<h1>Title</h1>
<h2>Description</h2>
<p>Content</p>
<button class="small-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
<div class="about-item">
<div class="about-item-top">
<img src="img/img07.jpg" alt="img">
<div class="about-item-circle">
<span class="oi oi-justify-left"></span>
</div>
</div>
<div class="about-item-bottom">
<h1>Title</h1>
<h2>Description</h2>
<p>
Content
</p>
<button class="full-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--END ITEM-->
</div>
<!--END COLUMN-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
<div class="about-item-full">
<h1>Title</h1>
<h2>Description</h2>
<p>Content</p>
<button class="small-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
<div class="about-item">
<div class="about-item-top">
<img src="img/img07.jpg" alt="img">
<div class="about-item-circle">
<span class="oi oi-image"></span>
</div>
</div>
<div class="about-item-bottom">
<h1>Title</h1>
<h2>Description</h2>
<p>
Content
</p>
<button class="full-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--END ITEM-->
</div>
<!--END COLUMN-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
<div class="about-item-full">
<h1>Title</h1>
<h2>Description</h2>
<p>Content</p>
<button class="small-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
<div class="about-item">
<div class="about-item-top">
<img src="img/img07.jpg" alt="img">
<div class="about-item-circle">
<span class="oi oi-monitor"></span>
</div>
</div>
<div class="about-item-bottom">
<h1>Title</h1>
<h2>Description</h2>
<p>
Content
</p>
<button class="full-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--END ITEM-->
</div>
<!--END COLUMN-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
<div class="about-item-full">
<h1>Title</h1>
<h2>Description</h2>
<p>Content</p>
<button class="small-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
<div class="about-item">
<div class="about-item-top">
<img src="img/img07.jpg" alt="img">
<div class="about-item-circle">
<span class="oi oi-location"></span>
</div>
</div>
<div class="about-item-bottom">
<h1>Title</h1>
<h2>Description</h2>
<p>
Content
</p>
<button class="full-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--END ITEM-->
</div>
<!--END COLUMN-->
<!--CSS-->
.showfullabout{
display:none;
}
<!--Script-->
$("button.full-about").click(function(){
$(".about-item").hide();
$(".showfullabout").fadeToggle(500);
});
$("button.small-about").click(function(){
$(".about-item").fadeToggle(500);
$(".showfullabout").hide();
});
You need to use relative selectors to find the target elements
$("button.full-about").click(function () {
$(".about-item").hide();
$(this).closest(".about-item").parent().prev('.showfullabout').fadeIn(500);
});
$("button.small-about").click(function () {
$(this).closest(".showfullabout").hide();
$(".about-item").fadeToggle(500);
});
Demo: Fiddle
In the case of button full-about you need to hide all about-item elements and show the previous sibling of the ancestor about-item's parent, the opposite for small-about button