As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I want validate if username already exists while user insert the username in textbox or just after the textbox lost focus.
Jquery or Ajax?
Please, someone have examples of that?
In the onblur event of the text box, get the value of textbox and using jQuery ajax, make a call to a server page where you check it and return appropriate results. based on the results show the message to user (Available or Not Available)
Include jQuery in your page and have this script also
$(function(){
$("#txtUserName").blur(function() {
var userName=$(this).val();
if(userName!="")
{
$.get("checkusername.aspx?username="+userName+"&t="+$.now(),function(data){
if(data=="1")
{
$("#msgDiv").html("Not Available");
}
else
{
$("#msgDiv").html("Available :) ");
}
});
}
});
});
Assumuing checkusername.aspx page will read the querystring value and check in the database and return(Response.Write()) "1" or "0"
I prefer to use a Generic handler (.ASHX file) to do the server side checking instead of using the aspx file.
Both.
Use jQuery to react to the onblur event for the textbox. Then, use jQuery to make an ajax call to a controller to see if the user name is already taken.
$('#usernameTextBox').blur(function() {
alert('Make your ajax call here.');
});
Related
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have some (I think they can be few stupid) questions...but they're questions, and I'd like post here, and debate it.
It's about conditionals. I'm developing in javascript, and I've some functions, and I'd like write optimal code.
For example, I have to check some conditions, so I can write:
if(text == ""){
//some code for finish
}else if(text== previousText){
//some code for finish
}
//here I write more code...which runs if both conditions had not complied.
My doubt is: what do you think is better to do?
Point 1
if(text == ""){
//some code for finish
}else if(text== previousText){
//some code for finish
}else{
//here I write more code...which runs if both conditions had not complied.
}
or
Point 2
if(text == ""){
//some code for finish using return
return;
}else if(text== previousText){
//some code for finish using return
return;
}
//here I write more code...which runs if both conditions had not complied.
I hope have explained well. Sometimes these things go unnoticed, but they're important, I think.
Thanks a lot, Daniel
I follow the rule to have only one return statement per function. So Point 1
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Working on a js app involving many objects, I want to be able to grab an object by a specific variable. Here is my code:
var pin = '0000';
$.each(employees, function(){
if(this.pin === pin){
curEmployee = this;
return false;
}
});
Though this approach works, I have a feeling that there are way better solutions out there... I was fiddling around with grep and tried:
var pin = '0000';
curEmployee = $.grep(employees, function(e,i){
return e[pin] === pin;
});
However, it is harder to determine a result, since now I will need to check the length to see if an array with provided back, and such.
Just looking for a best practices solution.
Since an Array is always returned from $.grep, just get the [0] index of the Array. If undefined, there was no match.
var pin = '0000';
curEmployee = $.grep(employees, function(e,i){
return e.pin === pin;
})[0]; // <--- always grab the first index
Without jQuery, you could use Array.prototype.filter in the same manner:
var pin = '0000';
curEmployee = employees.filter(function(e,i){
return e.pin === pin;
})[0];
You could always use jquery's filter method:
var pin = '0000';
curEmployee = $(employees).filter(function(e){
return e.pin === pin;
})[0];
In All honesty, IF you are using aloot of objects and performance is important...
.. and you want to avoid the asynchronous bugies in js.. you should go for a pure js. approach.
Something like for loop which god trough all objects. And possibly some result buffering. I know it is a pain in the ass and you probably wont like to do it. but it is the fastest way in most cases.
I personally use such aproach in a js. crm we are making, becouse the jquery way was a no go on 1000+ objects...
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I am learning jQuery and I have written a very simple script that works great. Now I would like to find out if there is a better way to write this line.
$("form").submit(function() {
$('div.beforeRecover').animate({ opacity: 'toggle' }, 300).delay(800);
$('div.betweenRecover').animate({ opacity: 'toggle' }, 200).delay(1200);
$('div.betweenRecover').animate({ opacity: 'toggle' }, 800);
$('div.afterRecover').delay(1800).animate({ opacity: 'toggle' }, 1400);
return false;
});
To briefly explain:
Form gets submitted
Form fades
Loading gif appears
Loading gif fades
Confirmation message appears.
I appreciate any help!
var fadeToggle = { opacity: 'toggle' };
$("form").submit(function() {
$('div.beforeRecover').animate(fadeToggle, 300).delay(800);
$('div.betweenRecover')
.animate(fadeToggle, 200).delay(1200)
.animate(fadeToggle, 800).delay(1800);
$('div.afterRecover').animate(fadeToggle, 1400);
return false;
});
Infact, there is a whole separate method called .fadeToggle()
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
What is the best way to provide a quick tour of a webapp using contextual tooltips?
Use case:
user navigates to the webapp
some form of popup asking if the user wants a guided tour of the interface
user can click next on each tooltip to be shown the next one
user can cancel the tour at any time by clicking some kind of exit X or button
Is there an easy library out there that does this?
Thanks!
The easiest way to do this is with Jeff Pickhardt's Guider-JS javascript tooltip walk-through library. It's very easy to use (although it has several very advanced features as well), and does exactly what you described.
You can check out this excellent example of a tooltip walk-through made with Guider-JS.
If you want to see a working example on a production site, it is used extensively on optimizely.com to provide help and walk-through guides for the user interface.
UPDATE: ZURB Foundation is now maintaining the excellent "Joyride" tooltip tour javascript library.
You could also write the tour part yourself using a linked list with an iterator that always calls a callback to set up the tooltip and one to close it. You can then use any tooltip script you want. Here's a quick proof of concept that should show you what I mean:
var toolTipList = {
tooltips: [],
currentTooltip: {},
addTooltip: function(tooltip){
var currentTail = this.tooltips.length > 0 ? this.tooltips[this.tooltips.length - 1] : {};
var newTail = {
tooltip: tooltip,
prev: currentTail
};
currentTail.next = newTail;
this.tooltips.push(newTail);
},
initialize: function(){
this.currentTooltip = this.tooltips[0];
this.currentTooltip.tooltip.callback();
},
next: function(){
if(this.currentTooltip.next){
this.currentTooltip.tooltip.close();
this.currentTooltip = this.currentTooltip.next;
this.currentTooltip.tooltip.callback();
}
}
};
for(var i = 0; i < 10; i++){
toolTipList.addTooltip({
callback: function(){
// called every time next is called
// open your tooltip here and
// attach the event that calls
// toolTipList.next when the next button is clicked
console.log('called');
},
close: function(){
// called when next is called again
// and this tooltip needs to be closed
console.log('close');
}
});
}
toolTipList.initialize();
setInterval(function(){toolTipList.next();}, 500);
JSFiddle link
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 11 years ago.
Ok, we run a website that has a shopping cart. Here's the scenario: a customer comes to the site and adds a product to their cart. They go to dinner and leave the item in their cart without checking out. The next day they want to buy the item. They go to the website and, without noticing it's in their cart already, attempt to add it to the cart again where they receive an error saying it's out of stock (because there is only one in stock and they have it in their cart already.) Now we lose a sale.
What I am trying to do is create 2 cookies: one that lasts 7 days (same as the cart cookie) and one for the session. The way it works is this: their first visit it creates 2 cookies: one for 7 days and one for the session. Now lets say the customer adds a product and closes their browser. The session cookie expires, leaving the 7 Day cookie there. Now when they come back, the script will check that the 7 Day Cookie is present, but not the session cookie, triggering some of my own code to be run.
The basic structure would be like this.
If 7DayCookie Exists {
If SessionCookie Exists {
End Script;
}
Else if SessionCookie Does Not Exist {
[Insert My Own Code]
}
}
Else if 7DayCookie Does not Exist {
Create SessionCookie;
Create 7DayCookie;
End Script;
}
Anybody able to make this for me? I assume it'll be a cinch for anybody that is very good with cookies and javascript.
Thanks in advance!
Final working code.
var wc = readCookie('wfwc');
var sc = readCookie('wfsc');
if (wc) {
if (sc) { }
else if (!sc) {
alert("It works.");
}
}
else if (!wc) {
createCookie('wfwc','week',7);
createCookie('wfsc','session',0);
}
I highly recommend the cookie functions from Peter Paul Koch's quirksmode. The 3 functions you need are createCookie, eraseCookie, and readCookie.
For the session cookie, you'll want to create a cookie that contains no "expires" header. for the 7 day cookie, you'll want to create a cookie that expires in 7 days.
Then, in javascript, you can do something like:
theme = readCookie("theme");
// if a cookie called "theme" isn't present, initialize.
if (!theme) {
theme = "sky.json";
}
I use PPK's scripts myself, I did change the == to === to avoid type coercion in the functions, although it's not strictly necessary.