How to get an element whose id starts with a particular pattern

Picking an element using its id is very in jquery, is not it? But what if the situation is you have three text fields and every of their id starts with a particular pattern? For example suppose you are working with three text fields

 <input type='text' name='properties_value' id ='properties_value_1' />  
 <input type='text' name='properties_value' id ='properties_value_2' />  
 <input type='text' name='properties_value' id ='properties_value_3' />  
 <input type='button' onclick='take_all_the_input();' value='Show'/>  

Now you want to work on the every text fields value using their id's. What will do? are u planning to write code for each and every text fields like the below???

 <script>  
 function take_all_the_input()  
 {  
    var input1 = $("#properties_value_1").val();  
    var input2 = $("#properties_value_2").val();  
    var input3 = $("#properties_value_3").val();  
   // I assume you just want to alert the values  
   alert(input1+' ' +input2+' '+input3);  
 }//end of function  
 </script>  

The above code will work but that is a very novice approach and will not work if you do not know exactly how many text fields will be there. That means if you have generate the text fields dynamically in that case you cant fix the number of text fields. Now come to the solution. The better solution (I am not telling it best but better because after reading this post you may write in your blog even better solution than my solution :) ). So the better solution is go through every text field's id that starts with a particular pattern (in this case 'properties_value_') since every id has started with 'properties_value_' and work on those values.

The code will be

 <script>  
 function take_all_the_input()  
 {  
   $("input[id^='properties_value_']").each(function()  
    {  
     // I assume you just want to alert the values  
     alert($(this).val());  
    }  
 }//end of function  
 </script>  

See we have used $("input[id^='properties_value_']").each(function() {..... Here you are going to traverse each of the id that starts with 'properties_value_' How are taking the id that starts with a particular pattern? using ^= . So this will give the attributes that starts with some pattern... On the other hand the $= will help you to find the ids that ends with a particular pattern.

Hope this helps.. Happy coding.

Upgrage yourself, dont rely on what you are

You are developing your career where upgrading yourself is must. Do not just rely on PHP or .NET or Android or whatever. May be you are a very good PHP coder.  Knows so many  things but you don't know everything. But I know you will not be able to know everything. But You must have to have the eagerness to learn new things. Suppose you are very good in PHP 4. But now PHP 6 is going to reign the PHP world but still you do not want to learn even PHP 5 and as a result you are not doing OOP  just because upto PHP 4 OOP was not used that much!!! Then sorry. This is not your field. Suppose you are an advanced developer. Going to develop a chat script. But you dont have the guts to study on node.js instead you are finding a shortcut way to do it using database!!! sorry again. So just keep in mind only PHP will give nothing until you upgrade yourself.  Today you are writing duplicate codes but you are continuing it projects after projects. You should not do this. You have to have the eagerness to follow the DRY (Do not Repeat Yourself) approach. Try to attach with online group, discussion, visit popular blogs or magazines to upgrade. Now it is the time to make rounded corner using CSS3 so please dont try to do it using photoshop to make a rounded corner image.

Populate drop down list with XML in C#

Create XML File  named CollectionModeinSales.xml in root folder:

<?xml version="1.0" encoding="utf-8" ?>
<CollectionModes>
  <CollectionMode>
    <text>Cash</text>
    <value>Cash</value>
 
</CollectionMode>
  <CollectionMode>
    <text>Cheque</text>
    <value>Cheque</value>
  </CollectionMode>

  <CollectionMode>
    <text>D.D</text>
    <value>D.D</value>
  </CollectionMode>

  <CollectionMode>
    <text>TT</text>
    <value>TT</value>
  </CollectionMode>

  <CollectionMode>
    <text>Credit</text>
    <value>Credit</value>
  </CollectionMode>

</CollectionModes>





Add asp:DropDownList in ASPX file

 <asp:DropDownList ID="ddlCollectionType" runat="server" Width="106px">
                                                                   </asp:DropDownList>

C# Code behind file:

            DataSet dsCollectionType = new DataSet();
           
    dsCollectionType.ReadXml(AppDomain.CurrentDomain.BaseDirectory + "CollectionModeinSales.xml");
    ddlCollectionType.DataSource = dsCollectionType.Tables[0];
    ddlCollectionType.DataTextField = "text";
    ddlCollectionType.DataValueField ="value";
    ddlCollectionType.DataBind();

Understanding Session

Hi, I am here to make you understand some concepts about session. But wait.  Before that I want to tell you a story of mine. After that I will be back to the topic Session. I like to eat too much specially fast foods like burger, pizzas, fried chickens etc on the other hand I am a bit lazy also. Don't want to go to the shop . So I have kept a boy named "Sam" whose only duty is to go to my nearby shop and order them food and bring the food to me. As this is my nearby shop and I have been purchasing food from there so many times they want  to give me some discount on food. But there is a rule to get this discount. The rule is whoever goes to buy the food (me or Sam) he has to show an id of mine to the order section and also in the cash section. Based on the id the shopkeepers and cashier decides to give discount. But you know what? Sam's capability of memorizing something is very poor. When he goes to order section of the shop he can tell my id but when he goes to the cash section he forgets my id!!! In order to solve this problem what the shopkeepers are doing is at the order section when Sam is telling my Id they are keeping a note and forward it to the cash section. So now no matter whether Sam can memorize my id or not. Shop keepers are keeping the note. :)

Ok enough talking now lets come to the main point. go through the story again and replace me with client browser, request of food with requested data, my id with additional data, Shop with Server, Sam with HTTP, the note of id with session data and delivery of food as Server response :).

Me = client browser.
Request of food = Requested Data
My Id = Additional Data,
Shop = Server,
Sam = HTTP,
The note of my ID = Session Data,
Delivery of Food = Server Response.

Session is like that. When you request your server from browser using HTTP. the HTTP is a state less protocol. The page you are requesting with an additional data , that particular additional data is available to only that page. but when you goes to another page the data is lost. To make that data available also at another page, the server keeps the information of that data as session variable. Using that session variable you can have the data available at another page too just like my id is available both at order section and cash section.

Thanks for reading :). More technical terms about session will be discussed later.

