I have 3 div's.
Has a next button
Has a back and a next button
Has a back and submit button
jQuery
$('.next').click(function() {
//hide parent and show next
$(this).parent().hide().next().show();
});
$('.back').click(function() {
//hide parent and show previous
$(this).parent().hide().prev().show();
});
The 2nd page just appears for a few milliseconds and then goes back to the first one.. is it deprecated?
You could be submitting the page try preventing the event.
$('.next').click(function(e){
e.preventDefault();
$(this).parent().hide().next().show();
//hide parent and show next
});
//your othe codes
Related
i have an appointments plugin with an option to select particular days in a checkbox manner. I have added a custom validation for the field. Everything works fine. when we click next and reaches next step there is a back button. When we click on the back button it takes to the form without refreshing the data so MY CUSTOM VALIDATION on days is not working.
Here is my code,
jQuery(document).ready(function(){
setTimeout(function(){
jQuery(".ladda-button").attr('onclick','oniter()');
},1750);
});
function oniter(){
if (jQuery(".valid").find(".active").length>=1) {
alert(123);
} else {
jQuery('.removeval').remove();
jQuery(".validation_text").append("<font class='removeval'>Please Select a Day</font>");
}
jQuery(".valid").on ('change',function(){
jQuery(".validation_text").remove();
});
}
This is how my validation works. I want to trigger the entire process when the back button is clicked to ensure the validation occurs . How to do this any idea?
jQuery(document).ready(function(){
jQuery(document).on('click','.ladda-button',function(){
oniter();
});
});
function oniter(){
if (jQuery(".valid").find(".active").length>=1) {
alert(123);
} else {
jQuery('.removeval').remove();
jQuery(".validation_text").append("<font class='removeval'>Please Select a Day</font>");
}
jQuery(".valid").on ('change',function(){
jQuery(".validation_text").remove();
});
}
Your form's back button should have some class or ID, right?
So just trigger same setTimeout when back button is clicked.
f.e.
jQuery(document).on('click','.back-button',function(){
setTimeout(function(){
jQuery(".ladda-button").attr('onclick','oniter()');
},1750);
});
What I am trying to do is to prevent the user from changing the radio button until they confirm that they want to leave the "page". The radio button should not change to the one they clicked until after they click on the button in the popup to say "ok leave page".
This call handles changing the page to the selected radio button, and everything else. This should only be fired if the button in the popup is clicked:
$("body").on("change", "input[type='radio'][name='quote-type']:checked", function(e){
//Change the radio button and everything else
});
This handles the popup and everything:
$(function(){
var LEAVEPAGE;
//Radio button changes, so show a popup
$("body").on("change", ".coverage-options-wrapper li:not(.custom) input[type='radio'][name='quote-type']", function(e){
e.preventDefault();
e.stopPropagation();
LEAVEPAGE = e.currentTarget;
//Show the popup to ask if you are sure you want to switch radio buttons
});
//Click the button in the popup to leave the page, so change the originally clicked radio button.
$("body").unbind("click").on("click", ".leave-page", function(){
$(LEAVEPAGE).prop("checked", true).trigger("change"); //triggers change for the first call to be run, to actually change the page
});
});
What is happening is the radio button is just being changed regardless, it shows the popup too, however it isn't waiting for a response from the popup. It just switches anyways. Also, when I click on the .leave-page button, it triggers change (it's suppose to be so that it will load the new page attributed to that button), however it ALSO triggers the popup again (as they both use the change event).
I am very stumped.
DEMO
JS
var optionTarget;
$(":radio").click(function(e){
e.preventDefault();
optionTarget = e.target;
$("#leave-dialog").show();
});
$("#leave-dialog button").click(function(){
$("#leave-dialog").hide();
});
$("#leave-btn").click(function(){
$(optionTarget).prop('checked', true);
});
HTML
<input type="radio" name="bleh" value="yes" checked>option 1
<input type="radio" name="bleh" value="no">option 2
<div id="leave-dialog">Are you sure?
<br/>
<button id="leave-btn">Yes</button>
<button>No</button>
</div>
$(".clickPlan").click(function(){
$(".panel1").animate({left:'0px'});
});
$(".sendBtn").click(function(){
$(".panel1").animate({left:'300px'});
});
$(document).click(function() {
$('.panelBox').fadeOut('fast');
});
$(".clickPlan").click(function(e) {
e.stopPropagation();
});
Fiddle here:
http://jsfiddle.net/stupaul22/qV246/5/
I am close. This is the functionality I want.
Click "SHOW PANEL" animates the panel onto the screen.
You can enter name and email without making the panel disappear.
Clicking "SEND" animates the panel off to the right.
Clicking anywhere outside the panel and outside "SHOW PANEL" makes the panel fade.
After a fade --> Click "SHOW PANEL" animates the panel onto the screen FROM LEFT.
You could try adding a click handler to the .panel1 class and stop the event from propagating to the click handler that's on your document.
// will stop the event from reaching the $(document).click handler
$(".panel1").click(function(e){
e.stopPropagation();
})
http://jsfiddle.net/qV246/6/
I'm using simple DropIt jquery dropdowns - http://dev7studios.com/dropit/
I want to have the submenu box stay open unless clicked outside of the box (.dropit-submenu)
I'm planning to have a form input in dropdown but whenever i click input inside dropdown the whole dropdown closes...
line 40 of js is showing this
// Close if outside click
$(document).on('click', function() {
settings.beforeHide.call(this);
$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
settings.afterHide.call(this);
});
There is a trick if you want to use, on div which is popping up you can write onclick="return false;" so this will not go to call jquery other call and after your form submission you can hide the same div.
// Close if outside click
$(document).on('click', function(e){
if($(e.target).closest('.dropit-submenu').length){ return true; }
settings.beforeHide.call(this);
$('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
settings.afterHide.call(this);
});
I have a user search bar that creates a div containing the relevant users and it disappears when you focus out. However I don't want to focus out if I click on the user list div. Is this possible to achieve?
application.js:
$(function() {
$("#user_header_search_form input").focusout(function() {
$('#header_user_list').html('');
});
});
$('#header_user_list').html(''); I don't want to run this link if the user clicks '#header_user_list'
An alternativa approach may be:
$(document).click(function(event){
var clicked = $(event.target);
//if the clicked element is not son of the input or the list, clear the list.
if(clicked.closest("#user_header_search_form input,#header_user_list").size() == 0)
$('#header_user_list').html('');
});
Another option is setting a delay before clearing the list. This will work if the user must pick only one item from the list:
$("#user_header_search_form input").focusout(function() {
setTimeout(function(){
$('#header_user_list').html('');
},50);
});
Hope it helps!