How to disable Finish button after first click - javascript

I've tried the various methods that normally work, but it seems SmartWizard is preventing these methods from working.
I need to disable the Finish button and change the text after it is clicked to prevent multiple submissions. No matter where I place the code, the screen does not change, the value of the button does not change, and the button does not disable.
I tried the typical click function...
$(".actionBar .buttonFinish").click(function(){
$(".actionBar .buttonFinish").addClass("buttonDisabled");
$(".actionBar .buttonFinish").text("Sending...");
});
I also tried using this as part of the final step validation and in the FinishCallback right before the ajax call. Nothing changes until AFTER the ajax call is completed and the ajax success runs.
UPDATE
Ok, this is for sure a timing issue. If I cause the ajax call to fail, the button disables and the text changes. I need to make sure these two things occur before moving on to the ajax call. So far, I tried this but it did not work:
$(".actionBar .buttonFinish").addClass("buttonDisabled").text("Sending...").ajax({

$(".actionBar .buttonFinish").click(function(){
$(".actionBar .buttonFinish").attr('disabled', 'disabled');
$(".actionBar .buttonFinish").text("Sending...");
});

you can add this at the end of the 'onclick' event to disable the button
$(this).prop( "disabled", true );
OR
$(this).attr("disabled", 'disabled');
you need to use the function 'prop' or 'attr' depending on the jquery version

Try this.
$(document).ready(function(){
$(function(){
$(".buttonFinish").on("click", function(){
$(this).prop('disabled', true);
$(this).val("Sending...");
});
});
});
input{
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div>
<form>
<input type="text">
<input type="text">
<input class="buttonFinish" type="submit">
</form>
</div>
UPDATE
Let me see if I understood you, you want to disable the button and the text before ajax call? You've tried with beforeSend?
$(document).ready(function(){
$(function(){
$("form").submit(function(e){
e.preventDefault();
$.ajax({
beforeSend: function(){
$(".buttonFinish").prop('disabled', true);
$(".buttonFinish").val("Sending...");
},
complete: function(){
// remove disabled and change the text
},
});
});
});
});
input{
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div>
<form>
<input type="text">
<input type="text">
<input class="buttonFinish" type="submit">
</form>
</div>

Since your .buttonFinish is a link, not actually a button, you can't disable it with .prop('disabled', true) — you may want to use a "blocking pane" instead.
Put a div at the very end of your page, I prefer just before the </body> tag, that contains nothing and is unseen, off the page and with no height and width.
<div id="blocker"></div>
</body>
When the "button" is clicked then add a class on it that will make it show, using the full height/width of the page and with a high z-index so it is "in front" of everything else; it will get all the clicks which won't pass through to the controls underneath it as a lower z-index.
Your click handler would include $('blocker').addClass('blocking'); giving the resulting DOM ...
<div id="blocker" class="blocking"></div>
</body>
Use CSS to style #blocker so it is unseen, then style #blocker.blocking so it blocks the rest of the page.
$('a.finished').click(function(e) {
e.preventDefault();
$('#blocker').addClass('blocking');
// when ajax call finishes,
// use $('#blocker').removeClass('blocking');
});
#blocker {
position: fixed;
top: -10px;
left: -10px;
height: 0;
width: 0;
z-index: -20;
background-color: white;
}
#blocker.blocking {
height: auto;
width: auto;
bottom: -10px;
right: -10px;
opacity: 0.6;
z-index: 9000;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<div class="stuff">
<p>This is stuff</p>
<p>This is other stuff</p>
<p>A link is in here.</p>
</div>
<div id="blocker"></div>

Try this
<input type='button' id='btn' onclick='click_me()' value='click'>
var disable = false;
function click_me()
{
if(disable = 'false') {
$(".actionBar .buttonFinish").addClass("buttonDisabled");
$(".actionBar .buttonFinish").text("Sending...");
disable = true;
}
}

Related

Click button to show div, then remove button

I have managed to create a button that shows my div. but I want to have the button disappear as that happens.
At the moment my button only disappears the second time I click it. Any help appreciated.
$(document).ready(function() {
$('.click').click(function() {
$('#contact-form').toggle('slide', 500)
$('.click').toggle();
});
});
.click {
display: block;
}
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form"></div>
The reason why it is not working is, you are mixing the display between CSS and JavaScript. jQuery uses the current inline style to check if the button is hidden to display it, when you use .toggle(). Since it doesn't have anything at first, it adds a display: block (or whatever the initial value is) and then when you do the second time, it correctly identifies and removes.
The best thing to do is to use classes. I would suggest something like this parent class.
$(document).ready(function() {
$('.click').click(function() {
$("body").toggleClass("contact-form-open");
});
});
.contact-form-open .click,
#contact-form {
display: none;
}
.contact-form-open #contact-form {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>
This way, you control everything using CSS and you don't mess up with the event listeners or add the yucky inline CSS.
I've tried what you've tried and it seems to be working. Maybe it's because you don't close the div tag ?
$(function() {
$('.click').click(function() {
$('.myDiv').toggle();
$('.click').toggle();
})
});
http://plnkr.co/edit/wD0bwf8XK3CFXXM7rVWF?p=preview
but I want to have the button disappear as that happens.
So just use hide() instead of toggle :
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
Hope this helps.
$(document).ready(function() {
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
});
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form">Form content</div>
More easy:
$(document).ready(function() {
$('.click').click(function() {
$("#contact-form").show();
$(this).remove();
});
});
#contact-form{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>

How can I hide my div using jQuery, and then showing it again by pressing a different div?

What I want to do is:
Make my div hidden when the page loads, and then when you click a different div it will show. My limited knowledge doesn't really allow me to make this happen. What am I doing wrong?
jQuery:
$(document).ready(function(){
$('#trojkat2').click(function(){
$('#login').hide();
});
});
</script>
"trojkat2" is the div I want to click to make "login" appear.
HTML:
<div class="kwadrat2">
<div class="trojkat2">
<div class="trojkat_bg2"></div>
</div>
</div>
<div class="login">
<img style="height: 550px; width: 280px; border-radius: 10px;" src="buymenu.jpg">
</div>
What have I done wrong?
First, hide your #login div when document ready by .hide() function, after click $(.trojkat2), use show() to make #login appear, by the way class selector is . instead of #
$(document).ready(function(){
$('.login').hide();
$('.trojkat2').click(function(){
$('.login').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="kwadrat2">
<div class="trojkat2">click here
<div class="trojkat_bg2"></div>
</div>
</div>
<div class="login">
<img style="height: 550px; width: 280px; border-radius: 10px;" src="buymenu.jpg">
</div>
Try this:
$('.trojkat2').click(function() {
$('.login').show();
});
Your example doesn't have an element with id = trojkat2 so your selector $("#trojkat2") won't work. Same is for #login. Instead you need to change it to a class selector :
$('.trojkat2').click(function(){
$('.login').hide();
});
Example : http://jsfiddle.net/DinoMyte/nrNX8/529/
In your HTML code, you created classes called login and trojkat2. However, in your jQuery, you are telling it to call the IDs called login and trojkat2. Classes are preceded with a "." and IDs are preceded with a "#". Instead, try the following code in your jQuery:
$(document).ready(function(){
$('.trojkat2').click(function(){
$('.login').hide();
});
});

How can I focus an input that's sliding in from off the screen?

I have an element (#cols) that's 3x wider than the <body>. It has 3 columns, each of which is exactly as wide as <body>. Clicking a button slides the #cols element over by the width of one column and simultaneously focuses the <input> in the column that's sliding into view:
http://jsbin.com/puhurakewa/1/edit?html,css,js,output
The problem, as you can see from the demo, is that focusing the input causes weird behavior. I believe the browser says,
"Crap, the user focused an input that's off-screen. I need to show it!"
and then magically scrolls the input into view. This breaks the transition.
Is there a way to disable this behavior? It's extremely undesirable. I've noticed it in Chrome, Safari, and Firefox on my Mac.
EDIT: Thank you for the answers so far. I should have been more specific with my question. I'm aware that I can "work around" this issue by waiting for the animation to end, but what I'm curious about is how to work through this issue and focus the input immediately. It's a better experience, because users can begin typing before the transition is over.
Add the focus event after transition ends
$('#cols').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
$input.focus();
});
JSbin Demo
Since you already using Jquery might as well leverage the animate method, then on the complete function you focus the input, for more info check out the docs
Heres the JS (this works perfectly, but spend some time neatening it up/refactoring if you wish):
$(document).ready(function () {
$('button').on('click', function () {
var colId = $('.showing').attr('id');
if(colId == "col-1"){
$('#cols').animate({
right: '200px'
}, 1000, "swing", function(){
$("#col-2").find('input').focus();
$('#col-1').removeClass('showing');
$('#col-2').addClass('showing');
});
}
else if(colId == "col-2"){
$('#cols').animate({
right: '400px'
}, 1000, "swing", function(){
$("#col-3").find('input').focus();
$('#col-2').removeClass('showing');
$('#col-3').addClass('showing');
});
}
else if(colId == "col-3"){
$('#cols').animate({
right: '0px'
}, 1000, "swing", function(){
$("#col-1").find('input').focus();
$('#col-3').removeClass('showing');
$('#col-1').addClass('showing');
});
}
});
});
Then change your CSS to position relative like so:
#cols {
height: 100%;
transition: transform 400ms;
white-space: nowrap;
width: 600px;
position:relative;
}
HTML (just add 'showing' class to first col):
<body>
<button>Shift Cols & Focus Input</button>
<div id="cols" col-to-show="1" >
<div class="col showing" id="col-1">
<input type="text" value="1" />
</div>
<div class="col" id="col-2">
<input type="text" value="2" />
</div>
<div class="col" id="col-3">
<input type="text" value="3" />
</div>
</div>
</body>
Here's a fiddle
magically scrolls the input into view
This is the key. Just change scrollLeft of the container to 0 after focusing. I had to put a wrapper around it though.
http://jsbin.com/danarucama/1/edit?html,css,js,output

How to catch any click event in jquery [duplicate]

This question already has answers here:
jQuery click() event catch-all?
(2 answers)
Closed 9 years ago.
I have a button, when it's clicked, shows a div with images(like an emoticon panel of a chat) if I click it again the div hides, but what I want to do is:
If the div is already showed up and then I click any other thing of the page, I want to hide it. I tried this:
$("myBtn").click(function(){
// show div
});
$(document).click(function(){
// hide div
});
When "myBtn" is clicked, the div shows up and hide automatically. How could I fix it ?
Thank you for your time.
You could try the following:
$(document).on('click', function(evt) {
if(!$(evt.target).is('#my-id')) {
//Hide
}
});
UPDATE
Just so you can have a full working set:
$('#mybutton').on('click', function(evt) {
$('#mydiv').show();
return false;//Returning false prevents the event from continuing up the chain
});
At the same time you show your original <div>, add a new <div> to your page that has a style/css set like this:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 100;
}
Make sure the original <div> -- the one you want to be able to click on without closing it -- has a higher z-index, but everything else on the page has a lower z-index.
When you add the new div to your page, give it the .ui-widget-overlay class, and add a click handler to intercept clicks on that <div>. Adding the overlay div with the click handler looks like this:
$('<div class="ui-widget-overlay">')
.click(function() {
$('.ui-widget-overlay').remove();
$('selector-for-original-div').hide();
})
.appendTo('body');
The upshot of all this: You have two divs. The first is what you want to display and allow users to click in without closing it, the second is an invisible div underneath the first taking up the entire browser window so that if the user clicks anywhere but the upper div, it intercepts the click event. Inside that click event, you remove the hidden div and hide the original.
updated
Assuming that you have a class 'active' to the element when it shows, it would be:
$('html').click(function(e){
if(!$(e.target).attr("id") == "my-id") {
}
});
<script type="text/javascript">
$('body').click(function() {
if($("div").is(':visible')){
$("div").hide();
}
});
</script>
the $("div") selector here should be your div that is either has id or class for example: if the <div class="class" id="id"> then $("div") will be changed to $("div.class") or $("div#id")
<div class="slControlWrapper">
<div class="slControlLabel">
<asp:Label ID="lblSL" CssClass="lblSL" runat="server">Clickable Label</asp:Label>
</div>
<div class="slControlSeparator">
</div>
<div class="slControlDropDown">
</div>
<div id="wndSL">
This is the hidden content of my DIV Window
</div>
<div id="test">
I am for test click on me
</div>
</div>
$('.slControlLabel, .slControlDropDown').bind('click',function(event){
$('#wndSL').show();
event.stopPropagation();
});
$('html').click(function() {
$('#wndSL').hide();
});
#wndSL {
display:none; background-color: blue; height:500px; width:590px;
}
Have a gander here:
http://jsfiddle.net/nCZmz/26/

inserting divs with javascript

i have the following code that i was hoping would allow me to click a button and add another box to the page but inj stread it just resets the page every time i click one of the buttons
<style>
div.box
{
width: 50px;
height: 50px;
background-image: url("Images/smallBox.jpg");
}
div.largeBox
{
width: 100px;
height: 100px;
background-image: url("Images/largeBox.jpg");
}
</style>
<script type="text/javascript">
$(function () {
setupDragging();
});
function setupDragging() {
$(".box").draggable({ snap: true });
$(".largeBox").draggable({ snap: true });
}
function addSmallBox() {
var boxArea = document.getElementById('boxArea');
var newBox = document.createElement('div');
newBox.setAttribute('class', 'box');
boxArea.appendChild(newBox);
setupDragging();
}
function addLargeBox() {
var boxArea = document.getElementById('boxArea');
var newBox = document.createElement('div');
newBox.setAttribute('class', 'largeBox');
boxArea.appendChild(newBox);
setupDragging();
}
</script>
<form>
<button onclick="addSmallBox();">small box</button>
<button onclick="addLargeBox();">large box</button>
</form>
<div id="boxArea">
</div>
please can somebody let me know what i am doing wrong and how i can achieve what i want.
ANSWER:
just an update on the final result
<style>
div.box
{
width: 50px;
height: 50px;
background-image: url("../Images/smallBox.jpg");
position: absolute;
}
div.largeBox
{
width: 100px;
height: 100px;
background-image: url("../Images/largeBox.jpg");
position: absolute;
}
</style>
<script type="text/javascript">
$(function () {
setupDragging();
$('.addBox').click(function(e){
if($(this).hasClass('smallBox')) addSmallBox();
else if($(this).hasClass('largeBox')) addLargeBox();
e.preventDefault();
})
});
function setupDragging() {
$(".box").draggable({ snap: true });
$(".largeBox").draggable({ snap: true });
}
function addSmallBox() {
$('<div>', { class: 'box' }).appendTo('#boxArea')
setupDragging();
}
function addLargeBox() {
$('<div>', { class: 'largeBox' }).appendTo('#boxArea')
setupDragging();
}
</script>
<form>
<button class='addBox smallBox'>small box</button>
<button class='addBox largeBox'>large box</button>
</form>
<div id="boxArea">
</div>
i made use of several of the answers below and this was the final result but went down the html5 route in the end.
First of all, since you are using jQuery, if I were you, I would not use the onclick attribute in your button. Instead, add an event listener like so:
$('button').click(function(){
addLargeBox();
return false;
});
OR
$('button').click(function(e){
addLargeBox();
e.preventDefault();
});
Both of which will prevent the user's browser from following the link but will execute the JavaScript as you want.
Also, since you require two different functions to be executed depending on which button is clicked, you should probably add a class or id to differentiate the two.
Your markup would then look like this:
<button class="add-box">small box</button>
<button class="add-box large-box">large box</button>
And your JavaScript would be:
$('.add-box').click(function(){
if ($(this).hasClass('large-box')) addLargeBox();
else addSmallBox();
return false;
});
The button tag you are using is a HTML5 version of a form submit button which causes a page refresh.
Change the buttons to:
<input type="button" onclick="addSmallBox();" value="small box" />
Or put return false at the bottom of each of your javascript functions.
Couple of things:
Always separate JS from code (that means lose the onclick attributes and bind them in javascript instead.)
The form is still being submitted; have your functions return false/preventDefault (jQuery) to avoid this.
Some hints:
Since you're already using jQuery, why not build html elements with it? ($('<div>',{class:'box'}).appendTo('#boxArea') for instance)
You have to return false from the click event to prevent the default browser behavior of following the link.
I'm not sure why just by glancing at the code, but perhaps you could try retrieving the boxArea.InnerHTML, appending the appropriate HTML string to it, and setting the boxArea.InnerHTML to the result.
Something like:
boxArea.InnerHTML = boxArea.InnerHTML + "<div class='largeBox'></div>";

Categories