Friday 13 December 2013

JQuery Bug in Attr() function replace with Prop() function

This article reveals about the some Jquery function usage and the bug present in it, and how to resolve the bug and get the solution what we need ?


I have decide to do a some Test in Jquery by a sample having a TextArea and a checkbox. when i scroll the textbox from the top  to the bottom , checkbox should be enabled and checked, It the user scrolls upwards then automatically checkbox should be disabled and unchecked. To do this we are code it in Scroll function of text area like below


HTML:


<html>
<head>

    <title></title>
    <link  rel="Stylesheet" href="StyleSheet1.css" />
    <script type="text/javascript" src="jquery-1.9.1.intellisense.js">
    </script>
    <script type="text/javascript" src="jquery-1.9.1.js">
   </script>   
   <script type="text/javascript" src="jquery-1.9.1.min.js">
    </script>


<script type="text/javascript" >

    $(document).ready(function () {

        $('#agree').attr('disabled', true);
        $('#agree').attr('checked', false);


        var scrollheight = $('#area')[0].scrollHeight;
        var innerheight = $('#area').innerHeight();

        $('#area').scroll(function () {


            var scrollposi = $(this).scrollTop();

            var remaim = scrollheight - innerheight;
            $('#feed').text(Math.ceil(remaim));
            // alert(scrollposi);
            if (remaim <= scrollposi) {

                $('#agree').attr('disabled', false);
            }
            else {

                $('#agree').attr('disabled', true);
            }

        });


    });
</script>


</head>
<body align="center">
<div id="feed">dd</div>
<textarea id="area" cols="50" rows="30">
<!-- <textarea id="terms" rows="20" cols="50"> -->
<p>YouTube was founded by Chad Hurley, Steve Chen, and Jawed Karim, who were all early employees of PayPal.[7] Hurley had studied design at Indiana University of Pennsylvania, and Chen and Karim studied computer science together at the University of Illinois at Urbana-Champaign.[8]
According to a story that has often been repeated in the media, Hurley and Chen developed the idea for YouTube during the early months of 2005, after they had experienced difficulty sharing videos that had been shot at a dinner party at Chen's apartment in San Francisco. Karim did not attend the party and denied that it had occurred, but Chen commented that the idea that YouTube was founded after a dinner party "was probably very strengthened by marketing ideas around creating a story that was very digestible".[9]
Karim said that the inspiration for YouTube came from Janet Jackson's role in the 2004 Super Bowl incident, when her breast was exposed during her performance, and from the 2004 Indian Ocean tsunami. Karim could not easily find video clips of either event online, which led to the idea of a video sharing site.[10] Hurley and Chen said that the original idea for YouTube was a video version of an online dating service, and had been influenced by the website Hot or Not.[11][12]
</p>
</textarea>
<p><input type="checkbox" id="agree"  /> : Agree</p>
</body>
</html>




Now the Bug is when you scroll down and reaches the last position of scroll checkbox is checked and when you move up the checkbox is disabled and unchecked . But when you scroll again second time to the last position of scroll the checkbox is not enabled. Because attr function is not working in JQuery version above 1.9 but working in below version it can be resolve by replace with prop functiopn


       $('#area').scroll(function () {


            var scrollposi = $(this).scrollTop();

            var remaim = scrollheight - innerheight;
            $('#feed').text(Math.ceil(remaim));
            // alert(scrollposi);
            if (remaim <= scrollposi) {

                   $('#agree').prop('checked'true);
            }
            else {

                  $('#agree').prop('checked'false);
            }

        });


              

Change in the function attr to prop makes the functionality to work correctly.This bug may be fixed in the future versions


I hope this article will make you to aware of using correct functions in JQuery.


Read a Excelsheet from the fileupload in ASP.Net

In this article we are going to see how to read the Excel Sheet data while uploading from the File Upload control in ASP.Net. when user upload the Excel sheet we are going to read the data from the excel sheet and show in gridview.


Html :

<body>
    <form id="form1" runat="server">
    <fieldset style="width:700px;">
    <legend>Application Register</legend>
    <div>
    File Name :
    <asp:FileUpload runat="server" id="fileupload" />
    <br />
    <br />
    <br />
   
    <asp:Button  ID="upload"  runat="server" Text="Upload" onclick="upload_Click"
            style="height: 26px;position:relative;left:80px"/>
    <br />
    <br />
    <br />
    Data's :
    <asp:GridView ID="content"  runat="server">
    </asp:GridView>
    </div>
    </fieldset>
    </form>
</body>



