Sunday, 3 March 2013

The difference between trigger() and triggerHandler()




<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").select(function(){
    $("input").after(" Text marked!");
  });
  $("#btn1").click(function(){
    $("input").trigger("select");
  });
  $("#btn2").click(function(){
    $("input").triggerHandler("select");
  });
});
</script>
</head>
<body>

<p>Click each button to see the difference between trigger() and triggerHandler().
<br><br>
<input type="text" value="Hello World">
<br><br>
<button id="btn1">trigger()</button>
<button id="btn2">triggerHandler()</button>

</body>
</html>

trigger() is call a internel code of select event and select a textbox
The trigger() method triggers the specified event and the default behavior of an event (like form submission) for the selected elements.

triggerHandler() is call internel code of select event ,but textbox is not select



Monday, 25 February 2013

Difference between IEnumerable VS IQueryable


   


IEnumerable

  1. IEnumerable exists in System.Collections Namespace.
  2. IEnumerable can move forward only over a collection, it can’t move backward and between the items.
  3. IEnumerable is best to query data from in-memory collections like List, Array etc.
  4. While query data from database, IEnumerable execute select query on server side, load data in-memory on client side and then filter data.
  5. IEnumerable is suitable for LINQ to Object and LINQ to XML queries.
  6. IEnumerable supports deferred execution.
  7. IEnumerable doesn’t supports custom query.
  8. IEnumerable doesn’t support lazy loading. Hence not suitable for paging like scenarios.
  9. Extension methods supports by IEnumerable takes functional objects.



    IQueryable

    1. IQueryable exists in System.Linq Namespace.
    2. IQueryable can move forward only over a collection, it can’t move backward and between the items.
    3. IQueryable is best to query data from out-memory (like remote database, service) collections.
    4. While query data from database, IQueryable execute select query on server side with all filters.
    5. IQueryable is suitable for LINQ to SQL queries.
    6. IQueryable supports deferred execution.
    7. IQueryable supports custom query using CreateQuery and Execute methods.

Difference between disabled and read only attributes


Disabled attribute

  1. Disabled form fields or elements values don’t post to the server for processing.
  2. Disabled form fields or elements don’t get focus.
  3. Disabled form fields or elements are skipped while tab navigation.
  4. Some browsers (Like IE) provide default style (Gray out or emboss text) for disabled form fields or elements.

Read Only Attribute

  1. Read Only form fields or elements values post to the server for processing.
  2. Read Only form fields or elements get focus.
  3. Read Only form fields or elements are included while tab navigation.
  4. Some browsers do not provide default style for Read-Only form fields or elements. 

Monday, 4 February 2013

jQuery-Selecting elements with uncommon / special characters in ID or class name

 
Just add double backslashes \\ before any of the special characters 
 
HTML generated by some CMS or frameworks include elements with rather 
uncommon characters in ID or class names. For example, some may have 
special characters such as ‘.’ or ‘[..]’ in the ID or Class. To work 
around this, a selector in jQuery should be written this way:
 
Example 1 
 
$("$title.id") // won't work for ID: title.id
 
$("$title\\.id") // works for ID: title.id  
 
 
Example 2
$("$title[id]") // won't work for ID: title[id]

$("$title\\[id\\]") // works for ID: title[id]
 

Sunday, 6 January 2013

jQuery to Validate File Upload Extension in File Upload Control



<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$('#<%=fileupload1.ClientID %>').change(function() {
var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
alert("Only '.jpeg','.jpg', '.png', '.gif', '.bmp' formats are allowed.");
}
})
})
</script>

Tuesday, 1 January 2013

C# - Difference between Convert.tostring and .tostring() method

The basic difference between them is “Convert.ToString(variable)” handles NULL values even if variable value become null but “variable.ToString()” will not handle NULL values it will throw a NULL reference exception error.

 Example

//Returns a null reference exception for str.
string strque;
object i = null;
strque = i.ToString();
//Returns an empty string for str and does not throw an exception. 
string strque;
object i = null;
strque = Convert.ToString(i);

So as a good coding practice using “convert” is always safe.

Monday, 3 December 2012

Remove Elements Without Deleting Data in jquery



The new ".detach()" method allows you to remove elements from the DOM, much like the ".remove()" method. The key difference with this new method is that it doesn’t destroy the data held by jQuery on that element. This includes data added via ".data()" and any event handlers added via jQuery’s event system.

This can be useful when you need to remove an element from the DOM, but you know you’ll need to add it back at a later stage. Its event handlers and any other data will persist.




