cfautosuggest is cool

I was crazy over GMail when I saw auto suggest function. That’s why I’ve used that features most of my projects, referring from http://script.aculo.us. If I use javascript coding from it, we need to do some changes for our projects.If you’re not well-expert  in javascript, you can’t do anything for it. Upset..?? Don’t worry. You can use cfautosuggest. Volià..!!

<cfform action=”autosuggest.cfm” method=”post”>
Name:<br />
<cfinput type=”text” name=”contactname” size=”50″ autosuggest=”cfc:autosuggest.findContact({cfautosuggestvalue})” autosuggestminlength=”1″ maxresultsdisplayed=”10″ /><br /><br />
</cfform>

 

 

autosuggest.cfc

<cfcomponent output=”false”>

<!— Lookup used for auto suggest —>
<cffunction name=”findContact” access=”remote” returntype=”string”>
<cfargument name=”search” type=”any” required=”false” default=”">

<!— Define variables —>
<cfset var local = {} />

<!— Query Location Table —>
<cfquery name=”QryAutoSuggestSimple” datasource=”cfexample” >
select        contactname
from        contacts
where        contactname like <cfqueryparam cfsqltype=”cf_sql_varchar” value=”#ucase(arguments.search)#%” />
order by    contactname
</cfquery>

<!— And return it as a List —>
<cfreturn valueList(QryAutoSuggestSimple.contactname)>
</cffunction>

</cfcomponent>

setInterval Javascript

Like gmail, you can use auto fresh your page with setInterval funtion of javascript.

<script>
<!–
intervalID = window.setInterval(“alert(‘Hi’)”,  1000);
–>
</script>

raphael js

I was speechless after surfing this website. All of his projects make me awe. We can refer or modify more useful projects by the way of learning his javascript projects.

Cheers,

http://raphaeljs.com/

 

Refresh parent window from child window with ShowModalDialog

Yesterday, I was in problem. Because, my supervisor told me to refresh main window from child window when child window is closed. I thought, I could do it with window.opener.location.href. Actually, it doesn’t work because this new window is created by showmodaldialog of javascript. That’s why I was running through on it. Finally, I got it.

Coding for parent window (main.html)

<input type=”button” value=”Open” onclick=”javascript:window.showModalDialog(“child.html”, window)”>

 

Coding for child window (child.html)

 

<SCRIPT LANGUAGE=”JavaScript”>
<!–
function close(){

if (window.dialogArguments && dialogArguments.location) {
dialogArguments.location.href = ‘main.html’;
window.close();

}}// –>
</SCRIPT>

<input type=”button” value=”Close” onclick=”close()”>

Increase and decrease count by clicking with Javascript

Today, my supervisor wants me to do simple javascript program. It seems, it’s kinda simple but complicated when I implement it. This program is, to increase or decrease count by clicking on button. I took 1 hour to implement this program. Voilà..!!

<form name=”myform”>
<input type=”Hidden” name=”init” value=”3″>
<input type=”Button” name=”actoin” value=”+” onclick=”increase()”>
<input type=”Button” name=”actoin” value=”-” onclick=”decrease()”>
</form>

<script>
<!–
var x = document.myform.init.value;

function increase()
{
x++;
document.getElementById(“mynumber”).innerHTML = x;
}

function decrease()
{
x–;
document.getElementById(“mynumber”).innerHTML = x;
}
–>
</script>

<p id=”mynumber”>3</p>

Dynamically create textarea with Javascript

One of my projects need our clients to create textarea input dynamically with javascript. Seems it’s kinda simple but actually, create dynamically is simple but how to fetch data from these is kinda complicated. So, I reserach through and thinking of about that. Finally, I gotcha..!! Here you gooo…

Example.html

<form name=”mycomposeForm”>

<p id=”parah”></p>

<input type=”hidden” name=”mytextcount”>

<a href=”javascript:addInput()”>Add more input field(s)</a><br>
<a href=”javascript:deleteInput()”>Remove field(s)</a>

<form>

<script>

var arrInput = new Array(0);

var arrInputValue = new Array(0);

function addInput() {

arrInput.push(arrInput.length);

arrInputValue.push(“”);

display();

}

function display() {

document.getElementById(‘parah’).innerHTML=”";

for (intI=0;intI<arrInput.length;intI++) {

document.getElementById(‘parah’).innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);

}

}

