Search jQuery

jQuery Forum

Getting Started

Ladan

search button interference

in Getting Started • 10 months ago

Hey, I can't seem to unbind my search button with the function I added

<script>
$(document).ready(function() {
$("searchButton").click(function() {
$(this).slideToggle();
});
$("searchButton").click(function() {
$("searchButton").unbind();
});
});
</script>

It is interfering with the function to my blog archive buttons

<script>
$('button').each(function() {
/* "each" in jQuery lets us apply what's inside here to each button individually without having to give them each their own names. Imagine this code going down the line and repeating everything below for each of the buttons. */
var $thisButton = $(this);
/* To refer to the individual button inside of this section we can use $(this), but to try and make the rest of this more clear, I'm going to rename $(this) to $thisButton */
$thisButton.click(function() {
var $thisButtonsDropdown = $thisButton.siblings();
/* Sibling here means "on the same level as the button." We need to do this to find the section of months or links that matches this button we clicked, so that we slide up/down the right one--the one we want is the one that is next to it, its sibling. */
/* This part should be a little familiar! */
if ($thisButtonsDropdown.is(':visible')) {
$thisButtonsDropdown.slideUp();
$thisButton.removeClass('flip');
} else {
$thisButtonsDropdown.slideDown();
$thisButton.addClass('flip');
}
});
});
</script>

As Firefox's Inspect Element shows. What should I do?

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Replies(42)

Ladan

Re: search button interference

10 months ago

Same thing is happening to the buttons on my calendar. They have the click event of my blog archive buttons attached to it for some reason.

/* Start JS Calendar */
.calendar-wrapper {
width:175px;
height:175px;
margin:3em auto;
margin-left:20px;
padding:2em;
border:0px solid @calendar-border;
border-radius:5px;
background:none;
position:absolute;
top:0px;
left:20px;
z-index:100;
cursor:text;
}
table {
clear:both;
width:208px;
height:100px;
border:5px double #000;
border-radius:0px;
border-collapse:collapse;
color:@calendar-color;
background:white;
position:absolute;
top:0px;
left:0px;
cursor:text;
}
td {
font-family:Overpass, Arial, Verdana, Trebuchet MS, Segoe UI, Lucida Sans;
height:8px;
text-align:center;
vertical-align:middle;
border-right:1px solid black;
border-top:1px solid black;
width:100% / 7;
cursor:text;
}
td.not-current {
color:#ccc;
font-family:Overpass, Arial, Verdana, Trebuchet MS, Segoe UI, Lucida Sans;
cursor:text;
font-size:17px;
}
td.normal {}
td.today {
font-weight:bold;
color:#98d6e3;
font-family:Overpass, Arial, Verdana, Trebuchet MS, Segoe UI, Lucida Sans;
text-shadow:none;
cursor:text;
}
thead td {
border:none;
color:#6871b8;
text-transform:capitalize;
text-shadow:0px 2px 1px #aaa;
font-size:1.2em;
font-family:Overpass, Arial, Verdana, Trebuchet MS, Segoe UI, Lucida Sans;
background:rgba(255, 255, 255, 1);
padding-left:6px;
padding-right:6px;
padding-top:3px;
width:275px;
cursor:text;
z-index:0px;
}
#btnPrev {
background:none;
border:none;
color:rgba(153, 159, 207, 1);
font-family:Laila, Segoe UI Light, Arial, Segoe UI, Georgia, Verdana;
font-weight:normal;
font-size:1em;
float:left;
margin-bottom:20px;
position:absolute;
top:10px;
left:29px;
z-index:250;
}
#btnNext {
background:none;
border:none;
color:rgba(153, 159, 207, 1);
font-family:Laila, Segoe UI Light, Arial, Segoe UI, Georgia, Verdana;
font-weight:normal;
font-size:1em;
float:right;
margin-bottom:20px;
position:absolute;
top:10px;
left:227px;
z-index:250;
}
#btnPrev:hover {
border:none;
outline:none;
font-size:1em;
cursor:pointer;
font-family:Laila, Segoe UI Light, Arial, Segoe UI, Georgia, Verdana;
text-shadow:0px 0px 2px #fff, 0px 0px 2px #fff;
text-transform:none;
transition:all 0.3s ease;
color:white;
z-index:100;
}
#btnNext:hover {
border:none;
outline:none;
font-size:1em;
cursor:pointer;
font-family:Laila, Arial, Segoe UI, Georgia, Verdana;
text-shadow:0px 0px 2px #fff, 0px 0px 2px #fff;
text-transform:none;
transition:all 0.3s ease;
color:white;
z-index:100;
}
.days {
color:#7b6f7d;
background:#fff;
cursor:text;
font-family:Overpass, Arial, Verdana, Trebuchet MS, Segoe UI, Lucida Sans;
}
/* End JS Calendar */