var foo = jQuery('#foo'); 
// Bind an important event handler 
foo.click(function(){ 
    alert('Foo!'); 
}); 
foo.detach(); // Remove it from the DOM 
// … do stuff 
foo.appendTo('body'); // Add it back to the DOM 
foo.click(); // alerts "Foo!"

jquery Everything “until”!

Three new methods have been added to the DOM traversal arsenal in 1.4, "nextUntil", "prevUntil" and "parentsUntil". Each of these methods will traverse the DOM in a certain direction until the passed selector is satisfied. So, let’s say you have a list of fruit:



  1. <ul>  
  2.     <li>Apple</li>  
  3.     <li>Banana</li>  
  4.     <li>Grape</li>  
  5.     <li>Strawberry</li>  
  6.     <li>Pear</li>  
  7.     <li>Peach</li>  
  8. </ul>
 You want to select all of items after "Apple", but you want to stop once you reach "Strawberry". It couldn’t be simpler:


  1.  jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)'); 

Wednesday, 28 November 2012

template link

http://themeforest.net/item/oreva-business-html5-template/full_screen_preview/2374211
http://themeart.net/themes/simplex/
http://htmldemo.themi.co/popular-demo/01_home.html



http://themeforest.net/item/alexx-multipurpose-html5-theme/full_screen_preview/3370259
http://themes.purethemes.net/?theme=centum
http://simplicitywp.olegnax.com/
http://themes.webmandesign.eu/clifden/
http://demo.arrowthemes.com/index.php?theme=lighthouse-joomla
http://themeforest.net/item/arapah-modern-culinary-wordpress-themes/full_screen_preview/3236943
http://www.sorrifacil.com.br/clinicas/

http://themeforest.net/item/onecart-ajax-responsive-ecommerce-wordpress-theme/full_screen_preview/3167538

http://joomla.themesoul.com/rammih/

http://www.beoplay.com/Products/BeoplayA3#features

Saturday, 3 November 2012

Wednesday, 31 October 2012

Export Html table data to Excel using jQuery

<br/>
<div id="dvData">
<table>
    <tr>
        <th>Column One </th>
        <th>Column Two</th>
        <th>Column Three</th>
    </tr>
    <tr>
        <td>row1 Col1</td>
        <td>row1 Col2</td>
        <td>row1 Col3</td>
   </tr>
   <tr>
        <td>row2 Col1</td>
        <td>row2 Col2</td>
        <td>row2 Col3</td>
   </tr>
      <tr>
        <td>row3 Col1</td>
        <td>row3 Col2</td>
        <td>row3 Col3</td>  
   </tr>
</table>
</div>
<br/>
<input type="button" id="btnExport" value=" Export Table data into Excel " />

$("#btnExport").click(function(e) {
      window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('#dvData').html()));
       e.preventDefault();
});

Wednesday, 24 October 2012

Create Accordion Panel using Jquery

Html structure

<div class="accordion">
    <h3 class="">Question One Sample Text</h3>
    <p style="display: none; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <h3 class="">This is Question Two</h3>
    <p style="display: none; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <h3 class="">Another Questio here</h3>
    <p style="display: none; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <h3 class="">Sample heading</h3>
    <p style="display: none; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
    <h3 class="active">Sample Question Heading</h3>
    <p style="display: block; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
</div>

 <script type="text/javascript">
        $(document).ready(function () {

            $(".accordion h3:first").addClass("active");
            $(".accordion p:not(:first)").hide();

            $(".accordion h3").click(function () {
                $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
                $(this).toggleClass("active");
                $(this).siblings("h3").removeClass("active");
            });

        });
</script>

 <style type="text/css">
body {
    margin: 10px auto;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
    width: 480px;
    border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
    background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;
    padding: 7px 15px;
    margin: 0;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    border: solid 1px #c4c4c4;
    border-bottom: none;
    cursor: pointer;
}
.accordion h3:hover {
    background-color: #e3e2e2;
}
.accordion h3.active {
    background-position: right 5px;
}
.accordion p {
    background: #f7f7f7;
    margin: 0;
    padding: 10px 15px 20px;
    border-left: solid 1px #c4c4c4;
    border-right: solid 1px #c4c4c4;
}
</style>

load js dynamicaly in jquery mobile

 $("#Registration").live("pageshow", function () {
            addfooter();

            $.getScript('xdate.js', function () { });

            $.getScript('mobipick.js', function () {
                $("#BirthDate").mobipick();
                picker.bind("change", function () {
                    //   formatted date, like yyyy-mm-dd             
                    var date = $(this).val();

                    //  JavaScript Date object
                    var dateObject = $(this).mobipick("option", "date");
                });
            });
        });