Tuesday, 6 November 2012

"Use same function by using element ID":Pass id as an argument to use function for different events on different elements


 we can also use a common function that binds to different event associated with different elements and we only pass id and access the function by identifying id in function argument like this


function ValidateForAllValue(id )
{
  var str=""
  $("select#"+id+" option:selected").each(function ( )
  {
    if($(this).val() =="Defined" )
    {
 
     str=str+$(this).val();


    }

    if(str=="Defined" && $(this).val() != "Defined")
    {
 
     alert("Invalid selection: option 'All' can not be selected with any other option");
 
 
        $(".AllClass").val([])
 
      return false;
    }
    if ($(this).val() == "None")
    {
      $(".AllClass").val([]);
 
      alert("Select some valid option");
 
    }
  });
};


Here this function displays alert for the element if  user select "All" along with other option.Therefore we can call this function for any select list by passing on onclick attribute like this:

<select onclick="ValidateForAllValue(this.id)">



$(this) always works on iteration

You cannot access  an element with $(this)  at event binding like this:

<select onclick="fun()">
....


fun()
{
 $(this).each(function ( )
{

.....

........

Reason : It works in iteration to refer to the element
                    $("select#"+id+" option:selected").each(function ( )
                   {
                          if($(this).val() =="Defined" )
                           {
   
                                    str=str+$(this).val();

                                   .............................

or you can also use that element at finction calling like this.....

<select id="xyz" onclick="fun(this.id)">




Tuesday, 16 October 2012

To write a complete HTML structure in a new window


      function ShowDatePopUp()
        {   
         alert("hello");
         newwindow= window.open('','name','location=1,status=1,scrollbars=1,height=300,width=300');
         newwindow.moveTo(0, 0);
         newwindow.document.write('<html><head><title>');
         newwindow.document.write('Date Window');
         newwindow.document.write('</title></head>');
         newwindow.document.write('<BODY><form>');
      
        newwindow.document.write('<label for='TxtDate'>Enter Date </label>');
        newwindow.document.write('<input type='text' id='DateId' name='TxtDate'/>');

        newwindow.document.write('<input type='submit' value='Submit' class='SubmitButton'/>');
         newwindow.document.write('</form></BODY></html>');
         newwindow.document.close();
        
        
        }
         
         
         
      function ShowDateRangePopUp()
        {{   
         alert("hello");
         newwindow= window.open('','name','location=1,status=1,scrollbars=1,height=300,width=300');
         newwindow.moveTo(0, 0);
         newwindow.document.write('<html><head><title>');
         newwindow.document.write('Date Window');
         newwindow.document.write('</title></head>');
         newwindow.document.write('<BODY><form>');
      
        newwindow.document.write('<label for='TxtDate'>Enter Date </label>');
        newwindow.document.write('<input type='text' id='DateId' name='TxtDate'/>');

        newwindow.document.write('<input type='submit' value='Submit' class='SubmitButton'/>');
         newwindow.document.write('</form></BODY></html>');
         newwindow.document.close();
        
        
        }}

Friday, 12 October 2012

Empty cells in a table

One day i worked on a table that fetches some record from database.But the empty cells were coming without border like that:(in internet explorer)

actually the table tag is like that

<table border="1">

To troubleshoot problem my TL suggested to include attribute/values for table tag as
rules="all" frame="box"

<table border="1" rules="all" frame="box">

my problem was solved (:)

Rules attribute of table tag--he rules attribute allows you to set borders (also called rules, surprise, surprise!) inside the table at the boundaries between cells
//Display only the borders between the rows:

<table rules="rows">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Table with rules="rows":
MonthSavings
January$100

//Display only the borders between the coloumns:

<table rules="cols">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

Table with rules="cols":
MonthSavings
January$100

<table rules="all">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
</body>
</html>

Table with rules="all":
MonthSavings
January$100

frame="box "Display only the outside borders of a table:

Note: to encounter the above problem either give

<table border="1" rules="all" frame="box">

or
<table border="1"  frame="box">


 

Monday, 1 October 2012

Tp calculate size of element

count = 0;
           
$("#SelectClientForExport option").each(function ( )
{
count++;
});
alert(count);


or either use

alert( $("#SelectClientForExport option").size());

Thursday, 27 September 2012

Value,text and index (intersting way to handle form elements)

To reset fields we can use: either

val()
text( )
index( )

Generally we usually  access elementseither by following selector

1.using id
2.using group selector like all select elements
3. using class name

but we can also access element with the help of text,index and value

Monday, 24 September 2012

Setting all value in Multiselector

Usually Multiselector doesn't have "all" option value..If it happens then then it's better to set value as "All" if <select> tag is defined in one form page and we render the value to some another page or multiple pages.If we defined it in same page and get on same page then we must have to define the value at declaration time.

Now if we get the value from "Select tag" then the value we are getting like this:

"val1 val2 val3"

and this single must be tokenised to iereate over multiple option values by two approach:
1.Using blank space " "
2.similar string patern.

First approach: (Best approach)
It is safe to use first approach if option string values doesn't have multiple sapces.Therefore try to avoid spaces in option values at definition time till it is not compulsary ( by normalising/trimming/removing spaces see difference in another blog for all three terms ) so that we can easily tokenized by using this approach since after each value there is a space val1 val2 val3 etc.

Second approach:

If it is complulsary to havaing spaces in string and string have some business pattern like (exporting each pdf or xml has an extension .pdf or .xml) therefore we can tokenize over each value as:

for ex- let $All := "0001012-0000002-KOMMUNEKREDIT.xml 0001012-0000003 KOMMUNE KREDIT.xml"
for $Each at $pos in fn:tokenize($All,".xml")[1 to fn:last()-1]
let $EachBatch := fn:normalize-space(fn:concat($Each,".xml"))
return $EachBatch

and then we also need to concat the value over which each string is tokenised.Here we run the loop to the second last element otherwise result would come as: >
0001012-0000002-KOMMUNEKREDIT.xml
0001012-0000003-KOMMUNE KREDIT.xml
.xml

there fore we skip last element.

Third Approach (Only used in following situation)

But what happens if we have compulsion to have spaces in option values and string doesn't have patterns then we have to append some tag identofire with each option value at declaration time or rendered time to differntiate multiple values.