<div class="calendar-wrapper">
<button id="btnPrev" type="button">⟢</button>
<button id="btnNext" type="button">⟣</button>
<div id="divCal"></div>
</div>

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

Is there anything that I can read into that explains about this problem?

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

watusiware

Re: search button interference

10 months ago

You haven't posted any HTML. How are we to guess?

Nor have you said what you are trying to accomplish.

A few things do immediately pop out:

$("searchButton").click

implies you have a:

in your HTML.

I think that's unlikely. Did you mean to use a class (.) or ID (#) selector?

There's no need for two .click callbacks. You could combine them. But this is not causing your problem.

.unbind() is deprecated. It will work - for now - but it will be removed from a future version of jQuery. You should use .off() instead.

----

If, in fact, you actually have:

you might write:

$("#searchButton").click(function() {
$(this).slideToggle().off();
});

The first time the user clicks on the search button, it will be hidden with a slidetoggle effect. And then the user will not be able to click the button again. (Well, of course, it can't be clicked while hidden. But the .off() does prevent clicking again while the slidetoggle animation is running.)

I can't guess, though, if that is what you wanted to accomplish.

Ladan

Re: search button interference

10 months ago

I'm trying to figure out why my search button and calendar buttons are interfering with my blog archive buttons. For some reason they are using the same jQuery that is from my blog archive buttons. I have shared the related HTML.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

<searchButton>

Is my class name I have given to my search button here :

<div class="search">
<input type="text" class="searchTerm" placeholder="search blog" onfocus="this.placeholder=''" onblur="this.placeholder='search blog'">
<button type="submit" class="searchButton" value"">
<i class="fa fa-search" style="filter: drop-shadow(3px 3px 3px #000); padding-bottom:4.5px; padding-left:0px;"></i>
</button>
</div>

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

watusiware

Re: search button interference

10 months ago

It is always best to make a jsFiddle, rather than posting code to the forum. That way we can see a COMPLETE example, and try it ourselves.

<button type="submit" class="searchButton" value"">

Then you need to use a class selector:

$(".searchButton").click...

If you should happen to have more than one node with class="searchButton", your code will effect ALL of them.

Maybe that is what you mean by "interference".

In that case, use a unique ID for the particular button you want to deal with. And use an ID selector instead of a class selector then.

watusiware

Re: search button interference

10 months ago

p.s. The code you posted can't possibly "interfere" with anything. It sets up a click handler for <searchButton>, which you apparently do not have in your HTML.

In other words, as currently written - the code does nothing!

You are likely looking in the wrong place for the troublesome code.

Ladan

Re: search button interference

10 months ago

Ok. I don't want it to do anything really. But when I click on it to do something, as it is doing, it activates the slideToggle function which shouldn't. You can see it in Firefox's Inspector. It shows an event.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

The event is showing this :

<script>
$('button').each(function() {
/* "each" in jQuery lets us apply what's inside here to each button individually without having to give them each their own names. Imagine this code going down the line and repeating everything below for each of the buttons. */
var $thisButton = $(this);
/* To refer to the individual button inside of this section we can use $(this), but to try and make the rest of this more clear, I'm going to rename $(this) to $thisButton */
$thisButton.click(function() {
var $thisButtonsDropdown = $thisButton.siblings();
/* Sibling here means "on the same level as the button." We need to do this to find the section of months or links that matches this button we clicked, so that we slide up/down the right one--the one we want is the one that is next to it, its sibling. */
/* This part should be a little familiar! */
if ($thisButtonsDropdown.is(':visible')) {
$thisButtonsDropdown.slideUp();
$thisButton.removeClass('flip');
} else {
$thisButtonsDropdown.slideDown();
$thisButton.addClass('flip');
}
});
});
</script>

This is the jQuery to my blog archive's buttons. I want to remove this from the search and calendar buttons.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

watusiware

Re: search button interference

10 months ago

One more thing, first, about the little bit of your HTML that you did share: I notice your search button has type="submit". Remove that - that's for submitting a form. You don't even have a form.

----

$('button').each(function() { ... });

registers a callback for EVERY button on your page. This is probably not what you want!

Add some class to those buttons that you DO want this code to affect.

BTW, you do not need to use .each() though. You can code like:

<script>
$('.blogArchiveButton').click(function() {
var $thisButton = $(this);
var $thisButtonsDropdown = $thisButton.siblings();
if ($thisButtonsDropdown.is(':visible')) {
$thisButtonsDropdown.slideUp();
$thisButton.removeClass('flip');
} else {
$thisButtonsDropdown.slideDown();
$thisButton.addClass('flip');
}
});
</script>

Add class='blogArchiveButton' to each of your blog archive buttons.

Alternately, you could also code:

$(document).on('click', 'blogArchiveButton', function() ... });