function saveValue(intId,strValue) {

arrInputValue[intId]=strValue;

}

function createInput(id,value) {

return “<textarea cols=’40′ rows=’5′ id=’test “+ id +”‘ name=’test “+ id +”‘ onChange=’javascript:saveValue(“+ id +”,this.value)’ value=’”+ value +”‘></textarea><br>”;

}

function deleteInput() {

if (arrInput.length > 0) {

arrInput.pop();

arrInputValue.pop();

}

display();

}

var arrInput = new Array(0);

var arrInputValue = new Array(0);

function addInput() {

arrInput.push(arrInput.length);

arrInputValue.push(“”);

display();

}

function display() {

document.getElementById(‘parah’).innerHTML=”";

for (intI=0;intI<arrInput.length;intI++) {

document.getElementById(‘parah’).innerHTML+=createInput(arrInput[intI], arrInputValue[intI]);

}

}

function saveValue(intId,strValue) {

arrInputValue[intId]=strValue;

}

function createInput(id,value) {

return “<textarea cols=’40′ rows=’5′ id=’test “+ id +”‘ name=’test “+ id +”‘ onChange=’javascript:saveValue(“+ id +”,this.value)’ value=’”+ value +”‘></textarea><br>”;

}

function deleteInput() {

if (arrInput.length > 0) {

arrInput.pop();

arrInputValue.pop();

}

display();

}

</script>

jQuery

I start learning jQuery which is kinda popular among Web Developer, cos of which is easy to implement, less of coding and more secure than ordinary javascript. But, the style of programming, it’s always updated by programmers and you gotta catch which has been changed in it.

If you wanna learn more, http://docs.jquery.com.

jQuery

I’m now learning jQuery, which is powerful toolkit for Developer. It’s easy to use, and don’t need to write long javascript statement in our coding. You can also learn about jQuery there.

jQuery

Want to make fake website for fun?

In these days, I got free spare time to surf websites. That’s why I was surfing here and there. Oddly, I’ve found one website support us to make fake website for fun.

• Open the website what you want to fake (ex: http://www.google.com)
• copy this message, javascript:document.body.contentEditable=’true’; document.designMode=’on’; void 0 into address bar (URL) and press Enter.
• So, you can see this website as in rich-text editor.

Check valid Email with Javascript

Sometimes, I need to write hotel reservation form with PHP. Honestly, it’s kinda simple and not rush at all. But our major challenge is spam bots, and think about how to prevent nobody can send spam message to our reservation form. For this case, we can prevent in only 2 way. 1) is Image Captcha and 2) is check referer page. For 2) solution is here.

$path_parts = pathinfo($_SERVER['HTTP_REFERER']);
if($path_parts['basename'] == “reservation.html”)

For email validation, we don’t need to feel complicated. And, we don’t want our mail server will be over-loaded for the case of invalid email address. How to prevent? Don’t worry.

Write following code between <head></head>

<script language = “Javascript”>

function echeck(str) {

var at=”@”
var dot=”.”
var lat=str.indexOf(at)
var lstr=str.length
var ldot=str.indexOf(dot)
if (str.indexOf(at)==-1){
alert(“Invalid E-mail ID”)
return false
}

if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){
alert(“Invalid E-mail ID”)
return false
}

if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){
alert(“Invalid E-mail ID”)
return false
}

if (str.indexOf(at,(lat+1))!=-1){
alert(“Invalid E-mail ID”)
return false
}

if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){
alert(“Invalid E-mail ID”)
return false
}

if (str.indexOf(dot,(lat+2))==-1){
alert(“Invalid E-mail ID”)
return false
}

if (str.indexOf(” “)!=-1){
alert(“Invalid E-mail ID”)
return false
}

return true
}

function ValidateForm(){
var emailID=document.frmSample.txtEmail

if ((emailID.value==null)||(emailID.value==”")){
alert(“Please Enter your Email ID”)
emailID.focus()
return false
}
if (echeck(emailID.value)==false){
emailID.value=”"
emailID.focus()
return false
}
return true
}
</script>

Write this code below of <body>

<form name=”frmSample” method=”post” action=”#” onSubmit=”return ValidateForm()”>
<p>Enter an Email Address :
<input type=”text” name=”txtEmail”>
</p>
<p>
<input type=”submit” name=”Submit” value=”Submit”>
</p>
</form>