jQuery callback not working properly - javascript

I have the following code and the callback doesn't seem to work properly. My understanding is that if the username is undefined or blank then the #username-error div should show and the error class should be added to the get added to the username input. Only once all of that is done should the alert get fired. However, when I look in my browser, the error div does not show, and the alert gets triggered. So clearly the class 'error' is getting added, and therefore it's reasonable to suggest that the #username-error div is having the .show() function called upon it but it sure does't look like it. Any help you can give me getting the alert to fire only once the #username-error div has appeared would be greatly appreciated.
<script type="text/javascript">
$(document).ready(function() {
$("input[name='username']").bind("blur", function() {
validateUsername(myFunction);
});
$("input[type='submit']").bind("click", function() {
validateUsername(myFunction);
});
$("#username-error").hide();
$("#username-success").hide();
});
function myFunction() {
if ($(".error").length > 0) {
alert("errors on page");
return false;
}
}
function validateUsername(callback) {
var $username = $("input[name='username']");
if (typeof $username.val() === "undefined" || $username.val() === "") {
$("#username-error").show();
$("#username-success").hide();
$username.addClass("error");
} else {
$("#username-error").hide();
$("#username-success").show();
$username.removeClass("error");
}
if (callback) {
callback();
}
}
</script>

You need to add a return the button click
$("input[type='submit']").bind("click", function() {
return validateUsername(myFunction);
});
and you should return true
function myFunction() {
if ($(".error").length > 0) {
alert("errors on page");
return false;
}
return true;
}
and add return in the validate method
function validateUsername(callback) {
var $username = $("input[name='username']");
if (typeof $username.val() === "undefined" || $username.val() === "") {
$("#username-error").show();
$("#username-success").hide();
$username.addClass("error");
} else {
$("#username-error").hide();
$("#username-success").show();
$username.removeClass("error");
}
if (callback) {
return callback();
}
}
but the use of the callback in this really does not make much sense.

Related

DOM not being manipulated from inside a function that is being triggered properly

I have written this function to validate that all form fields and check boxes in a form are filled out. The script automatically disables the submit button and then watches for the moment at which it can be re-enabled. My debugger statements are landing me in all of the proper places, but for some reason, the DOM element is not being updated. I'm sure I am just making a stupid mistake, but can't seem to find a solution. Thank you in advance for any help!
Specifically looking at this section:
if (status === 'enable') {
btn.removeAttr('disabled');
btn.removeClass('disabled');
} else {
btn.prop('disabled', true);
btn.addClass('disabled');
}
Here is the whole script below.
$(document).ready(function() {
validateInput();
$('.validate').keyup(function(event){
validateInput();
});
$('[type=checkbox]').click(function(event){
validateInput();
});
function validateInput() {
var valid = 0;
var checkBox = $('[type=checkbox]');
var inputFields = $('input.validate');
var inputLength = inputFields.length + checkBox.length;
inputFields.each(function() {
if($(this).val() !== '') {
valid++ ;
}
});
checkBox.each(function() {
if($(this).prop('checked')) {
valid++ ;
}
});
if(valid === inputLength) {
updateBtnStatus('enable')
} else {
updateBtnStatus('disable')
}
}
function updateBtnStatus(status) {
var btn = $('input[type="submit"]');
if (status === 'enable') {
btn.removeAttr('disabled');
btn.removeClass('disabled');
} else {
btn.prop('disabled', true);
btn.addClass('disabled');
}
}
});

Disable an input after click and validation occurs

I'm trying to disable an input in a form, but only after validation of fields.
function valJomclAddForm() {
f = document.jomclForm;
document.formvalidator.setHandler('list', function (value) {
return (value != -1);
});
if (document.formvalidator.isValid(f)) {
if(document.getElementById('membership6') === null) {
return false;
}
jQuery('input#submit').val('Publishing...');
jQuery('input#submit').prop('disabled', true);
return true;
} else {
//alert
}
}
but when function gets here:
jQuery('input#submit').prop('disabled', true);
return true;
Function stops, change input value to "Publishing" but doesn't publish, doesn't get the "return true"
Unless I remove jQuery('input#submit').prop('disabled', true);then function return true and publish this...
Why does this not work?
Thanks a lot in advance!

Checking if an image is present within <ul> tag