This is called "delegation". This registers a SINGLE click callback, which will "catch" events on all of the buttons of interest. In fact, with this code, you don't even need to enclose it in $(document).ready().

The first code I posted (using .click() ) will register one click callback for each of the buttons of interest.

----

Where are you learning jQuery from? I suggest the jQuery Learning Center:

https://learn.jquery.com/

and then also refer to the API documentation when you want more details, like:

https://api.jquery.com/on/

I ask because it seems to me you may be using some outdated learning material.

watusiware

Re: search button interference

10 months ago

Sorry, please refresh the forum page, since I made edits in the post just above! (In case I edited after you started reading...)

Ladan

Re: search button interference

10 months ago

Hi watusiware. I'm learning jQuery from various sources really. One is the w3cschools, another is Stack Overflow, then some from here, jQuery.com .

I'm using the each() function since it's easier rather than repeating it for every button. It's a shorthand, so I like it much better. I used to repeat the same code for my archive buttons, and had different classes/ID's for each, and that was a huge headache.

$('button').each(function() { ... });

registers a callback for EVERY button on your page. This is probably not what you want!

Add some class to those buttons that you DO want this code to affect.

You're right, this is not what I want. So, where would I add the class? I will certainly remove the type="submit" to the search button. Should I also remove the value since I have none?

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

I already have class names to my archive buttons, so maybe an ID would be better.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

watusiware

Re: search button interference

10 months ago

YOU DO NOT NEED TO USE .each()! Nor do you have to repeat code for each button.

Look at the code I showed you above.

A node can have zero, one, or more classes. A node (should) have only zero or 1 ID.

Add some additional class - like blogArchiveButton - to EACH of the buttons you want to register some common callback for.

Now:

$('.blogArchiveButton').click(function() { ... });

will register a callback for BOTH of these buttons.

Or you could also code:

$(document).on('click', 'blogArchiveButton', function(){ ... });

You should step back and study more about how jQuery selectors work. Especially for the case where a selector selects more than one node.

https://learn.jquery.com/using-jquery-core/selecting-elements/

Ladan

Re: search button interference

10 months ago

If you'd like, I can share my blog to show you what's going on with this? But seems you have an idea.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

Ok I have replaced the jQuery code to the archive buttons with what you have. One also for my inner buttons (the months). Now my search button is fine. But, when typing in a letter or word in the search box, it will not highlight.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

And my calendar buttons aren't doing Next/Previous months on click

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

Your new function you gave me for the blog archive buttons will not work. It is only working for the first button. I have put it in all the archive buttons, but only that one works.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

watusiware

Re: search button interference

10 months ago

1. One problem at a time, please. Each in a new post.

2. Make a (minimal!) jsFiddle that demonstrates the problem, or share the URL of you blog.

Ladan

Re: Re: search button interference

10 months ago

Ok here you go

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

Ok update on your function that you shared.

$('#blogArchiveButton').click(function() {
var $thisButton = $(this);
var $thisButtonsDropdown = $thisButton.siblings();
if ($thisButtonsDropdown.is(':visible')) {
$thisButtonsDropdown.slideUp();
$thisButton.removeClass('flip');
} else {
$thisButtonsDropdown.slideDown();
$thisButton.addClass('flip');
}
});

I have fixed it. I added 2, 3, 4 and 5 for each of em.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

