Using jQuery to remove html elements from a dropdown - javascript

<script>
$(document).ready(function() {
$('.notification .tools .remove').on('click', function () {
alert('hola');
$(this).parentsUntil('.notification').remove();
});
});
</script>
<div id="notification-list" class="notification-chain" style="display:none">
#foreach ($notifications as $notification)
<div class="notification" style="width:300px">
<div class="tools">
</div>
<div class="notification-messages">
<div class="message-wrapper">
<div class="heading">{{ $notification->name }}</div>
<div class="description">{{ 'User ' .$notification->points_to. ' ' .$notification->content }}</div>
<div class="date pull-left">{{ $notification->created_at }}</div>
</div>
<div class="clearfix"></div>
</div>
</div>
#endforeach
</div>
Hello readers,
Above is currently what I'm working with. It displays a drop-down to hold all notifications a user has received and I currently have an x in the top corner of each "notification" div.
However none of the above jQuery seems to be running. The alert won't display and I get nothing in the console.
Please feel free to ridicule me and tell me what stupid thing I'm doing wrong.
Many thanks.
I appreciate all the help guys.
Here are some laravel.io files with some wider context:
The full html:
http://laravel.io/bin/Nk4xP
js for the dropdown:
http://laravel.io/bin/9vn1O#

Here are some debugging tips:
Think about all the things that might be going wrong, then start ruling them out. For example:
Maybe jQuery is not loaded at all.
Maybe the selector for the event handler is incorrect and jQuery can't find an element to attach the event handler to.
Maybe the code in your $(document).ready() function is not executing, and the event handler is never set up.
Using a combination of changes to your code and the browser console, you can rule these three things out:
Is jQuery loaded? Open the console & type $ - if it says undefined, then that's your problem.
Is the selector for the element incorrect? Open the console and type $('.notification .tools .remove'). If you get an empty array, then that's your problem. As an added bonus, Chrome (and probably other browsers) will highlight the selected element if you mouse over it - this is useful in case you're selecting a different element than you expected.
Is the $(document).ready() code executing? Stick a different alert in there at the top of the function & see if it fires when you reload the page.
It's important to tackle issues like these one at a time - what happens if you change two or more things at once, and the problem goes away (or a new problem arises)? You won't know which one solved or caused the problem!

I was able to make it work in the fiddle below.
I removed the display:none (so I can see the div) and the non html characters. Try looking at the browser console (F12 in linux and windows computers) and see if there are errors. Javascript errors will prevent further code to run.
Also I put a text within the a href tag
remove
https://jsfiddle.net/m9rktusb/

As notification is a class for the div, there should be a dot in front of the class as a selector like this:
$(this).parentsUntil('.notification').remove();
Hope this works.

Luke can you please show us the final HTML?
the code is running perfectly, so the issue should be somewhere else.
https://jsfiddle.net/z7958hx7/1/
$(document).ready(function() {
$('.notification .tools .remove').on('click', function() {
alert('hola');
$(this).parentsUntil('.notification').remove();
});
});

Related

Using Javascript to show and hide a message

I've set up a small script to show and hide a div..
$('.message-head').click(function () {
$('.message-preview').toggle('slow');
});
Works perfectly as it should do. My problem is that I have multiple instances of the html markup on the page, which is inside a foreach loop..
<div class="two-three-col message-head">
<h4>#message.Subject</h4>
<div class="message-preview">
#Html.Raw(#message.Body)
</div>
</div>
This is basically for a messaging system that has been chopped and changed a lot and has been left to me to fix; not being the best at javascript I'm quite stuck. So how can I modify the js so that if I click on say message 1 then only message 1 will show/hide on click and the rest will stay inactive.
Thanks in advance
You can use the this keyword to refer to the element which raised the event. From there you can traverse the DOM to find the related .message-preview element. Try this:
$('.message-head').click(function () {
$(this).find('.message-preview').toggle('slow');
});

Jquery Taphold not working on dragdealerjs slider

I am adding a series of divs with dragdealerjs functionality. The problem is I need to be able to tap and hold the ".handle" div inorder to expose a slider/drawer below it. I have simplified my code down to get to the root of the problem. I am appending the ".innerGroup" div to the ".groups" div.
HTML:
<div class="groups scroll">
<div class="innerGroup">
<div id="demo-simple-slider1" class="dragdealer">
<div class="igIcon1"></div>
<div class="handle"></div>
</div>
</div>
</div>
Javascript:
This code doesn't work,
$(document).on('taphold', '.handle', function() {
alert('Tapped');
});
This code does work though,
$(document).on('click', '.handle', function() {
alert('Tapped');
});
I know there are several other similar answers to this one here but I fear that drag dealer may be complicating the issue. I also think the problem is related to adding the innerGroup after the DOM has loaded. Thanks in advance.
The error here is that drag dealer actually takes control of the taphold event. To work around you need to take a two stage check with a 750 millisecond time out (same as a standard taphold) and put the distance the slider can move as .49-.51 (or something similar ). If anyone wants the code leave a comment here and ill post what I come up with.
Happy coding

Div is not showing when call a javascript function to show it