Image Preview On FileUpload Change

 Add jquery  reference in 'head' tag

jquery-1.4.3.min.js

 Add Image and FileUpload control in html :

                         <table >

                 <tr>
                    <td>
                        <span >Logo Path</span>
                    </td>
                    <td>
                        <input name="FileUpload1" id="FileUpload1" onchange="showPreview(this)" style="width:260px;" type="file">
                    </td> 
                </tr>

                       </table>
                    <div >
                      <img id="imgLogo" alt="" src="" style="width: 77px; height: 66px" />
                  </div>
 Write Javascript  Function:

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


        function showPreview(ele) {
            $('#imgLogo').attr('src', ele.value); // for IE
            if (ele.files && ele.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                $('#imgLogo').attr('src', e.target.result);
                }
                reader.readAsDataURL(ele.files[0]);
            }
        }

</script>

Define cookie path to access it everywhere in the domain

Sometimes programmers want their cookie variable available to all the pages in the domain but they don’t specify the cookie path. To make the cookie variable in all the pages in the domain one should set the cookie as below–setcookie(name of the variable,value of the cookie variable,expired time of cookie,path)the path should be “/”. If you do this way the cookie should be available all the way to the domain.
Example code : setcookie(“Name”,”Fuad”,time()+3600*24,”/”)

Jquery:ToolTip

Add New js file in the js folder named  'tltip.js'and write some code

(function($) {
    $.fn.extend({
        tltip: function(options) {
        var settings = $.extend({ delay: 300, pause: 5000, animationSpeed: 500 }, options);
            return this.each(function() {
                var control = $(this);
                var iconDirection = 'left';
                var toolTipContainer = $('<div class="tltip-container"><div class="tltip-body">' + control[0].attributes["tltitle"].nodeValue + '' +
                                        '<img   class="tltip-close"   /></div><div class="tltip-icon"></div></div>');

                control.before(toolTipContainer);
                var delay = settings.delay;
                var toolTip = toolTipContainer;
                toolTip.css({ display: 'none' }).find('div').css({ display: 'none', opacity: 0 });
                var toolTipBody = $('.tltip-body', toolTipContainer);
                var toolTipIcon = $('.tltip-icon', toolTipContainer);

                var interval;
                control.mouseover(function() {
                    var position = $(this).offset();
                    var left = position.left;
                    var top = position.top;

                    left += $(this).outerWidth();

                    toolTipBody.css('left',12);
                    toolTipIcon.css('left', 0);

                    toolTip.css({ left: left, top: top });
                    interval = setTimeout(function() {
                        showToolTip(toolTip);
                    }, delay);
                }).mouseout(function() {

                    hideToolTip(toolTip);

                }).keydown(function() {
                    clearTimeout(interval);
                });

                $('.tltip-close', toolTipContainer).click(function() {
                    hideToolTip(toolTip);
                });

                function showToolTip(toolTip) {
                    toolTip.css({ display: '' })
                    .find('div').css('display', '')
                    .stop(false, true)
                    .animate({ opacity: 1 }, settings.animationSpeed, function() {
                        setTimeout(function() {
                            hideToolTip(toolTip);
                        }, settings.pause);

                    });
                }


                function hideToolTip(toolTip) {

                    toolTip.css({ display: 'none' })
                    .find('div')
                    .stop(false, true)
                    .animate({ opacity: 0 }, settings.animationSpeed, function() {
                        $(this).css('display', 'none');
                    });
                }

            });
        }
    });
})(jQuery);


