I have two functions.
<script type='text/javascript'>
$(function(){
$('form[name=checkout_confirmation]').submit(function(){
var return_value = false;
if (!$('#matc').is(':checked')){
alert(unescape('<?php echo MATC_TERMS_ALERT;?>'));
}else{
return_value = true;
}
return return_value;
});
});
</script>
AND
<script type="text/javascript">
$(function() {
$("#confirmation .btn").click(function(){
$(this).button('loading').delay(100000).queue(function() {
});
});
});
</script>
I need the second function to load when return_value = true;.
Can anyone please help as to how i can merge these two function and run based on the else statement.
Try this, just call the disered block when return_value=true;
$(function () {
$('form[name=checkout_confirmation]').submit(function () {
var return_value = false;
if (!$('#matc').is(':checked')) {
alert(unescape('<?php echo MATC_TERMS_ALERT;?>'));
} else {
// call of the desired block here
$("#confirmation .btn").click(function () {
$(this).button('loading').delay(100000).queue(function () {
});
});
return_value = true;
}
return return_value;
});
});
Just move the second action into the first function where you want the action to take place..
$(function() {
$('form[name=checkout_confirmation]').submit(function() {
var return_value = false;
if (!$('#matc').is(':checked')) {
alert(unescape('<?php echo MATC_TERMS_ALERT;?>'));
} else {
return_value = true;
$(this).button('loading').delay(100000).queue(function() {});
}
return return_value;
});
});
Related
I have script with live filter on page. How to show message when result is empty? For example uses my div.
My script:
$("#country_search").keyup(function () {
var filter = $(this).val().trim().toLowerCase();
$('.country-box.search').each(function () {
if ($(this).find("h4").text().toLowerCase().includes(filter)) {
$(this).show();
} else {
$(this).hide();
}
});
});
<div class="error"> No results </div>
You need to assign variable (showError in my code) if any result was found.
// default value: show error message
var showError = true;
$("#country_search").keyup(function () {
var filter = $(this).val().trim().toLowerCase();
$('.country-box.search').each(function () {
if ($(this).find("h4").text().toLowerCase().includes(filter)) {
$(this).show();
// result found, don't show error message
showError = false;
} else {
$(this).hide();
}
});
});
if (showError) {
$('.error').show();
}
It works for me
$("#country_search").keyup(function () {
var filter = $(this).val().trim().toLowerCase();
$('.country-box.search').each(function () {
if ($(this).find("h4").text().toLowerCase().includes(filter)) {
$(this).show();
// result found, don't show error message
showError = false;
}
else if($('.country-box.search:visible').length===0){
$('.error').show();
}
else {
$(this).hide();
$('.error').hide();
}
});
});
I'm working on a quiz. The page can't be closed before submitting the form, otherwise all data will be lost. This can be done using:
window.onbeforeunload = function () {
return "Are you sure?"
}
But what if I don't want to trigger this alert if user clicked on "Submit"? I tried the code below but it doesn't work at all - it doesn't show the alert even if window is being closed.
var clicked_submit = false;
$(document).ready(function () {
$('#submit-button').click(function () {
clicked_submit = true;
});
window.onbeforeunload = function () {
if (clicked_submit){
} else {
return 'Are you sure?'
}
}
});
One simple solution is to just return the function without any value.
var clicked_submit = false;
$(document).ready(function () {
$('#submit-button').click(function () {
clicked_submit = true;
});
window.onbeforeunload = function () {
if (clicked_submit){
return; // equal to return undefined;
} else {
return 'Are you sure?'
}
}
});
A cleaner solution would be, to simply set the window.onbeforeunload to null.
var clicked_submit = false;
$(document).ready(function () {
$('#submit-button').click(function () {
clicked_submit = true;
});
if(!clicked_submit) {
window.onbeforeunload = function () {
return 'Are you sure?'
}
} else {
window.onbeforeunload = null;
}
});
I have an function which I want to bind on some input-tags. You can see two examples in the code-snippet below. the second example works so far but I want to use the function more often so I tried to make it stand alone. You can see the result of my attemp at example one. it doesent work. I did not understand how I have to bind the function and the tag together. Can sombody help?
var tags = [ 'Test', 'noch ein Test', 'Testwort'];
/* Example one: This doesn't work*/
function narrow() {
//var $x = e.data.x;
var isValid = false;
for (i in x) {
if (x[i].toLowerCase().match(this.value.toLowerCase())) {
isValid = true;
}
}
if (!isValid) {
this.value = previousValue
} else {
previousValue = this.value;
}
}
$( "#_id" ).autocomplete({
minLength: 0,
source: tags
});
$('#_id').bind('keyup', {x: tags}, narrow);
/* Example two: This works*/
$( "#_id_2" ).autocomplete({
minLength: 0,
source: tags
}).keyup(function() {
var isValid = false;
for (i in tags) {
if (tags[i].toLowerCase().match(this.value.toLowerCase())) {
isValid = true;
}
}
if (!isValid) {
this.value = previousValue
} else {
previousValue = this.value;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<input id="_id" name="xxx"> <input id="_id_2" name="xxxy">
Change your for-loop in narrow to:
function narrow() {
...
for (i in tags) {
if (tags[i].toLowerCase().match(this.value.toLowerCase())) {
isValid = true;
}
...
and change the keyup-binding to:
$('#_id').bind('keyup', narrow);
you can try with below script:
$('#_id').bind('input keydown mousedown', function() {...});
Hope it resolves your issue.
Thanks
Setting the Selector's:
btNext = $('<a>' + options.labelNext + '</a>').attr("href", "#").addClass("buttonNext");
btPrevious = $('<a>' + options.labelPrevious + '</a>').attr("href", "#").addClass("buttonPrevious");
btFinish = $('<a>' + options.labelFinish + '</a>').attr("href", "#").addClass("buttonFinish");
test = $('<a class="LinkMe" href="#">MotherBoard</a>')
Click():
$(test).click(function () {
showStep(0);
});
$(btNext).click(function () {
if ($(this).hasClass('buttonDisabled')) {
return false;
}
doForwardProgress();
if ($.isFunction(options.onNext)) {
if (!options.onNext.call(this, $(steps))) {
}
}
return false;
});
$(btPrevious).click(function () {
if ($(this).hasClass('buttonDisabled')) {
return false;
}
doBackwardProgress();
if ($.isFunction(options.onPrevious)) {
if (!options.onPrevious.call(this, $(steps))) {
}
}
return false;
});
$(btFinish).click(function () {
if (!$(this).hasClass('buttonDisabled')) {
if ($.isFunction(options.onFinish)) {
if (!options.onFinish.call(this, $(steps))) {
return false;
}
} else {
var frm = obj.parents('form');
if (frm && frm.length) {
frm.submit();
}
}
}
return false;
});
ALL of the click functions work EXCEPT the selector (test), ive tried taking the click function out of the plugin and in a
$(document).ready(function () {});
and it still doesnt work thier, Please help.
Try doing:
test.click(function() {});
or
$("a.LinkMe").click(function() {});
// since test is a link having a class 'LinkMe'
But if those elements are dynamically added into your HTML, you can use .on() or .delegate()
$("a.LinkMe").on("click", function() {});
// OR
$(document).on("click", "a.LinkMe", function() {});
// OR
$("body").delegate("a.LinkMe", "click", function() {});
Take a look at this.
Instead of doing
test = $('<a class="LinkMe" href="#">MotherBoard</a>')
You'll want to do instead
$test = $('a.LinkMe');
// or just
$test = $('.LinkMe');
Same for the btNext, btPrevious, btFinish. I'm not sure why they work, maybe someone else can explain it to me.
When I click on the 'slide-toggle' link, my url turns from mysite.com to mysite.com/#
I was told that I needed to put a 'return false' somewhere in here but I'm not sure where. Can someone kindly help me out?
$(document).ready(function() {
$('a#slide-up').click(function () {
$('.slide-container').slideUp(function(){
$('#slide-toggle').removeClass('active');
});
return false;
});
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
});
});
It would be nicer not to use return false but to use event.preventDefault instead. You can put this at the very top of your event handler:
$('a#slide-toggle').click(function(e) { // note e added as the function's parameter
e.preventDefault();
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
});
This has the same effect as return false, but with the following advantages:
It is semantically more logical -- it does what it says
You can put it at the head of the function, so it is immediately obvious
You can have multiple exit points without having to ensure they are all return false
If any part of your code causes an error, the default action will still be prevented
like this:
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
return false;
});
Probably you need to add the return false also in the $('a#slide-toggle').click() function
$(document).ready(function() {
$('a#slide-up').click(function () {
$('.slide-container').slideUp(function(){
$('#slide-toggle').removeClass('active');
});
return false;
});
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
**return false;**
});
});
I think, it should be like this:
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
return false;
});
You have one at the end of slide-up; add one to the end of slide-toggle.