watusiware

Re: search button interference

10 months ago

class='special blogArchivebutton'

not

id='blogArchiveButton'

---

$('.blogArchiveButton').click(function() {

not

$('#blogArchiveButton').click(function() {

---

Please read-up on the differences between IDs and classes.

An ID is supposed to be UNIQUE. If you duplicate an ID in your page, then when you select the ID, jQuery will select only the FIRST one. HTML with duplicate IDs is INVALID HTML.

----

BTW, you should look at the Javascript console in your browser. You have errors displayed in the console.

----

It is best to deal with one concern at a time. Start with a blank page. Add one feature and get it to work. Add the next feature. Make sure it didn't break the first one!

Ladan

Re: search button interference

10 months ago

Thanks, I will look into this and will change to it.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

The class is in use already ( class="special, class="special2"), as I am using those for the count that displays next to the years :

e.g . 2020 (7) < special

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

class='special blogArchivebutton'

not

id='blogArchiveButton'

---

$('.blogArchiveButton').click(function() {

not

$('#blogArchiveButton').click(function() {

Doing this did not work.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

Thanks for your help, I will try to resolve this as best I can with some reading and looking into.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

An ID is supposed to be UNIQUE. If you duplicate an ID in your page, then when you select the ID, jQuery will select only the FIRST one. HTML with duplicate IDs is INVALID HTML.

I usually do have unique ID's, so rarely that's a problem.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

There must be a way to make this all short rather than naming them individually as 1,2,3,4,5. Too much code that way.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

watusiware

Re: search button interference

10 months ago

There must be a way to make this all short rather than naming them individually as 1,2,3,4,5. Too much code that way.

You didn't show us any code with IDs of 1,2,3,4,5 or similar. (Like with trailing numbers, like button1, button2, button3...)

I agree that that's an anti-pattern.

IF you need to select a single node individually, then it's convenient to use a unique ID. But name it meaningfully. Like 'btnBlogNext', 'btnblogPrev'

BUT YOU DO NOT NEED IDS.

At least not for the code for your blog archive buttons. You need to select a collection of nodes - all of the blog archive buttons. The best way to do that is to give the nodes a common CLASS (not ID).

Did you try adding a class like I suggested?

class='special blogArchivebutton'

not

id='blogArchiveButton'

---

$('.blogArchiveButton').click(function() {

not

$('#blogArchiveButton').click(function() {

Ladan

Re: search button interference

10 months ago

Hi watusiware. Yes, I sure did.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

watusiware

Re: search button interference

10 months ago

Yes, I sure did.

Show us what you did.

Ladan

Re: search button interference

10 months ago

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$('.special blogArchiveButton').click(function() {
var $thisButton = $(this);
var $thisButtonsDropdown = $thisButton.siblings();
if ($thisButtonsDropdown.is(':visible')) {
$thisButtonsDropdown.slideUp();
$thisButton.removeClass('flip');
} else {
$thisButtonsDropdown.slideDown();
$thisButton.addClass('flip');
}
});
$('#monthly').click(function() {
var $thisButton = $(this);
var $thisButtonsDropdown = $thisButton.siblings();
if ($thisButtonsDropdown.is(':visible')) {
$thisButtonsDropdown.slideUp();
$thisButton.removeClass('flip');
} else {
$thisButtonsDropdown.slideDown();
$thisButton.addClass('flip');
}
});
</script>

Will share the rest as new message....brb...

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: Re: search button interference

10 months ago

Won't let me post the HTML, it gave me that message yet again...

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

I'm going back to the old code. Seems easier to work with.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

watusiware

Re: search button interference

10 months ago

You did not do what I suggested. Read again:

Wrong:

$('.special blogArchiveButton').click(function() {

Right:

$('.blogArchiveButton').click(function() {

EXACTLY as I wrote above!

The wrong one selects any (for example):

<blogArchiveButton> // <- this is the node that is selected

I suggest you review CSS selection rules:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors

Ladan

Re: search button interference

10 months ago

Will try again. Thanks.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

If I replace

class="special"

With

class="blogArchiveButton"

I may lose the count feature, as that is its class name in this function

<script>
function ci(){ return " <span class='special-count'>("+($(this).next().find('li').length-$(this).next().find('ul').length)+")</span>"}
$(function(){
$(".special").append(ci);
})
function ci2(){ return " <span class='special-count2'>("+$(this).next().find('li').length+")</span>"}
$(function(){
$(".special2").append(ci2);
})
</script>

But I will try.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

I now have

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$('.blogArchiveButton').click(function() {
var $thisButton = $(this);
var $thisButtonsDropdown = $thisButton.siblings();
if ($thisButtonsDropdown.is(':visible')) {
$thisButtonsDropdown.slideUp();
$thisButton.removeClass('flip');
} else {
$thisButtonsDropdown.slideDown();
$thisButton.addClass('flip');
}
});
$('#monthly').click(function() {
var $thisButton = $(this);
var $thisButtonsDropdown = $thisButton.siblings();
if ($thisButtonsDropdown.is(':visible')) {
$thisButtonsDropdown.slideUp();
$thisButton.removeClass('flip');
} else {
$thisButtonsDropdown.slideDown();
$thisButton.addClass('flip');
}
});
</script>

And...

<div class="archiveheader">Blog Archive</div>
<div class="blogarchivewrapper">
<ul>
<li>
<button type="button" class="blogArchiveButton">2020</button>
<ul class="year-inner" id="yr20">
<li>
<button type="button" class="special2" id="monthly">March</button>
<ul class="month-inner" id='Mar20'>
<li>
<a class="bloglinks" href="https://iwriteonwheels.tumblr.com/post/611407624363180032/finishing-touches">Finishing Touches</a>
</li>
</ul>
<li>
<button type="button" class="special2" id="monthly">February</button>
<ul class="month-inner" id='Feb20'>
<li>
<a class="bloglinks" href="https://iwriteonwheels.tumblr.com/post/190948067972/rejoice">Rejoice!</a>
</li>
<li>
<a class="bloglinks" href="https://iwriteonwheels.tumblr.com/post/190824719677/valentinesvampires-day-2020">Valentine's/Vampire's Day 2020</a>
</li>
</ul>
<li>
<button type="button" class="special2" id="monthly">January</button>
<ul class="month-inner" id="Jan20">
<li>
<a class="bloglinks" href="https://iwriteonwheels.tumblr.com/post/190499956887/jquery-to-the-rescue">jQuery to the Rescue</a>
</li>
<li>
<a class="bloglinks" href="https://iwriteonwheels.tumblr.com/post/190422817747/missionaccomplished">Mission Accomplished</a>
</li>
<li>
<a class="bloglinks" href="https://iwriteonwheels.tumblr.com/post/190161104157/tbt-ace-of-base">TBT: Ace of Base</a>
</li>
<li>
<a class="bloglinks" href="https://iwriteonwheels.tumblr.com/post/190002799642/2020">2020</a>
</li>
</ul>
</li>
</ul>
</li>

Just so you see the first part of it so far.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

watusiware

Re: search button interference

10 months ago

No.

Do EXACTLY as I showed. QUIT CHANGING IT!

<button type="button" class="special blogArchiveButton">

You should not use an ID more than once. Now you've added id='monthly' in several places. I don't know what you are doing with that ID or if you actually use it at all. If you need to add some identifier to multiple nodes, use classes, not IDs.

So, you could write:

You can put as many classes as you might like on one node. You separate them with a space.

selectors work differently than class definitions. A space is a "descendant selector". You need to study selectors.

You can combine classes in selectors. If you want to select all of the monthly blog archive buttons, for example:

$('.monthly.blogArchiveButton')

Ladan

Re: search button interference

10 months ago

I don't have an ID. My only ID is #monthly.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

Ladan

Re: search button interference

10 months ago

I'll work on it myself. Thanks again.

"I can only show you the door. You're the one that has to walk
through it." ~ Morpheus The Matrix

watusiware

Re: search button interference

10 months ago

I don't have an ID. My only ID is #monthly.

In the HTML you posted just above, you used the ID monthly on THREE different nodes (3 buttons).

You should only use an ID on ONE node!

If you try to select:

$('#monthly')

it will select only the FIRST of the 3.

If you want to select all three, use a CLASS, not an ID.

It doesn't work the way you think it does. I suggest reviewing selectors, classes, ids, using the MDN link I gave you above.

Top Reply

Response title

Attachments

Replies(42)

Statistics

Tags

Actions