I need to be able to get access to an element that will be available via AJAX after several click events. I cannot simply use $(element).on('click', selector, event) because the element I need access to is not a child element.
For example, what appears on initial page load is this:
<ol class="opc" id="checkoutSteps">
<li id="opc-billing" class="section opc-step"
data-step-number="0">
<div class="step-title" data-href="#step-1">
<span class="number">1</span>
<h2>Billing Information</h2>
<a onclick="stepTo('#step-2'); return false;"
href="#step-2">
View </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="billing-step-login" class="step a-item">
<div id="step-2"
class="panel-collapse collapse in">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-shipping" class="section opc-step"
data-step-number="1">
<div class="step-title" data-href="#step-2">
<span class="number">2</span>
<h2>Shipping Information</h2>
<a onclick="stepTo('#step-3'); return false;"
href="#step-3">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="shipping-step-login" class="step a-item">
<div id="step-3"
class="panel-collapse collapse ">
<div class="panel-body">
<button class="button btn-next" type="submit"><span><span>Continue</span></span></button>
</div>
</div>
</div>
</li>
<li id="opc-shipping_method" class="section opc-step"
data-step-number="2">
<div class="step-title" data-href="#step-3">
<span class="number">3</span>
<h2>Shipping Method</h2>
<a onclick="stepTo('#step-4'); return false;"
href="#step-4">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="shipping_method-step-login" class="step a-item">
<div id="step-4"
class="panel-collapse collapse ">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-payment" class="section opc-step"
data-step-number="3">
<div class="step-title" data-href="#step-4">
<span class="number">4</span>
<h2>Payment Method</h2>
<a onclick="stepTo('#step-5'); return false;"
href="#step-5">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="payment-step-login" class="step a-item">
<div id="step-5"
class="panel-collapse collapse ">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-review" class="section">
<div class="step-title" data-href="#step-6">
<span class="number">5</span>
<h2>Order Review</h2>
Edit
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="review-step-login" class="step a-item">
<div id="step-6" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
</li>
</ol>
Once I click the button inside div.#step-3, some content with a button loads in div.#step-4. After clicking the button in that div, a button loads in #step-5. Finally, after clicking on the button inside #step-5, there is content (textarea and another button) loaded in #step-6 that I'm interested in.
How do I go about writing a jQuery or JavaScript event that would allow me to get access to the div.#step-6 textarea? Can I write several nested $(element).on() events?
P.S. I don't have access to change any of the existing HTML, CSS, or JavaScript files. I can only write new JavaScript.
It seems that you can bind the delegated event to a common static ancestor.
For example, #checkOutSteps:
jQuery('#checkOutSteps').on('focus','div.#step-6 textarea',function(){
...
});
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future. --Event Delegation
Related
Using Bootstrap...
How to make this so that only one accordion collapsable DIV is open at a time. When one is clicked open, the other should close (if it is open?)
Looking for the most simple and streamlined solution...
<div class="row" id="nav-top">
<div class="col-md-6">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >SIGN-IN</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-6">
<div>
REGISTER
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
</div>
You have to use show.bs.collapse event which is fired immediately when the collapse element starts showing. Then you can hide other collapsible menus, Like this:
// when showing signin accordion
$('#signin').on('show.bs.collapse', function () {
// hide register accordion
$('#register').collapse('hide');
});
$('#register').on('show.bs.collapse', function () {
$('#signin').collapse('hide');
});
But If you have multiple accordion you can't call this event in each one of them, You have to use a class to select them all and call show.bs.collapse only one time, Here is a working example:
$( document ).ready(function() {
$('.collapse').on('show.bs.collapse', function () {
// hide all accordion except the clicked one
$('.collapse').not(this).collapse('hide');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row" id="nav-top">
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >ABOUT</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#register" >REGISTER</a>
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#about" >SIGN-IN</a>
</div>
<div id="about" class="collapse">
FORM HERE
</div>
</div>
</div>
</div>
I have a blog style website that I've placed a dropdown button at top of for the purpose of filtering the content. Each blog post will reside in section tags.
When user clicks on menu item it will trigger click event. I'm trying to save the href which the code seems to do fine.
Then i was hoping to iterate each a tag with the class of "label".
With each one that is found it should check the text and compare to value from dropdown box. If it matches keep the content. If not detach it. I thought detach was the best method since I would need to put it back on refresh and/or if user clicks on another selection in the dropdown.
Here's what I tried:
<div class="container blog-content">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown">Sort By:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortMenu">
<li role="presentation"><a role="sortmenuitem" id="Adventure">Adventure</a></li>
<li role="presentation"><a role="sortmenuitem" id="Food">Food</a></li>
<li role="presentation"><a role="sortmenuitem" id="Nature">Nature</a></li>
<li role="presentation"><a role="sortmenuitem" id="Sites">Sites</a></li>
</ul>
</div>
<div class="row">
<div class="col-sm-12 blog-main">
<div class="row">
<div class="col-sm-6">
<section class="blog-post">
<div class="panel panel-default">
<img src="myimage.jpg" class="img-responsive" />
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-danger">Adventure</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 1</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
<section class="blog-post">
<div class="panel panel-default">
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-info">Food</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 2</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
JQuery:
<script>
$("a[role='sortmenuitem']").bind("click", function() {
var value = $(this).attr( 'id' );
$("a.label").each(function() {
if (this.text('value')) {
this.replace();
}
else {
this.detach();
}
});
});
</script>
If there is a better approach all together, I am all ears.
I thought about giving each blog section a class matching its category, and then using CSS to hide the element. If I am in the right ballpark please let me know.
Furthermore, once we hide the section not matching the dropdown menu item that is selected I'd need to put it back if another element is selected.
I am new (obviously) to JQuery. Any "dumbed down" explanation would be greatly appreciated!
I assume you want to hide/show the blog-post according to the current dropdown selection.
For the first, you need to change this line:
$("a.label")
to:
$(".blog-post .label")
because the label is associated to the span element under the blog-post section.
In order to test a value against a text you need to change this line:
this.text('value')
with:
$(this).text()
In order to hide/show the section inside the each loop you have to search for the closest blog-post parent section.
I added e.preventDefault() inside the click to stop navigation.
Moreover, as reported in the comment (Khalid T), instead to use bind you have to use on because its usage is deprecated.
So the snippet is:
$("a[role='sortmenuitem']").on("click", function(e) {
e.preventDefault();
var value = $(this).attr( 'href' );
$(".blog-post .label").each(function() {
$(this).closest('.blog-post').toggle($(this).text() == value);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container blog-content">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown">Sort By:
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortMenu">
<li role="presentation"><a role="sortmenuitem" href="Adventure">Adventure</a></li>
<li role="presentation"><a role="sortmenuitem" href="Food">Food</a></li>
<li role="presentation"><a role="sortmenuitem" href="Nature">Nature</a></li>
<li role="presentation"><a role="sortmenuitem" href="Sites">Sites</a></li>
</ul>
</div>
<div class="row">
<div class="col-sm-12 blog-main">
<div class="row">
<div class="col-sm-6">
<section class="blog-post">
<div class="panel panel-default">
<img src="myimage.jpg" class="img-responsive"/>
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-danger">Adventure</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 1</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
<!-- /.blog-post -->
<section class="blog-post">
<div class="panel panel-default">
<div class="panel-body">
<div class="blog-post-meta">
<span class="label label-light label-info">Food</span>
<p class="blog-post-date pull-right">January 1, 2016</p>
</div>
<div class="blog-post-content">
<a href="post-image.html">
<h2 class="blog-post-title">Blog Title 2</h2>
</a>
<p>Lorem ipsum blah blah blah</p>
<a class="btn btn-info" href="post-image.html">Read more</a>
<a class="blog-post-share pull-right" href="#">
<i class="material-icons"></i>
</a>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
I have an event handler for the show.bs.collapse-Event of a bootstrap accordion.
$('.collapse[data-location]').on('show.bs.collapse', function (e) {
//Do Something...
}
This event handler is executed, if the user opens it. So far ok.
Now I want to open a specific item via Jquery:
$('.panel-collapse').collapse('show');
The specific item is opening, but the above event handler is not fired.
So how can I open a accordion item, with respecting every show.bs.collapse-Event handler?
This is my HTML, if this does matter:
<div class="panel-group accordion">
<div class="panel panel-bordered panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#location1">Hamburg</a>
</h4>
</div>
<div class="panel-collapse collapse" id="location1" data-location="1" style="position:relative">
<div class="panel-body">
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Zeitraum</li>
<li role="presentation">Vergleich</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="TabTimespan1"></div>
<div role="tabpanel" class="tab-pane" id="TabCompare1"></div>
</div>
</div>
</div>
</div>
</div>
<!-- .... -->
</div>
I have a link on click of that i want to get the parent div text having a specific class.How can we do this in jquery
HTML
<div class="rcmp_li lft">
<div class="rcm">
<div class="cmplogowrap clr cmp">
<a class="reclogo lft" href="#"></a>
<a class="lft cmp" href="#">
<div class="tpjobwrap">
<div class="compName font_15">ABC </div>
<div class="tpjob_desc">Construction</div>
<div class="tpjob_desc">Mumbai</div>
</div>
</a>
</div>
<a class="lnk cmpjobs" href="#"> Active </a>
</div>
<div class="cmpfollow_wrap clr">
<div class="followbtnwrap rgt">
<a onclick="abc(this)" href="javascript:void(0)">Test</a>
</div>
<div id="my_follow61" class="followcnt rgt">6 </div>
</div>
</div>
On Click of abc() i want to get the value of diva having class compName
i Have tried this
$(obj).parents('div[class^="compName"]').html()
But this is not working
You have incorrect selector to target element. you need to use:
$(obj).closest('.rcmp_li').find('.compName').html()
Working Demo
Try including :has() selector at parameter passed to .parents() to return div element having child element .compName
function abc(obj) {
console.log($(obj).parents(":has(.compName)").find(".compName").html())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="rcmp_li lft">
<div class="rcm">
<div class="cmplogowrap clr cmp">
<a class="reclogo lft" href="#"></a>
<a class="lft cmp" href="#">
<div class="tpjobwrap">
<div class="compName font_15">ABC </div>
<div class="tpjob_desc">Construction</div>
<div class="tpjob_desc">Mumbai</div>
</div>
</a>
</div>
<a class="lnk cmpjobs" href="#"> Active </a>
</div>
<div class="cmpfollow_wrap clr">
<div class="followbtnwrap rgt">
<a onclick="abc(this)" href="javascript:void(0)">Test</a>
</div>
<div id="my_follow61" class="followcnt rgt">6 </div>
</div>
</div>
Your code will not work because its parent is not the div you are looking for.
$(obj).parents('div[class^="compName"]').html();
Also you cannot use "parents" And to travel to parent hierarchy you will have to use parent().parent() where you need to know the exact parent level.
Here you can simply use $("div.compName").html();
I'm not sure what is wrong, since this is pretty much exactly like in the bootstrap website
Once clicked on the first element (List A), it pretty much breaks. Other elements are ok, but once list A is clicked it breaks.
<div class="accordion" id="notification_types">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#a">List A</a>
</div>
<div class="accordion-body collapse" id="a" style="height: 0px;">
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#b">List B</a>
</div>
<div class="accordion-body collapse" id="b" style="height: 0px;">
<div class="accordion-inner" dir="auto" id="a123">
<a data-method="get" data-remote="true" href="/123">123</a>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#c">List C</a>
</div>
<div class="accordion-body collapse" id="c" style="height: 0px;">
<div class="accordion-inner" dir="auto" id="a456">
<a data-method="get" data-remote="true" href="/456">456</a>
</div>
</div>
</div>
</div>
I've made an example in jsfiddle - http://jsfiddle.net/uycBa/157/
When testing, press List B or C before, since pressing on A will break the whole thing...
What is wrong here?
Adding div to first accordion body worked.Could not find reason for this.
<div class="accordion" id="notification_types">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#a">List A</a>
</div>
<div class="accordion-body collapse" id="a" style="height: 0px;">
<div class="accordion-inner">
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#b">List B</a>
</div>
<div class="accordion-body collapse" id="b" style="height: 0px;">
<div class="accordion-inner" dir="auto" id="a123">
<a data-method="get" data-remote="true" href="/123">123</a>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-parent="#notification_types"
data-toggle="collapse" href="#c">List C</a>
</div>
<div class="accordion-body collapse" id="c" style="height: 0px;">
<div class="accordion-inner" dir="auto" id="a456">
<a data-method="get" data-remote="true" href="/456">456</a>
</div>
</div>
</div>
</div>
Known error : https://github.com/twitter/bootstrap/issues/5849
The transition is blocking the plugin because your first collapsible has no height :
The plugin is in the transitioning state, and is waiting for the transition to end, but since the height of the element is 0, the transition never started and will not end (I think so). The plugin doesn't do anything when it's in this state.
You can see it if you deactivate the transition : http://jsfiddle.net/Sherbrow/uycBa/158/
You could stop this by calling preventDefault() on the show event :
$('.accordion-body.empty').on('show', function(event) {
event.preventDefault();
});
(empty is also added in the markup to locate the empty accordion body)
Demo : http://jsfiddle.net/Sherbrow/uycBa/159/