Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

Monday, January 24, 2011

There is no foreach in JavaScript, use for … in instead

Programmer should be familiar with command foreach, which function is to iterate item within array or collection. This command normally available on most language, vb, php, c, java. Unfortunately, there is no foreach on JavaScript, and I just notice that until few minutes writing this post. After some research and reading over the javascript manual, I found that for … in is replacement for foreach

for … in

This command basically will iterate any object within an array, but instead refer to it’s collection object this command would pass only the key for collection object.

Syntax:

for (variable in object)
statement
Example

Please pay more attention on bolded italic text


child_cities=states[selected_state];
for(var cityid in child_cities)
{
ddl_city.options.length++;
ddl_city.options[ddl_city.options.length-1].text=
child_cities[cityid].description;
ddl_city.options[ddl_city.options.length-1].value=
child_cities[cityid].cityid;
}

Monday, January 17, 2011

How to opt-in our autoresponder subscriber and run other code simultaneously

 

 

 

 

 

 

To support one of my internet business I decided to use autoresponder service, unfortunately I was not dare enough to invest lots money for Aweber or GetResponse, 2 names listed as top leader on autoresponder business. So I decide to use cheap one, and money does matter. This cheap one didn’t give capability to do opt-in other than using their form, which is bad, because I also need to capture user information on my own database.

So, what I did:



1. Record my user information into database


2. Pass this information into HTML forms that  mimic opt-in form
3. Auto submit the form

It work fine for me.



The code itself is very simple as below, I use PHP and I assume we all already know how to insert into database, redirect and pass information to another form.

 



I use “display:none” to hide opt-in form, so forwarding process become seamless

   1:  <div style="display:none">


   2:  <form class='subscription_form' id='subscription_form' name="subscription_form" method='POST' action='####FORM_POST_URL####'>


   3:  <div align='center'><center>


   4:  <p>Full name<br><input type='text' name='full_name' size='20' value='<?php echo $name; ?>'></p>


   5:  </center></div>


   6:  <div align='center'><center>


   7:  <p>E-mail address<br><input type='text' name='email' size='20' value='<?php echo $email; ?>'></p>


   8:  </center></div>


   9:  <div align='center'><center>


  10:  <p>Phone #1<br><input type='text' name='phone1' size='20' value='<?php echo $phone; ?>'></p>


  11:  </center></div>


  12:  <input type='hidden' name='capitals' value='1'>


  13:  <input type='hidden' name='subscription_type' value='E'><div align='center'><center>


  14:  <p><input type='submit' value='Go »'></p>


  15:  </center></div>


  16:  <input type='hidden' name='id' value='5250'>


  17:  <input type='hidden' name='full_name_man' value='1'>


  18:  <input type='hidden' name='phone1_man' value='1'>


  19:  </form>


  20:  <div>


  21:   


  22:  </div>


  23:   


  24:  <script language="javascript" type="text/javascript">


  25:   


  26:  function init_form()


  27:  {


  28:      document.forms["subscription_form"].submit();


  29:  }


  30:   


  31:  window.onload=init_form;


  32:   


  33:  </script>


Thursday, May 28, 2009

How to do check and uncheck all record on ASP.Net GridView using JavaScript and ASP.Net


When we accessing common webmail site like Gmail, Yahoo!mail or Hotmail, we will see a feature that allow us to select all message listed with a single click, either on a link says "Check All" or a checkbox that will trigger same action somewhere on its header, for the same if want to uncheck them. To do such feature above on ASP.Net Application, I would say impossible with just using standard control, ASP.Net GridView for instance, you would need to get enhanced control or else programmatically coding it in your application :)

On every application that was built by our team, we try to as much as possible not to do it on server side, as it will increase data round trip which as we all know will reduce application performance. So, combination of ASP.Net, Ajax and JavaScript come as a solution.

First we need to have to add TemplateField on GridView to show CheckBox, in our approach we also use a CheckBox on this column header to trigger Check/UnCheck operation by bind a JavaScript function on this CheckBox's OnChange event.

Next, we will need to write down JavaScript function that will be used to perform Check/UnCheck operation, our code is as follow:

var checkMes = new Array();

function addCheckMe(checkMe_CtlId)

{

checkMes.length++;

checkMes[checkMes.length-1]=checkMe_CtlId;

}

function doCheckUncheckAll()
{
var tmpCheckMe;
var checkAll=$get("CheckAll");

for(i=0;i { tmpCheckMe=$get(checkMes[i]); tmpCheckMe.checked=checkAll.checked; }
}


You may see, we have one array to store list of checkbox, a function to fill that array and another function to trigger Check/Uncheck operation.

Okay with done with defining checkbox and JavaScript thing, next we need to call addCheckMe function within our ASP.Net code as GridView will define checkbox dynamically, so ... we add a function to handle GridView's RowDataBound event

protected void grd_RowDataBound(object sender, GridViewRowEventArgs e)
{

string addCheckMeScript = "";
CheckBox CheckMe = (CheckBox)e.Row.FindControl("CheckMe");

if (CheckMe != null)
{
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), String.Format("OnGrdCheckMeRegister_{0}", e.Row.RowIndex), String.Format("addCheckMe('{0}');", CheckMe.UniqueID.Replace("$","_")), true);
}
}

And voilla we get as we have expected ... code with smile :)

Tuesday, May 26, 2009

Validate text to match specific date pattern on JavaScript

My team got requirement to standarize date appearance to dd-MMM-yyyy, thanks to ASP.Net Ajax who has CalendarExtender tools so we may manipulate the way date format returned.

Unfortunately, we also allow user to free type value of date on any datetime control we have provided, which causing us a problem on how to restrict it to expected format. CustomValidator come in handy as its has capability to validate thru JavaScript, so next problem is how to build a javascript code to validate its format to be dd-MMM-yyyy, as we need a handy script and fight with deadline, so below code is written:

function isDate(sDate) {
var datePat = /^(\d{1,2})(\/|-)(\w{3})(\/|-)(\d{4})$/;
var matchArray = sDate.match(datePat); // is the format ok?

if(matchArray==null) return false;

return true;
}


Above code only validated date written format as per expected pattern, it won't check validity of data value entered, for instance if you type: 45-Apr-2009, script will return true, so that problem stil a homework for our team :)