Code Simplified – Viral Sarvaiya

Code Simplified – Viral Sarvaiya, Web Developer Friends, dot net Developer, Sql Server Developer

Posts Tagged ‘Javascript’

LINQ expressions with javaScript!

Posted by Viral Sarvaiya on April 7, 2015


Hello All, after a long time..

I get very useful link which I like to share with you all.

Being a web developer and using javaScript everyday, Now more than ever javaScript is exploding in its usage.

we can use linq in javascipt. surprised? click here to learn more about that.

Thanks.

Posted in ASP.NET, Javascript | Tagged: , | Leave a Comment »

Using Jquery detect mobile

Posted by Viral Sarvaiya on October 22, 2013


Toay i get good script of jQuery that detect mobile.

It require to Jquery file – http://code.jquery.com/jquery-1.8.3.js

Here code is.

$(document).ready(function () {
  var isMobile = {
    Android: function () {
      return navigator.userAgent.match(/Android/i) ? true : false;
    },
    BlackBerry: function () {
      return navigator.userAgent.match(/BlackBerry/i) ? true : false;
    },
    iOS: function () {
      eturn navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
    },
    Windows: function () {
      return navigator.userAgent.match(/IEMobile/i) ? true : false;
    },
    any: function () {
      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
    }
  };
  alert(isMobile.any())
});

Hope it helps you.

Thanks.

Posted in Javascript, Jquery | Tagged: , , , , | Leave a Comment »

Export to Excel using jQuery

Posted by Viral Sarvaiya on October 21, 2013


From my past posts explains how to export to excel as
1. Export GridView Data into CSVFile In Asp.net
2. GridView Export to Excel

So here its 3rd type to export to excel using Jquery.

In javascript, we have window.open function. We are using same function to export to excel using jquery.

Syntax,

window.open(MIMEtype,replace);

Here
MIMEtype : this is the optional parameter, and its for type of document. default it take as “text/html”
replace : this is also optional parameter, and its set.

Example,

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

Hope its helps you.

Thanks.

Posted in .Net, ASP.NET, Javascript, Jquery | Tagged: , , , , , | Leave a Comment »

Calling a WCF service from Javascript

Posted by Viral Sarvaiya on May 16, 2011


Hi

we know how to use WCF service in silverlight and asp.net that shows in my some previous posts

https://viralsarvaiya.wordpress.com/2010/09/17/bind-silverlight-grid-view-with-wcf-service/

https://viralsarvaiya.wordpress.com/2010/08/26/use-of-wcf-service-in-silverlight/

but i face another problem in it, it can possible to call WCF service from javascipt?

Answer is yes  and i find interesting post.

for more detail click here.

thanks and enjoy…

Posted in .Net, ASP.NET, RIA WCF, Silverlight, WCF Services | Tagged: , , , , , , , | Leave a Comment »

Redirect to a New Page using JavaScript

Posted by Viral Sarvaiya on October 16, 2010


An easy way to redirect a user to a new Page using JavaScript is to use


window.location = "http://www.devcurry.com";

However the problem with this approach is that it adds an item to your browser history. So in browsers like IE, the user can access the history by hitting the back button, which can be confusing to users, as they will redirected back and forth.

 

If you want to avoid the back button, use ‘window.location.replace’ which loads the new page and replaces the current page in the user’s History, with the new one, as shown below:


<head>
 <title>Redirect to a New Page</title>
 <script type="text/javascript">
 window.location.replace("http://www.devcurry.com");
 </script>
</head>
<body>

Now when you are redirected to the new page, there is no back button.

For More Details Click Here

Posted in ASP.NET, Javascript | Tagged: , , , | Leave a Comment »

Show Div tag in middle of the page with javascript

Posted by Viral Sarvaiya on October 27, 2009


take a element of Div


<div id="contentmsg" style="position: absolute; right:25%; width: 100px; height:100px;visibility: hidden;">
<img src="images/loading.gif" width="50px" height="50px" />
</div>

suppose we have a dropdown and according to onchange() event this div is visible or hide,


<asp:DropDownList ID="ddlparavalue" runat="server"></asp:DropDownList>

in the server side bind the dropdownlist dynamically and add the attribultes as below