I am checking on clicking a button that image is present within an <ul> tag or not. For that I am using this function :
function check_image_exists(){
$('ul#show_uploaded_images').each(function() {
if ($(this).find('img').length) {
return true;
}else{
return false;
}
});
}
Now if I put this thing within the clicking function it is working...
function insert_product(){
$('ul#show_uploaded_images').each(function() {
if ($(this).find('img').length) {
alert("Image found");
}else{
alert("Not found");
}
});
}
But if I separate the two and try to use only the return value to decide my condition then it is not working. :
function check_image_exists(){
$('ul#show_uploaded_images').each(function() {
if ($(this).find('img').length) {
return true;
}else{
return false;
}
});
}
function insert_product(){
var image_exist = check_image_exists();
if(image_exist == false){
alert("not found")
}else{
do the rest.....
}
}
The problem is that you are trying to return a value in an each callback, but that doesn't have any meaning, so the return value just gets swallowed.
There's a much simpler way to do this. Just check whether .find() returns any elements:
var thereAreImages = $('ul#show_uploaded_images').find('img').length !== 0;
Or to package it up in functions:
function check_image_exists() {
return $('ul#show_uploaded_images').find('img').length !== 0;
}
function insert_product() {
if (check_image_exists()) {
// do the rest...
} else {
console.log('not found');
}
}
NOTE: based on you asking 2 function ,
function insert_product() {
var image_exist = check_image_exists();
if (image_exist) {
alert("here")
} else {
alert("not found")
}
}
function check_image_exists() {
return $('ul#show_uploaded_images').has("img").length;
}
insert_product();
NOTE: You can check direcly $('ul#show_uploaded_images').has("img").length

jQuery empty input check function not working as expected

This question has been done to death on SO and I'm really, really sorry! I've already taken the bones of the below idea from a couple of SO questions on the same theme.
All said though, I still can't get it to work as expected.
It works OK if NONE are filled in.
It works OK if the END input is filled in and not the others.
It works OK if the MIDDLE input is filled in.
If you fill in ONLY the FIRST input though, it alerts, but submits anyway?
JSFIDDLE
$(document).ready(function (e) {
// completed count submit handler
$("#submit_counts_button").on('click', function () {
window.incomplete = false;
$('input[type=number]').each(function () {
if ($(this).val().length == 0) {
window.incomplete = true;
alert('Some fields are empty');
return false;
} else {
if (window.incomplete === false) {
$("#submit_counts_button").prop('disabled', true);
$("#submit_counts_button").html('Please Wait ...');
//$("#update_form").submit();
}
}
});
});
});
I'm sure it's something totally embarrassingly obvious but after a 16 hour day, I just can't see it. Any help appreciated ...
You need to pull the 'incompletion' check outside of the .each
$(document).ready(function (e) {
// completed count submit handler
$("#submit_counts_button").on('click', function () {
window.incomplete = false;
$('input[type=number]').each(function () {
if ($(this).val().length == 0) {
window.incomplete = true;
alert('Some fields are empty');
return false;
}
});
if (window.incomplete === false) {
$("#submit_counts_button").prop('disabled', true);
$("#submit_counts_button").html('Please Wait ...');
//$("#update_form").submit();
}
});
});
http://jsfiddle.net/6WpeF/6/
try
if(document.getElementById('id of input').value != ""){}

Postback a page based on webmethods result

How can I post back to a page based on result of WebMethod ?
function AssignmentConditionsSaveAS_Clicked() {
var txtConditionName = $('input[id$="txtConditionName"]').val();
PageMethods.IsExistsSavedCondition(txtConditionName, OnSuccess, OnFailure);
return false;
}
function OnSuccess(result) {
if (result == 'true') {
if (confirm('A saved condition with that name already exists. Do you want to overwrite?')) {
return true;
// I want to post back the clicked button
// Can not use __dopostback, because its a control inside a user control
}
else {
return false;
}
}
else if (result == 'false') {
alert('Not Exist');
}
}
function OnFailure(error) {
alert(error);
}
OR
How can I do somehting like this:
__doPostBack($('input[id$="btnSaveAS"]'), '');
You just have to do this
__doPostBack($('input[id$="btnSaveAS"]').attr('name'), '');
If I understand you correctly, you just need to get the button and call the click() function to do the post back.

Categories