Jquery toggle command triggers unexpectedly - javascript

I have a webpage which contains one section called 'answer'. The 'answer' section should be hidden until users click the 'show-answer' hyper link.
So I use JQuery toggle command to achieve this:
$('.show-answer').toggle(function() { show_answer ...} ,
function() {hide_answer ...} )
It works well by itself.
However, I got a problem when I add another form on the same page. When the form is submitted, I redirect it to this page with an anchor "#xxx" appended in the end.
Then I found that the toggle function got triggered unexpectedly. Basically, if the 'answer' section is hidden before the form submitted, it becomes visible after the browser is redirected to the page.

May be using a click handler will help you
$(document).ready(function(){
$('.answer').on('click', function(e){
e.preventDefault();
$('.show-answer').toggle('show');
//Or use the following
//$('.show-answer').slideToggle();
});
});
A fiddle is here.

Related

Click button w/ Jquery

I've seen similar questions and if there is one that addresses this question please close this as a duplicate.
Here's what I've got so far:
$("#findOffice").click(function() {
$('.register-location').attr('href', function(i, href) {
$(this)[0].click();
});
});
The idea here being they fill in the input and the submit button is #findOffice. After clicking the submit button a dynamic link is created and attached to a button called .register-location, this is then inserted into the DOM. I've used the $(this).[0].click(); successfully before for this purpose but it's not doing anything this time.
My question is, how upon creation of this dynamic link, can I automatically click this new button and move the user along without them having to do so themselves. Open to other ideas if a better solution exists.
Perhaps the link being dynamically inserted into the DOM is the issue?
This will work with JavaScript, but the Snippets editor here does not allow the window.open method. I'd recommend testing it elsewhere, and it will work there.
var href1 = "https://www.w3schools.com/jsref/met_win_open.asp";
document.getElementById('button').addEventListener('click', function() {
window.open(href1);
});
<button id="button">Click Me!</button>

JQuery alter flow by using alter dialog

I have the following function, if I use the alert dialog the Click section (1) is reached. if I remove the alert dialog the page is posted and the Click section (1) is never reacted. How can I i solve it?
$("#txtInput").change(function () {
alert('...');
$("#btn.ClientID").click(); // Click (1)
});
If you want the change event to call JavaScript function before posting back to the server. Then pass an event object into the function and then use preventDefault(). This stops the default behaviour.
$("#txtInput").change(function (e) {
e.preventDefault();
$("#btn.ClientID").click(); // Click (1) - It's unlikely "btn.ClientID" is the correct name of your button
});

jQuery/ javascript after something has been clicked, then check for something else

I am using a jquery plugin called mmenu to load a side menu when a button has been clicked.
That works fine, but Im also trying to get a hamburger style image going at the same time. I start off with the three lines and then when the menu button pressed it changes into a cross, this seems to work.
my issue comes when trying to close the menu, I want it to return back to a cross. The mmenu allows you to click anywhere to close the menu but I cant get the jquery right to change it back.
I added a class when the button (.menuvate) is clicked, called "active" which displays the cross but no matter how I try I cant get it to check that the class is active when anywhere on the page is clicked after the menu has been opened.
This is my code so far
$('.menuvate').click(function(){
$("#my-menu").trigger("open.mm");
$("#mm-0").addClass("menu-opened");
$("#nav-toggle").addClass("active");
});
$(document).click(function() {
alert("me");
});
I just put an alert in to tell me when this is being fired which of course it does everytime the page is clicked.
How do I get it to check for the active class after the menu has been opened when the page is clicked again so I can remove the class and change it back?
Thank you.
You will want to listen on the custom events to know if the menu is closing or closed.
Basically, what you want is:
$("#my-menu")
.on( "closing.mm", function() {
alert( "The menu has started closing." );
})
.on( "closed.mm", function() {
alert( "The menu has been closed." );
});
Read more on the ones fired by mmenu at http://mmenu.frebsite.nl/documentation/custom-events.html
You can use the jQuery hasClass attribute.
$("#mm-0").hasClass("menu-opened");

JavaScript Restrict User From Clicking Button Multiple Times

I am trying to restrict the user from clicking on a button multiple times. They can click on the button once when the page loads. If the page is reloaded the same should apply the user can click on the button only once.
I am using the following code however it doesn't seem to work for me
$("#doAccess").click(function() {
$("#doAccess").removeAttr('onclick');
DoSave();
});
Disable the button after it's been clicked
var accessBtn = $('#doAccess');
accessBtn.click(function() {
accessBtn[0].disabled = true;
DoSave();
});
Sounds like what you really need is:
$("#doAccess").one('click', DoSave);
jsFiddle example
.one() - Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
Why not this?
$("#doAccess").once('click', function() {
DoSave();
});
You should probably also gray out or disable #doAccess, whatever it is.

Bind click event to 'search' button in Google Custom Search

I am trying to customize a two column Google custom search. I really liked the ajax over iframe which populates a div (default div#cse). But the problem is it pushes the other contents down breaking the page. So I wanted to hide the contents in div#content when 'search' button is clicked and show again when 'reset button is clicked'. To achieve this i tried the to bind a click event handler to the submit button but it didn't work.
$(document).ready(function(){
$("input.gsc-search-button[type=submit]").click(function(){
alert("worked");
//hide div#content
})
})
Then I tried following to check if it binds the event. Though it worked its not what I want. The google api do not provide any such callback.
<input id="click" type="button" value="bind event"/>
$(document).ready(function(){
$("#click").bind('click', function(){
$("input.gsc-search-button[type=submit]").bind('click', function(){
alert("worked");
//hide div#content
})
})
})
Is there any way I can do this?
Thanks.
The search box is created with google js api after window.onload, therefore the .bind() fails. Solved the problem with jquery.live().
$("input.gsc-search-button[type=submit]").live('click',showResults);
$(".gsc-clear-button").live('click', hideResults);

Categories

Resources