CSS:
Add new css files named 'tltip.css' and write code..

.tltip-container
{
    height: 70px;
    width: 252px;
    position: absolute;
}
.tltip-body
{
     color: White;
    font-weight: bold;
    font-family: Arial;
    font-size: 10px;
    width: 220px;
    height: 39px;
    padding: 10px;
    padding-right:20px;
    position: relative;
    float: left;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    behavior: url(PIE.htc);
    background-color: #D5AF1C;
}
 

.tltip-icon
{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px;
    position: absolute;
    margin-top: 12px;
    border-color: transparent #D5AF1C transparent transparent;
}

.tltip-close
    {
    background:url(../images/x.png) no-repeat;
    width:25px; height:29px;
    display:inline; z-index:3200;
    position:absolute;
    top:-12px;
    right:-10px;
    cursor:pointer;
}

Add close image:

In html code:

Take reference in 'html' tag
 css/tltip.css
 js/jquery-1.4.3.min.js
 js/tltip.js


Write javascript code in html page

 <script type="text/javascript">
        $(document).ready(function () {
        $("[tltitle]").tltip();
        });
    </script>




 Add one div and three input box with new attribute named 'tltitle'

       <div id="demo">
            <input type="text" tltitle="Tooltip1." id="purple" />
            <br />
            <input type="text" tltitle="Tooltip2" id="green" />
            <br />
            <input type="text" tltitle="Tooltip3" id="yellow" />
           
        </div>

Press Enter key and change Tab

Write  javascript code into js file named jskeypresstab.js.

$(':text').live("keypress", function(e) {
    /* ENTER PRESSED*/
    if (e.keyCode == 13) {

        /* FOCUS ELEMENT */
        var inputs = $(this).parents("form").eq(0).find(":input");
        var idx = inputs.index(this);
        if (idx == inputs.length - 1) {
            inputs[0].select()
        } else {
            inputs[idx + 1].focus(); // handles submit buttons
            inputs[idx + 1].select();
        }

        return false;
    }
});

$('select').live("keypress", function(e) {
    /* ENTER PRESSED*/
    if (e.keyCode == 13) {
        /* FOCUS ELEMENT */
        var inputs = $(this).parents("form").eq(0).find(":input");
        var idx = inputs.index(this);
        if (idx == inputs.length - 1) {
            inputs[0].select()
        } else {
            inputs[idx + 1].focus(); // handles submit buttons
            inputs[idx + 1].select();
        }

        return false;
    }
});


$('textarea').live("keypress", function (e) {
        /* ENTER PRESSED*/
        if (e.keyCode == 13) {

            /* FOCUS ELEMENT */
            var inputs = $(this).parents("form").eq(0).find(":input");
            var idx = inputs.index(this);
            if (idx == inputs.length - 1) {
                inputs[0].select();
            } else {
                inputs[idx + 1].focus(); // handles submit buttons
                inputs[idx + 1].select();
            }

            return false;
        }
    });

In html code:

Add reference in head code;

jquery-1.4.4.min.js
jskeypresstab.js

Ajax Busy

Take new js file in your project named jsbusy.js and add javascript code into this files.

$(function() {
    $('body').append('<div id="jBusy"><p id="ajaxBusyMsg">Please wait...</p></div>');
});
//  bound to ajax start/stop document events
$(document).ajaxStart(function() {
    $('#jBusy').show();
}).ajaxStop(function() {
    $('#jBusy').hide();
});

In Html page:

Take reference into head tag:

jquery-1.4.3.min.js
jsbusy.js

CSS:

Write style into CSS file and take reference into head tag

#jBusy{
  display: none;
  margin: 0px 0px 0px -50px; /* left margin is half width of the div, to centre it */
  padding: 30px 10px 10px 10px;
  position: fixed;
  left: 50%;
  top: 40%;
  width: 200px;
  height: 100px;
  text-align: center;
  background: #e8e8e8 url(images/ajax-loader.gif) no-repeat center center;
  border: 1px solid #000
}

Add image into images folder