I am new in JavaScript & jQuery so, kindly don't mind my very basic question:
I have made the following div which I want to show when certain JavaScript function being called:
<div id='faix' class="bg4 w460 h430 tac poa dpn">
<h4 class="fwb fs22 cf3 mb5 ff3 mt150 ">Thank you John for contacting us!</h4><h4 class="fwb fs22 cf3 mb5 ff3"> We will get in touch with you shortly.</h4>
</div>
but when that function being called and I passed this to that function then the respective div with id of "faix" is not showing up
$('#faix').fadeIn(500);
What am I doing wrong with the above code?
Make sure you have put the
$('#faix').fadeIn(500);
into
$(function() {
$('#faix').fadeIn(500);
});
because it should, wenn jQuery is ready.
Your code is ok; I think you're calling it, when the html isn't build yet. Wrap your code in a $(document).ready:
$(document).ready(function() {
$('#faix').fadeIn(500);
});
try to wrap your code between :
$(function(){
});
and see if your div is hidden using css by the following code for cross browser compatibility:
display:none;
Make sure none of those classes bg4 w460 h430 tac poa dpn says something like display:none !important or visibility:hidden !important or margin-top: -99999px that kind of stuff.
After you make the call, use Inspector (Ctrl+Shift+I) to find the sick div and look at its CSS properties to determine whether it should be visible or something else prevents you from seeing it. Also look at Console to watch for errors, maybe it's in a train of functions and if one fail, subsequent functions fail too.
Check out the basic things like have you imported jquery api, putting it within document.ready function etc.
Also I remember encountering such a problem once due to a div id clashing with possibly a div name in jquery api, so try changing the div name.

Fade in, fade out div with images and text (with jquery)

What I'm trying to do is allow the user to click on a photographer's photo on the portfolioMain page; this will then take them to information about the photographer. When they're done there, they can then click "back," which will then take them back to the portfolioMain.
It use to work perfectly fine but I messed up somewhere in the script or html. So now when I click back, the photographer's information still shows and does not fadeout. Can anyone see what I could I have possibly done wrong?
It seems to be because you have not initialised the document state correctly at the beginning. Otherwise, your code seems to work fine (at least with jQuery 1.6.4).
Here is the working jsFiddle, with the "quick hack" of calling the back link functionality at the start of $(document).ready() to set the state correctly: http://jsfiddle.net/RFra9/1/
Obviously, the way it 'flashes' is not ideal, so you will want to ensure the HTML gets rendered initially with the right elements hidden (set their style attribute to display: none;), and then remove the $(document).ready() call to backToMain().
Does that make sense? Let me know if not.
Oh, and while you are there - technically, <br> should be <br />, and all <img> tags should be self-closing as well (<img ... />) - the one for Vanessa isn't.
EDIT: Okay, after having looked at the page, aside from all the broken image paths (most due to the missing . in the filename), I think the problem with the .portfolioDetail:visible div not fading out correctly is due to your use of floats. Now, I'm no float expert, but I did get the desired behaviour by adding <div style="clear: both;"> to the end of each portfolioDetail div, e.g:
<div id="william" class="portfolioDetail" style="display: none; ">
<div class="quadColumn">
<img src="img/galleryicon2jpg">
</div>
<div class="quadColumn endColumn">
<p>I really enjoyed William's ability to "make scenes come alive". And in our work together, that's exactly what he captured. I thoroughly enjoyed working with William</p>
<p>www.williamchik.com</p>
<br>
<p>Back</p>
</div>
<div style="clear:both;"></div> /* here */
</div>
I'm not sure which CSS framework you are using, as there might be a way to make sure the float is cleared with a special class or something, but adding the div manually (as well as re-binding the $(',back') functionality, I'm not sure why that didn't work with my changes) did fix it for me.
Does that help at all? Try fixing the image paths and add the clearing div on the test site you linked to, and I'll have a look if it still doesn't work.
You should wrap your JavaScript code in:
$(document).ready(function(){
// your code
});

Invoking jQuery function without an element

So, I use jQuery quite extensively and I am well aware of the "right" way to do the below, but there are times where I want to solve it in a more generic way. I'll explain.
So, I may have a link, like this: <a href='menu' class='popup'>Show menu</a>. Now, I have a jQuery function that fires on click for all a.popup that takes the href-attribute and shows the <div id='menu'></div> item (in this case). It also handles URL's if it can't find a DOM item with that ID.
No problem here. But, there are times when I don't have the same control over the coe where I can create a selectable target that way. Either because the code isn't created by me or because it is created through a chain of function that would all need a huge ovrhaul which I won't do.
So, from time to time, I would like to have this code:
Show menu
This would be in a case where I can only submit the label and the HREF for a link. No class, no nothing.
Problem here is that the function popup() has no idea about what element invoked it, and in most cases that's not a problem for me, since I only need to know where the mouse cursor was upon invokation.
But in some cases, I use someone elses jQuery functions, like qTip or something else. so I still want to fire off qTip(); when clicking a link that runs this JS function, but what do I attach it to to make it show? I can't just runt $().qTip(); because that implies $(this) and "this" is undefined inside the function.
So how do I do it? Any ideas?
Is there anyway you change the javascript method to javascript:popup('menu', this);? I've used this method successfully many times.
Instead of referring to "this" try referring to $('a:focus') to refer to the link that was clicked.
Here's a quick and, as #Crescent Fresh would add, dirty (☺) sample:
<body>
<p>Show popup()</p>
<div id="menu" style="display:none">Today's menu</div>
<script type="text/javascript">
function popup(elm) {
$('#' + elm).show();
alert( $('a:focus').text() )
}
</script>
</body>
I tried just ":focus" but IE7 returned too much content. I tested this in FF 3.6.3, IE7, Chrome 4.1.249.1064 (all on Windows) and it seems OK, but I see now (when I was just about to hit "Post Your Answer") this relies on the browser's native support for querySelectorAll - see this jQuery Forum post ":focus selector filter?" and the jQuery.expr entry in the jQuery Source Viewer (where it appears Paul's idea was not implemented).
How about
Show menu
Once you get the event object you can virtually do anything to it.

Categories