having problems with this method in jquery - javascript

Maybe I'm too tired but I really can't understand why this thing is not working? I have the jsbin here: http://jsbin.com/ariret/19/edit
Thanks for your time!
<section class="">
<p>Hello there, this is your flight info.</p>
<div class="confirmation">
<h3>Hawaiian Vacation</h3>
<button class="btn">Flight details</button>
<div class="ticket">
View Boarding Pass
<img src="http://placekitten.com/g/100/100" alt=""/>
</div>
</div>
</section>
jquery:
$('.confirmation').on('click', 'button', function() {
console.log('works');
$(this).find('.ticket').hide(); //why is this not working?
});

find() is used for looking for child elements. The problem is .ticket is a sibling of button, so you need to use next():
$('.confirmation').on('click', 'button', function() {
$(this).next('.ticket').hide();
});

this inside the handler points to the button and ticket is not a decedent of button but it is the next sibling, so you need to use .next()
it should be
$('.confirmation').on('click', 'button', function(){
console.log('works');
$(this).next('.ticket').hide(); //why is this not working?
});

You can use both of them:
$(this).parent().find('.ticket').hide();
$(this).next('.ticket').hide(); //why is this not working?
You only can find for child of the current node.

Try this. I guess this is what you want
$('.btn').click(function(){
$('.ticket').slideToggle();
});
and the updated jsbin Demo
Hope this helps. Thank you.

Related

jquery on submit image not working. How to fix it?

I did try every single option, and i'm tired of searching. I hope you could help me on this.
The code below:
<?= FORM::button('submit', __('SUBMIT YOUR AD'), array('type'=>'submit','class'=>'btn btn-large btn-primary btn-publish-new','action'=>Route::url('post_new',array('controller'=>'new','action'=>'index'))))?>
</div>
</div>
</fieldset>
<img src="//www.linkinads.com/images/loading-blue.gif" style="display: none;" id="loading">
<script>
$("#loading").bind("ajaxSend", function(){
$(this).show();
}).bind("ajaxComplete", function(){
$(this).hide();
});
</script>
Please let me know any solution please. I'm out of resources. Thank you
According to all documentations I have seen on jQuery, the ajaxSend and ajaxComplete events are applied directly to the $(document) not to a specific element since these are global events. You can use it like this:
$(document).bind("ajaxSend", function(){
$("#loading").show();
});
Though I dont know the real explanation but removing the
'data-ajax'=>'false'
solve my issue.
I hope you can explain to me guys about this solution.. i hope this is okay.
Thanks

How to add text from span tag to data-attr by jQuery?

How to add text from span tag to data-attr?
Example:
I have this code
<div class="clearfix colelem" id="u92-5"><!-- content -->
<p>Icon<span id="u92-2">iconsymbol</span></p>
</div>
And I want to add iconsymbol to data-attr="iconsymbol" of the same element like a:
<div class="clearfix colelem" id="u92-5" data-attr="iconsymbol"><!-- content -->
<p>Icon<span id="u92-2">iconsymbol</span></p>
</div>
Yes and it will be with all elements which has a title="icon"
<script>
$( document ).ready(function() {
$("[title*='icon']").attr('data-attr',function(){
// I don't know
}).removeAttr('title');
});
</script>
Do you know how to do it?
So I know it is very simple but I am new in jquery and I need in your help.
I hope you understood my question.
Here is an example that should work for you. There is probably a few ways you can pull this off, but this should hopefully get you started. Please see the attached JSFiddle to see this example in action
$(function() {
$('[title*="icon"] span').each(function(){
$(this).parent().closest('div').attr('data-attr', $(this).text())
});
});
Here is another way you can do this as well
$('[title*="icon"]').each(function(){
$(this).attr('data-attr', $(this).children().closest('span').text());
});
JSFiddle Example
Your <div>s should have attribute title="icon"
You are using a callback to attr() function, so return the value which you need to set inside the function using .text().
$(document).ready(function () {
$("[title='icon']").attr('data-attr', function () {
return $(this).find('span').text();
}).removeAttr('title');
});
Demo

JQuery toggling all divs in an .each loop

I have my posts lopping on an .each loop and I have a link to display comments on the bottom of the loop.
I want to show the comment section on click, but when I click comments for all posts open as well. I only want the one that's clicked to open.
I've tried a ton of different examples I've found on this site, but so far none of them have worked.
I'm sure this is extremely easy to accomplish, but I'm a JavaScript noob.
Here is the JSFiddle link - http://jsfiddle.net/omgwhyamisobad/h0yhvqa3/
As well as the code snippet -
JS
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$('.artist-micropost-comments-container').toggle();
});
});
HTML
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
<div class="artist-micropost-social">
<a class="artist-micropost-comment-click">comments</a>
</div>
<div class="artist-micropost-comments-container">
...
...
...
</div>
CSS
.artist-micropost-comments-container {
display: none;
}
The way that you are trying to grab the relevant element is wrong. You need to traverse the DOM with respect to the element that is being clicked. If you try to use the direct class selector in this case, then it would select all the elements which are having the supplied class.
Try,
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$(this).closest('.artist-micropost-social')
.next('.artist-micropost-comments-container').toggle();
});
});
DEMO
Use
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$(this)
.closest('.artist-micropost-social') //Find parent container
.next('.artist-micropost-comments-container') //Find next comments container
.toggle();
});
});
Try This SEE DEMO
$(document).ready(function() {
$('.artist-micropost-comment-click').click(function() {
$( this ).parent().next().slideDown().siblings('.artist-micropost-comments-container').slideUp();
});
});

Access children DIVs in jQuery

I have a structure, such as
<div class="entry">
<p class="entry-text"><div class="nonmatched-sentence">some text goes here...</div></p>
</div>
how do I show all the nonmatched-sentence elements if they were made invisible before?
I now use this:
$(this).('entry-text').children('.nonmatched-sentence').show();
But it's not working...
Thanks!
You could go with this approach: http://jsfiddle.net/oejm2wfu/
For example I have created an event on the button click:
$("#btn").click(function(){
$(".nonmatched-sentence").each(function(){
$(this).show();
});
});
but you could do that on any event you want. Hope that helps

How can I fix this script with jQuery toggle?

I have tried to make working this jQuery script, but maybe there is something wrong. I wanted to make the script working by clicking on the arrow on the right side of the page. As you can see from the JavaScript code and jsfiddle test I have try to make slide down the hidden #top-bg.
The JavaScript code:
$(document).ready(function() {
$(".bottone").click(function() {
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
And this is the jsfiddle test: TEST
Where I'm doing wrong?
You are not using the right type of quotation marks.
There is a big difference between:
$(“.bottone”).click(function(){
And:
$(".bottone").click(function(){
You're using "smart quotes" as opposed to regular quotes. Also, there is no need for the a tag, you can remove it and apply the click function directly to triangolo
$("#triangolo").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
Updated jsFiddle
You use the wrong quotes and also you try to catch a click on an empty tag (so nothing in fact)... ;)
Here is a JsFiddle that works : http://jsfiddle.net/uazw6/11/
<div id="top-bg" class="bg"></div>
<div id="top" class="bg">
<div id="triangolo">test
</div>
</div>
Javascript :
$(document).ready(function(){
$(".bottone").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active");
});
});
I have fixed... I have updated your jsfiddle... test it...
your code is now like below...
$(document).ready(function(){
$("#triangolo").click(function(){
$("#top-bg").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
You can also fix this issue by changing below code
<div id="triangolo">
</div>
with
<a href="#" class="bottone"><div id="triangolo">
</div></a>

Categories

Resources