ddlparavalue.Attributes.Add("onchange", "javascript:void HideOrVisibleDDL();")

in the head of the html section write the following code


<script language="javascript" type="text/javascript">
function HideOrVisibleDDL() {

var windowHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;
var windowWidth = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth;
var IpopTop = ((windowHeight - document.getElementById("contentmsg").offsetHeight) / 2);

document.getElementById("contentmsg").style.top = IpopTop + document.body.scrollTop;
document.getElementById("contentmsg").style.left = (document.body.clientWidth / 2) - 50;

document.getElementById("contentmsg").style.visibility = "visible";

}
</script>

in some case it is not working just becouse of the DOCType tag so please remove the DOCTYPE tag as like below


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

so remove this tag.

enjoy coding….

Posted in ASP.NET, Javascript | Tagged: , , | 3 Comments »

Debugging JavaScript Codes in VisualStudio.Net

Posted by Viral Sarvaiya on October 20, 2009


Follow these steps to enable script debugging in VS.NET

Tools->Internet Options…->Advanced->Disable Script Debugging [Un-check]

1.gif

2.gif

4.gif

When you’ve enabled Script Debugging, then in the IE go to,  View->Script Debugger->Open

5.gif

Once you clicked Open, the page reloads and activates the script debugger, you can set break-point and do F10 & F11.

Alternately, you can put a line like this in the java-script code where you need to break

debugger;

Example;

<div id="highlighter_826276">
<div>
<div><span style="margin-left: 0!important;"><code>function</code> <code>Debug()</code></span></div>
<div><span style="margin-left: 0!important;"><code>{ </code></span></div>
<div><code> </code><span style="margin-left: 28px!important;"><code>debugger;</code></span></div>
<div><code> </code><span style="margin-left: 28px!important;"><code>alert(</code><code>'Break at above statement'</code><code>); </code></span></div>
<div><span style="margin-left: 0!important;"><code>}</code></span></div>
<div>

Posted in ASP.NET, Javascript | Tagged: , , | Leave a Comment »

jQuery Tutorials Examples

Posted by Viral Sarvaiya on September 10, 2009


jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript
So we have selected a set of best tutorials that will strengthen your practical side using jQuery .
Click here to read more…..

50 useful new jquery  techniques

create an amazing music player using mouse gestures hotkeys in jquery

creating a virtual jquery keyboard

Posted in Jquery | Tagged: , | Leave a Comment »

Dynamic Date Validation using JavaScript

Posted by Viral Sarvaiya on July 11, 2009


The whole idea of the tutorial is to dynamically validate the data and display the results when the user is typing the same. The advantage of this approach is that it allows the user to correct its mistake first and the move to the next item

The article will cover the following aspects of data validation

1.     Enforcing date format dynamically i.e dd/mm/yyyy

2.     Validating date dynamically on key events.

3.     Validating whether the date entered is within the valid range

4.     Validating Birthdates

Validation and Date format Enforcement

The DateFormat function enforces the following conditions

1.     The characters entered should be numeric

2.     Automatically appends slashes as the user types it

It enforces numeric character check based on the keyboard key values thus simply do not allow the user to enter any character except number.

The next function ValidateDate as the name suggest simply validates the date. Using the JavaScript date functions and notifies the user whether the data is valid or not.

The compete script code for the two functions is given below

<script type = “text/javascript”>

var isShift=false;

var seperator = “/”;

function DateFormat(txt , keyCode)

{

if(keyCode==16)

isShift = true;

//Validate that its Numeric

if(((keyCode >= 48 && keyCode <= 57) || keyCode == 8 ||

keyCode <= 37 || keyCode <= 39 ||

(keyCode >= 96 && keyCode <= 105)) && isShift == false)

{

if ((txt.value.length == 2 || txt.value.length==5) && keyCode != 8  )

{

txt.value += seperator;

}

return true;

}

else

{

return false;

}

}

function ValidateDate(txt, keyCode)