C#:

  public partial class ReadExcel : System.Web.UI.Page
    {

        System.Data.OleDb.OleDbConnection oleconnection;

        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void upload_Click(object sender, EventArgs e)
        {
            string filepath = Server.MapPath("\\"+fileupload.FileName);

            fileupload.SaveAs(filepath);

            if (Path.GetExtension(filepath) == ".xls")
            {
                oleconnection = new System.Data.OleDb.OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + filepath + ";Extended Properties=\"Excel 8.0;HDR=Yes;IMEX=2\"");
            }
            else if (Path.GetExtension(filepath) == ".xlsx")
            {
                oleconnection = new System.Data.OleDb.OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" + filepath + ";Extended Properties=\"Excel 12.0;HDR=Yes;IMEX=1\"");
            }

           
            OleDbCommand olecommand = new OleDbCommand("SELECT Serial,Name FROM [Sheet1$]",oleconnection);
            OleDbDataAdapter oleadapter = new OleDbDataAdapter(olecommand);
            DataSet ds = new DataSet();
            oleadapter.Fill(ds);

            content.DataSource = ds;
            content.DataBind();


        }
    }



Output:





I hope this article will help you to upload the excel file and the same time bind the data from the excel to Gridview.

Tuesday 10 December 2013

JQuery Basics - Part 2

From this article we can see the usage and how to use the JQuery functions , samples and there usages.

$  : Is for the notation of Jquery.

.   : Is used for the notation of Class

#  : Is used for the notation of Id

document : specifies the HTML document

window: specifies the browser window.

ready() : Ready is used to execute the code only after the html document is loaded and ready.

$(document).ready(function(){
           });



focus() :   Focus is a event fire when the user focus on the particular element .

       $(document).ready(function () {

           $('#ka').focus(function () {
               $('#div').html('element focused');
           });

       });




focusin() : Focus in is a event fires when user focus in the specified element.

       $(document).ready(function () {

           $('#ka').focusin(function () {
               $('#div').html('element focused in');
           });

       });



focusout() : Focus out is a event fires when user focus out or leave from the specified element.


       $(document).ready(function () {

           $('#ka').focusout(function () {
               $('#div').html('element focused out');
           });

       });



blur() : Is also like the Focus out, when the user remove his focus from the element tag.


       $(document).ready(function () {

           $('#ka').blur(function () {
               $('#div').html('element focused out');
           });

       });
  

Multiple Selector : we can create a Jquery code multiple selector rather than single one by specify the id or class name with ,spaces.


       $(document).ready(function () {

           $('#button, #paragraph').click(function () {
               $('#div').html('element clicked');
           });

       });




fadein() : It shows the specifies element in specified speed.

    $('#button, #paragraph').click(function () {
               $('#img').fadeIn(2000, 'swing', function () {
                   $('#div').html(' fade in completed');
               });
           });

       });
  

fadeout() : it invisible the specified element in the specified speed

    $('#button, #paragraph').click(function () {
               $('#img').fadeOut(2000, 'swing', function () {
                   $('#div').html(' fade in completed');
               });
           });

       });



attr() : It is used to get the value of a attribute of html element or set the value for the attribute.

       $(document).ready(function () {

           var div = $('#div').attr('hovertext');

       });


<div id="div" hovertext="this is sample"></div>



val(): Gets the value of the html element.

$(document).ready(function () {

           var textval = $('#txt').val();
           alert(textval);

       });




length(): Get the length of the specified element

var textval = $('#txt').text().length;



* : indicates get the all elements
[ ] : specifies the conditional symbol
find(): Is used to find the element inside a specified element.

  $('input[type="text"]').find('*').last().addClass('bold').click(function () {
               $(this).prevAll().toggle();
           }).prevAll().hide(); ;

   
even, odd : Selection

$('table tr:even').css('background-color', 'yellow');
$('table tr:odd').css('background-color''yellow');




load() : Event fires when the specified element is loaded

           $(window).load(function () {
               alert('window loaded');
           });




unload() :  Event fires when the specified element is unloaded

           $(window).unload(function () {
               alert('window unloaded');
           });




contains() :  specifies whether the given string or data have the value specified

  $('#search').keyup(function () {

               var searchname = $(this).val();
               $('#names li').removeClass('high');

               if (jQuery.trim(searchname) != '')
                   $('#names li:contains("' + searchname + '")').addClass('high');

           });




change() : Event fires when the specified element undergoes and change in the attributes.

   $('#list').change(function () {
               var listvalue = $(this).val();
               $('#text_feed').html(' <a> you have selected ' + listvalue + '</a>');
           });




next() : This function will give the element next to the specified one.

    $('input[type="file"]').change(function () {
               $(this).next().attr('disabled', false);
           }).next().attr('disabled', true);



removeattribute() : This is used to remove the attribute from the element tag.

$('#names').removeAttr('hovertext');




click() : This event fires when user click on the specified element.

           $('#names').click(function () {
           });

  
dblclick() : This event fires when user double click on the specified element.

           $('#names').dblclick(function () {
           });



keyup() : This event fires when the user releases the key in the keyboard

$('#search').keyup(function () {

               var searchname = $(this).val();
               $('#names li').removeClass('high');

               if (jQuery.trim(searchname) != '')
                   $('#names li:contains("' + searchname + '")').addClass('high');

           });




keydown() : This event fires when the users press the key in the keyboard.

$('#search').keydown(function () {

               var searchname = $(this).val();
               $('#names li').removeClass('high');

               if (jQuery.trim(searchname) != '')
                   $('#names li:contains("' + searchname + '")').addClass('high');

           });




toggle() : This function is used to write the two function actions for a single event. So it will acts as one in first click and acts as another one in the second click

           $('#btnsh').click(function () {
               $('#Data').toggle();
           });
   

hover() : This event fires when user brings the mouse hover the specified element.


           $('button').hover(function () {
               alert('mouse hovered');
           });



scroll() : This event fires when the user scroll the specified element.

$('#textareas').scroll(function () {

               $('#Data').html($(this).scrollTop());

           });




mouseenter : This event fires when the mouse enter on the specified element.

     $('.hover').mouseenter(function (e) {

               var desc = $(this).attr('hovertext');

               $('#feedback').html(desc).show();
               $('#feedback').css('left', e.clientX + 20).css('top', e.clientY + 10);


           });


mouseleave : This event fires when the mouse leave from the specified element.

          $('.hover').mouseleave(function () {
               $('#feedback').hide();
           });




bind() : It is used to bind the same action for one or more events

     $('p').bind('mouseenter mouseleave', function () {
               $(this).toggleClass('bold');
           });




after() : It is used to find the element present after the given one.


   $('body').on('click', '.duplicate', function () 
       $(this).after('<input type="button" class="duplicate" value="submit" />');

           });




live() or on() : It  is used to add the element in the document with all event s and class bindings live to the running document.


$('body').on('change', '.file', function () {
               $(this).after('<input type="file" class="file" />');
           });




From this article i hope you can understand some of the basics functions and there usages with some sampels codes,We can see some more stuffs in Jquery in Next article.




Sunday 8 December 2013

JQuery Basics - Part 1

      From this article we are going to see some of the basic things in the JQuery. JQuery is a light weight model of Javascript library, It is gives the Multi browser support and CSS3. JQuery have many plugins now a days to support the web document.Now Let we start the tutorial.

JQuery : $ symbol represents the JQuery , so whenever writing the JQuery we have to specify the $ symbol in the HTML Document.



HTML:

<html>
<head>

    <title></title>
    <script type="text/javascript" src="jquery-1.9.1.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#sm").hide();

            $("#wel").fadeIn('slow');

            $('#sm2').click(function () {

                $('#sm2').hide();
            });
            $("#btn").click(function () {

                $("p").toggle('fast');
                var val = $('#btn').attr('value');

                if (val == 'show') {
                    $('#btn').attr('value', 'hide');
                }
                else {
                    $('#btn').attr('value', 'show');
                }

            });

            $("#ifram").load(function () {

                alert("Image Loaded");
            });

            $(window).load(function () {
                alert("Window Loaded");

                var totalelements = $('*').length;
                alert('Total elements present in Html document ' + totalelements);

                var elelegend = $('#tle').find('*').length;
                alert('Total elements present inside Fieldset Tag ' + elelegend);

                var btnval = $('input').val();
                alert(btnval);

                var title = $("#title").text();
                alert(title);
                $(':submit').click(function () {

                    var id = $(this).attr('value', 'Please Wait');                   
                });
                $('p:last').text("Value for Last Para");
            });

        });       

    </script>
</head>
<body align="center">


<div id="title">Jquery Sample</div>

<input id="reg" type="submit" value="Register" />

<input type="submit" value="Save" />



<fieldset  id="tle" style="width:500px">
<script type="text/javascript" src="Toggle.js"></script>
<legend >Jquery Sample</legend>
<a href="http://www.dotnetvisio.blogspot.com"> Click here to go to for My Blog</a>
<img id="ifram" src="3medium.jpg" />

<div id="wel" style="display:none"> Welcome to the JQuery tutorial </div>
<input id="btn" type="button" value="show" />
<p id="sm">
   This is a Sample Paragrapgh to test the Jquery
</p>

<p id="sm2">Click Here to hide this Paragraph</p>
</fieldset>

</body>
</html>

Output:

      Fadein & toggle

      Button Selector

       Show & Hide

      
       Load and UnLoad





Explanation:

$(document).Ready() : Means when the html document is ready then corresponding function will execute

Load():    Will fire when the given element is loaded in the document.

Unload(): Will fire when the specified element is unloaded.

FadeIn(): Will Fade in the specified element

Attr():      Is used to get the Attribute value of the element 

:button :   Will specify that corresponding action is for all elements, To do the changes for clicked one then pass the "this" as a parameter to the function

Toggle() : Is used to Toggle the Given element.

hide()    :  Is used to hide the Given element.

show()  :  Is used to show the Given element.

#           : Is used to specify a element of particualr ID.



From this JQuery methods explanation you can learn some basics and there behaviours