I face a problem with ajax on onclick function.
In html
<div>
<input type="text" id="metro" placeholder="Area">
<div id="areastatus"></div>
</div>
<div class="boo">
<ul>
<li>KHULNA</li>
<li>KUSHTIA</li>
</ul>
</div>
<div>
<input type="text" id="keyword" placeholder="Area">
<div id="keystatus"></div>
</div>
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
In javascript
$(document).on('click', 'li', function() {
$('#metro').val($(this).text());
$('#areastatus').fadeOut();
});
$(document).on('click', 'li', function() {
$('#keyword').val($(this).text());
$('#keystatus').fadeOut();
});
Here when any li is clicked then those are fadeout and send same text value in text field. I need to identify whose li is clicked 'boo' or 'foo' and send the particular value in text field.
please help me out..
You can use .closest to find the colsest parent and then use .attr("class") to get the class name like
$("li").click(function(){
console.log($(this).closest("div").attr("class"))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<input type="text" id="metro" placeholder="Area">
<div id="areastatus"></div>
</div>
<div class="boo">
<ul>
<li>KHULNA</li>
<li>KUSHTIA</li>
</ul>
</div>
<div>
<input type="text" id="keyword" placeholder="Area">
<div id="keystatus"></div>
</div>
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
Below is the code example you can put to get the class name for list item which is clicked
$(document).on('click','li',function(){
alert($(this).parent().parent().prop('class'));
$('#metro').val($(this).text());
$('#areastatus').fadeOut();
});
$(document).on('click','li',function(){
alert($(this).parent().parent().prop('class'));
$('#keyword').val($(this).text());
$('#keystatus').fadeOut();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" id="metro" placeholder="Area">
<div id="areastatus"></div>
</div>
<div class="boo">
<ul>
<li>KHULNA</li>
<li>KUSHTIA</li>
</ul>
</div>
<div>
<input type="text" id="keyword" placeholder="Area">
<div id="keystatus"></div>
</div>
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
</div>
Try this in both the functions:
$(document).on('click','li',function(){
$(this).parent().parent().prop('class');
$('#metro').val($(this).text());
$('#areastatus').fadeOut();
});
Related
Following is my code. My requirement is to hide all div by default through JS. And when click on the link, it should open relevant div with same id.
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
$(document).ready(function() {
$("ul.links li a").on("click", function(e) {
e.PreventDefault;
var grabID = $(this).attr( "href" );
$('div' + grabID).toggleClass("hide");
$("div").not('div' + grabID).addClass("hide");
});
});
Don't really need javascript at all for that if you only want the latest link to be the one that is opened:
div { display: none; }
div:target {display:block}
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
Here is a jquery solution:
$(document).on('click','.links a',function(e){
e.preventDefault();
var href = $(this).attr('href');
$('div').hide();
$(href).show();
});
div {display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
Hide your all divs on load of your document. And just show the respective div on click of the link.
see the working fiddle-
$(document).ready(function() {
$("div").hide();
$("ul.links li a").on("click", function(e) {
e.PreventDefault;
var grabID = $(this).attr( "href" );
$('div').hide();
$('div' + grabID).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
You can fix this issue by simply adding the class hide to all targets initially like
$('.search, .del').addClass("hide");
$("ul.links li a").on("click", function(e) {
e.preventDefault();
var grabID = $(this).attr("href");
$('div' + grabID).toggleClass("hide");
$("div").not('div' + grabID).addClass("hide");
});
.hide{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
Here you go with a solution using pure JavaScript
document.getElementById("search").classList.add("hide");
document.getElementById("del").classList.add("hide");
function clickMethod(e) {
var id = e.getAttribute("href").replace("#", "");
document.getElementById(id).classList.toggle("hide");
}
.hide {
display: none;
}
<ul class="links">
<li>Search</li>
<li>Share</li>
</ul>
<div id="search" class="search">
<input type="search" placeholder="Search" />
</div>
<div id="del" class="del">
Share me
</div>
Define a class name hide which will help you to hide the element and then use the toggle method to toggle the class.
Hope this will help you
I am learning framework7 and I wonder if it is possible to create an input type="text" outside UL tag. On the code below, the css is not rendering on my textfield. Please see code comments.
And here is the fiddle.
<!-- THIS WILL WORK -->
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<input type="text" name="name">
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- NOW, WHAT IF WE WON'T SHOW TEXTFIELD IN INSIDE UL? -->
<!-- THE CSS WON'T WORK ANYMORE, IDK WHAT IS THE CORRECT CSS CLASS EITHER TO WRAP THE ELEMENT -->
<div class="content-block">
<input type="text" />
</div>
If you put the input outside the list, you will lose the separating lines, but it is possible adding the required classes:
<!-- THIS WILL WORK -->
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<input type="text" name="name">
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- NOW, WHAT IF WE WON'T SHOW TEXTFIELD IN INSIDE UL? -->
<div class="content-block list-block">
<div class="item-input">
<input type="text" value="text here" />
</div>
</div>
Here: https://jsfiddle.net/k5gd7Lww/10/
does anyone know how Can I add a class in the A tag:
Subscribe
Here is my html:
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
you can use
$('a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('div#prod-subscription a[href="/souscription/digital-vie"]').addClass('classHere');
or
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
$('a[href="/souscription/digital-vie"]:contains("Subscribe")').addClass('classHere');
.classHere{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module" id="prod-subscription">
<div class="entity entity-bean bean-ap-bl-instruct contextual-links-region block container">
<div class="contextual-links-wrapper contextual-links-processed">
<a class="contextual-links-trigger" href="#">Configure</a>
<ul class="contextual-links">
<li class="bean- first last">
bloc
</li>
</ul>
</div>
<div class="row">
<div class="col-md-3">
<h2>simple<span>in 3 </span></h2>
</div>
<div class="col-md-6">
<ol>
<li>
<span>1</span><p>text</p>
</li>
<li>
<span>2</span><p>texte testx</p>
</li>
<li>
<span>3</span><p>and text</p>
</li>
</ol>
</div>
<div class="col-md-3">
Subscribe
</div>
</div>
</div>
</div>
You could use jQuery's filter function and filter the link where the exact text is 'Subscribe' (this may cause problems if you have multiple links with that exact text)
$('a').filter(function() {
return $(this).text() === 'Subscribe';
}).addClass('new-class');
.new-class {color:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Subscribe
Not sure I fully understand the question. Do you just want to give the anchor tag a class? That can be done as simply as <a class="your_class" href="your_link">Subscribe</a>
I have step form with 3 steps. I want to get index of <li> in stepinstallment when <label> inside it selected to check:
If the first step is selected, it will change background color of circle class.
If the second and third step is selected without first step, it will display error message.
I've tried many ways on SO and write myself but it doesn't work.
This is my code
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment">
<ul>
<li id="step-one" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three" class="step">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
JS
var sCircle = $('.steps ul li');
$('.step label').on('click', function(){
var $this = $(this),
sCircleIndex = parseInt(sCircle.index()),
sCircleChild = sCircle.children('div'),
currParent = $this.parents('ul').index();
console.log(currParent);
});
Above JS code always return 0. Hope anyone can figure me out this case. Thanks in advance.
Try using .closest()
$(".stepinstallment label").on("click", function() {
console.log($(this).closest("li").index())
});
$('.stepinstallment label').on('click', function(){
console.log($(this).closest("li").index())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment">
<ul>
<li id="step-one">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three">
<h2>Choose your document</h2>
<div class="step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" />
<span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
I hope this example will help you out !!!
$("ul#wizard li").click(function () {
var index = $("ul#wizard li").index(this);
if(index!=0)
alert("error ")
else
alert("index is: " + index)
});
<ul id="wizard">
<li>Step 1</li>
<li>Step 2</li>
<li>Step 3</li>
<p>Some random tag</p>
</ul>
$('.step label') will not return any elements, since there is no html matching the css selector
I can't see the .steps and .step class in your html.
with your html, I guess this code will work
$('.stepinstallment').on('click', 'label', function (e) {
var $this = $(this);
var li = $this.parents('li');
console.log(li.index());
});
the steps of the code:
get the label element
get the li element contain the label
get the index
There is no click on label... it is empty. You can bind click on checkbox, the find the index of li and base on it color the same index of LI in your circle UL:
var sCircle = $('.steps ul li');
$('input[type=radio]').on('click', function(){
var liIndex=$(this).parents('li').index();
if(liIndex>0){
alert('error')
}
else{
$('ul.clearfix>li:eq('+liIndex+')').css('background-color','red')
}
});
JSFIDDLE
$(document).ready(function(){
var sCircle = $('.steps ul li');
$('.step label').on('click', function () {
var currentLi = $(this).parents('li')[0];
currentLiIndex = -1;
sCircle.each(function (index) {
if (sCircle[index] == currentLi) {
currentLiIndex = index;
}
});
console.log(currentLiIndex);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="clearfix">
<li>
<div class="step-one circle">
<p>Step 1</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 2</p>
</div>
</li>
<li>
<div class="step-two circle">
<p>Step 3</p>
</div>
</li>
</ul>
<div class="stepinstallment steps">
<ul>
<li id="step-one">
<h2>Choose your document</h2>
<div class="step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-two">
<h2>Choose your document</h2>
<div class=" step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
<li id="step-three">
<h2>Choose your document</h2>
<div class="step step-content">
<label>
<input type="radio" id="option-1" name="options" value="1" /> <span>ID card and household registration</span>
</label>
</div>
</li>
</ul>
</div>
This is what you need to do.
$('.step-content label').on('click', function(){
var clickedId = $(this).parents('li').index();
if(clickedId == 0) {
$('.circle').css('background-color','yellow');
} else {
alert('error');
}
});
Working example in jsfiddle https://jsfiddle.net/1uxus551/
I have one drop-down with ul and li tag. It is working on click. I'm trying to open drop-down on mouse hover not a click. How can i achieve this.
<div class="ms-parent form-control">
<button type="button">
<span class="placeholder">Choose Anyone</span>
</button>
<div class="ms-drop bottom" style="display: none;">
<ul>
<li class="ms-select-all">
<li>
<label>
<input type="checkbox" value="Abu Dhabi" undefined="">
Computer
</label>
</li>
<li>
<label>
<input type="checkbox" value="Al Ain" undefined="">
Keyboard
</label>
</li>
<li>
</ul>
</div>
</div>
The output is like normal html select drop-down. But i am looking to open dropdown on mouse hover event.
$(document).ready(function(){
$('#btnToChoose').hover(
function () {
$('#content').show();
},
function () {
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ms-parent form-control">
<button type="button" name="btnToChoose" id="btnToChoose">
<span class="placeholder">Choose Anyone</span>
</button>
<div id='content' class="ms-drop bottom" style="display: none;">
<ul>
<li class="ms-select-all">
<li>
<label>
<input type="checkbox" value="Abu Dhabi" undefined="">
Computer
</label>
</li>
<li>
<label>
<input type="checkbox" value="Al Ain" undefined="">
Keyboard
</label>
</li>
<li>
</ul>
</div>
</div>
Change Design as per your convenience.
$('#btnToChoose')
.on('mouseenter', function () { $('#content').show(); })
.on('mouseleave', function () { $('#content').hide(); });