{

if(keyCode==16)

isShift = false;

var val=txt.value;

var lblmesg = document.getElementById(“<%=lblMesg.ClientID%>”) ;

if(val.length == 10)

{

var splits = val.split(“/”);

var dt = new Date(splits[1] + “/” + splits[0] + “/” + splits[2]);

//Validation for Dates

if(dt.getDate()==splits[0] && dt.getMonth()+1==splits[1]

&& dt.getFullYear()==splits[2])

{

lblmesg.style.color=”green”;

lblmesg.innerHTML = “Valid Date”;

}

else

{

lblmesg.style.color=”red”;

lblmesg.innerHTML = “Invalid Date”;

return;

}

//Range Validation

if(txt.id.indexOf(“txtRange”) != -1)

RangeValidation(dt);

//BirthDate Validation

if(txt.id.indexOf(“txtBirthDate”) != -1)

BirthDateValidation(dt)

}

else if(val.length < 10)

{

lblmesg.style.color=”blue”;

lblmesg.innerHTML =

“Required dd/mm/yy format. Slashes will come up automatically.”;

}

}

</script>

You will notice that I am calling two more functions

1.     RangeValidation

2.     BirthDateValidation

RangeValidation

RangeValidation function validates that the date falls within a valid range for here I have used the range 01/01/1900 to 31/12/2099 If the date is not within the range it is termed as invalid.

Refer the script below

<script type = “text/javascript”>

function RangeValidation(dt)

{

var startrange = new Date(Date.parse(“01/01/1900”));

var endrange = new Date(Date.parse(“12/31/2099”));

var lblmesg = document.getElementById(“<%=lblMesg.ClientID%>”) ;

if (dt<startrange || dt>endrange)

{

lblmesg.style.color=”red”;

lblmesg.innerHTML = “Date should be between 01/01/1900 and 31/12/2099”;

}

}

</script>

BirthDateValidation

BirthDateValidation function validates the BirthDate based on two conditions

1.     The date should be less that equal to the current date

2.     The date should be greater that the difference between the current date and the date 100 years back.

<script type = “text/javascript”>

function BirthDateValidation(dt)

{

var dtToday = new Date();

var pastDate = new Date(Date.parse(dtToday.getMonth()+”/”+

dtToday.getDate()+”/”+parseInt(dtToday.getFullYear()-100)));

var lblmesg = document.getElementById(“<%=lblMesg.ClientID%>”);

if (dt<pastDate || dt>=dtToday)

{

lblmesg.style.color=”red”;

lblmesg.innerHTML = “Invalid BirthDate”;

}

else

{

lblmesg.style.color=”green”;

lblmesg.innerHTML = “Valid BirthDate”;

}

}

</script>

The script will be called on TextBox keyup and keydown events in the following way

<asp:TextBox ID=”txtValidate” runat=”server” MaxLength = “10”

onkeyup = “ValidateDate(this, event.keyCode)”

onkeydown = “return DateFormat(this, event.keyCode)”></asp:TextBox>

For more information Click Here

Posted in ASP.NET, Javascript | Tagged: , | 4 Comments »

Watermark TextBox using JavaScript

Posted by Viral Sarvaiya on July 11, 2009



<script type = "text/javascript">

var defaultText = "Enter your text here";

function WaterMark(txt, evt)

{

if(txt.value.length == 0 && evt.type == "blur")

{

txt.style.color = "gray";

txt.value = defaultText;

}

if(txt.value == defaultText && evt.type == "focus")

{

txt.style.color = "black";

txt.value="";

}

}

</script>

The script will be called on onblur and onfocus events of the textbox. The script simply does the following two checks

1. If the textbox is empty and the event type is blur event it sets the watermark and changes the font color as Gray.

2. If the textbox text matches default text and the event type is the focus it clears the textbox and sets the font color as Black.

That’s all and just we now need to call it with the textbox.


<asp:TextBox ID="TextBox1" runat="server" Text = "Enter your text here"

ForeColor = "Gray" onblur = "WaterMark(this, event);"

onfocus = "WaterMark(this, event);">

</asp:TextBox>

As you will notice I am calling the same script on onblur and onfocus event and passing the reference of the textbox and the event object.

Visual Studio will throw warning when you call client side event in the above way. So if you do not want to get the warnings you can do in the following way from code behind.


TextBox1.Attributes.Add("onblur", "WaterMark(this, event);")

TextBox1.Attributes.Add("onfocus", "WaterMark(this, event);")

Posted in ASP.NET, Javascript | Tagged: , , , | Leave a Comment »

 
%d bloggers like this: