Tuesday, 2 January 2018

Getting The Count Of Words And Characters In A Text Using JavaScript

With the below code, when we enter some text in an textbox and click button, we will get the count of words and characters in the text entered. 

<input type="text" id="txtinput" />  
<button onclick="countwords()">  
        Check Count</button>  
<script>
    function countwords() {
        var val = document.getElementById("txtinput").value;
        var words = 0, chars = 0;
        if (val != "") {
            words = val.replace(/\s+/gi, ' ').split(' ').length; // Count words  
            chars = val.length;                                 // Count characters  
        }
        alert(chars + " Characters & " + words + " Words!");
    }  
</script>

Hope this will be helpful!

Simplest Code To Import Data From A Xml File To Dataset

Here is a Simple one line code to import xml file to dataset :-

DataSet ds = new DataSet();  
ds.ReadXml(Server.MapPath("XMLFile.xml"), XmlReadMode.InferSchema); 

Hope this will be helpful!

Updating A Table Using Inner Join In SQL

Sometimes we may need to update some columns in a table in SQL with values from columns of another table. For this purpose we can use inner join with update query as below.

UPDATE t1  
SET t1.somecol1 = t2.somecol2  
FROM table1 t1  
INNER JOIN table2 t2 ON t1.id = t2.id  

With above query, column 'somecol1' of table1 will be updated with values from 'somecol2' of table2 satisfying the inner join condition.

Hope this will be helpful!

Forcing Browsers to Fetch js/css Files From Server Instead of Cache

Sometimes we have to make some changes in our css or js files. After this we upload it to our servers. But while opening our pages in browser, it wont reflect our changes. We may have to clear our browser cache to see that changes. This is not a feasible solution for websites with thousands of visitors. So here is simple tip we can use in our websites.

First declare a global application variable in our global.asax file

void Application_BeginRequest(Object source, EventArgs e)  
{  
    Application["version"] = "1.0";  


Now while including js/css files in our aspx pages, just add a query string with them as follows.

<script src="youjsfilename.js?ver=<%= Application["version"] %>" type="text/javascript"></script>  
   <link href="youcssfilename.css?ver=<%= Application["version"] %>" rel="stylesheet"  
       type="text/css" /> 
        
Now whenever you make changes in these files, you can just change the value of "version" in global file.

void Application_BeginRequest(Object source, EventArgs e)  
{  
    Application["version"] = "1.1";  
}  

Hope this will be helpful!

Selecting Specific set of Rows using OFFSET and FETCH in SQL

We can use OFFSET and FETCH keywords to select specific number of rows in SQL Select query. 

SELECT *  
FROM Tablename  
ORDER BY colname  
OFFSET 0 ROWS  
FETCH NEXT 10 ROWS ONLY  

The above query will returns first 10 records. 

SELECT *  
FROM Tablename  
ORDER BY colname  
OFFSET 10 ROWS  
FETCH NEXT 10 ROWS ONLY  

Above query will returns records 11 to 20.

Likewise you can increase OFFSET values to get next set of records. 

Hope this will be helpful!

Custom sorting of records in SQL using Case Statement

Sometimes we may have to sort records in such a way that we need some records to be always shown at top. At that cases below query may be helpful.

SELECT *   
FROM  Tablename  
ORDER BY CASE WHEN colname = 'Somevalue1' THEN null  
              WHEN colname = 'Somevalue2' THEN '1'  
              ELSE colname END ASC  

Here sorting is based on column 'colname' .

If 'colname' has value 'Somevalue1', it will be always at top as this query treats that value as null.
Similarly 'colname' having value 'Somevalue2', it will be treated as having value '1' and will be assigned in respective position based on that value while sorting.

Hope this will be helpful!

Preview Image files before uploading using Jquery & Html5

Here is a simple script to preview the image files before saving them using jquery & html5

First create a html page and put below fiel upload button and an preview div in it :-

<input type="file" id="imageUpload3" onchange="previewimg(this)" />  
   <br />  
   <div id="dvPreview3" style="margin-top: 40px;">  
   </div>  

Now we write the Jquery function as below :- 

<script>
    function previewimg(evt) {
        var regex = /^([a-zA-Z0-9\s_\\.\-:()])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
        if (regex.test($(evt).val().toLowerCase())) {
            if ($.browser.msie && parseFloat(jQuery.browser.version) <= 9.0) {
                alert("This browser does not support FileReader.");
            }
            else {
                if (typeof (FileReader) != "undefined") {
                    $("#dvPreview3").show();
                    $("#dvPreview3").html("<img/>");
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $("#dvPreview3 img").attr("src", e.target.result);
                    }
                    reader.readAsDataURL($(evt)[0].files[0]);
                } else {
                    alert("This browser does not support FileReader.");
                }
            }
        } else {
            alert("Please upload a valid image file.");
            $('#imageUpload3').val('');
        }
    }  
</script>  

Now, once you browse images using fileupload control, you can preview images in the bottom div.

Hope this will be helpful!