Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Tuesday, 5 July 2016

What does 3+2+”4” evaluate in javascript?.



Since 3 and 2 are integers, so it will do addition operation first and give the result 5. Now result 5 will concatenations with string 7and give the result 77.

What does “3”+2+4 evaluate in javascript?.


Since 3 is string, so everything is a string. So result is 324.

Tuesday, 8 October 2013

How to calculate route between two points on google map.

In this article, I have explained how to calculate route on google map between two points. For this I have taken two text boxes and one button on the page. Enter the two points name or latitude and longitude values and click the button then it will show the path on map.

JS code for calculating Route:-

<script>
var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();



    function InitializeMap() {
        directionsDisplay = new google.maps.DirectionsRenderer();

        var latlng = new google.maps.LatLng(12.917354, 77.622064);
        var myOptions =
            {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        directionsDisplay.setMap(map);
        

    }

    function calcRoute() {


        var start = document.getElementById('startvalue').value;
      
      
        var end = document.getElementById('endvalue').value;
       

            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

       
           
            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
        }


    function Button1_onclick() {
        calcRoute();
    }
</script>

Full coding with JS and Html:-
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>

var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();



    function InitializeMap() {
        directionsDisplay = new google.maps.DirectionsRenderer();

        var latlng = new google.maps.LatLng(12.917354, 77.622064);
        var myOptions =
            {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        directionsDisplay.setMap(map);
        

    }

    function calcRoute() {


        var start = document.getElementById('startvalue').value;
      
      
        var end = document.getElementById('endvalue').value;
       

            var request = {
                origin: start,
                destination: end,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };

       
           
            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
        }


    function Button1_onclick() {
        calcRoute();
    }
</script>

</head>
 <body   onload = "InitializeMap()">
<table id ="control">
<tr>
<td>
<table>
<tr>
<td>From:
   
</td>
<td>
    

    <input id="startvalue" type="text" style="width: 305px"  /></td>
</tr>
<tr>
<td>To:</td>
<td><input id="endvalue" type="text" style="width: 301px" /></td>
</tr>
<tr>
<td align ="right">
    <input id="Button1" type="button" value="GetDirections" onclick="return Button1_onclick()" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign ="top">
<div id ="map" style="height: 390px; width: 489px"></div>
</td>

</tr>
</table>
</body>
</html>

Tuesday, 24 September 2013

How to show the message in asp.net website using javascript.

In this article , I have explained how to show Message Box in asp.net website using javascript.I will also tell you how to solve error Message Box not working inside update panel. Message box is frequently used in asp.net application for showing the message.

In the code behind file(.aspx.cs ) write the below code:-

protected void btnSave_Click(object sender, EventArgs e)
    {

   ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), Guid.NewGuid().ToString(), "alert('Data Submitted Successfully');", true);

    }

If you are using Update panel then this code will not work.So please write the below code in code behind page.

protected void btnSave_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "Message", "alert('Data Submitted Successfully');", true);

    }

Tuesday, 17 September 2013

Validate Asp.Net checkbox list using Custom validator .

In this article , I have explained how to validate Asp.net checkboxlist using custom validator means I have to select atleast one checkbox from checkboxlist.

Put the checkboxlist control on design page and add some items in it and one cutome validator and one button.

<asp:CheckBoxList ID="CheckBoxList1" runat="server">
    <asp:ListItem Text="c#"></asp:ListItem>
    <asp:ListItem Text="ASP"></asp:ListItem>
    <asp:ListItem Text="Asp.Net"></asp:ListItem>
    <asp:ListItem Text="Sql"></asp:ListItem>
    <asp:ListItem Text="Ajax"></asp:ListItem>
    </asp:CheckBoxList>
    <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Please select atleast one item from list." ForeColor="Red"
    ClientValidationFunction="ValidateCheckBoxList"></asp:CustomValidator>
    <asp:Button ID="Button1" runat="server" Text="Submit" />

JavaScript Function:-

Here I have written javascript function for selecting atleast one checkbox from checkboxlist and called this method on custom validator.
This function is executed when cutom validator is trigered on button click.
If checkbox is checked then isvalid value set to true else false.

<script type="text/javascript">
    function ValidateCheckBoxList(sender, args) {
    var checkBoxList=document.getElementById("<%=CheckBoxList1.ClientID %>");
    var checkBox=document.getElementsByTagName("input");
    var isvalid=false;
    for(var i=0;i<checkBox.length;i++)
    {
        if (checkBox[i].checked) {
            isvalid = true;
            break;
        }
    }
    args.IsValid = isvalid;
    }

</script>


Wednesday, 15 May 2013

Automatic Scroll down in Multiline TextBox in asp.net using JavaScript.

Introduction:-


In this article , I have described how to automatic scroll down in Multiline textbox in asp.net using  JavaScript . ScrollBar will persistent when you entering data in textbox or adding data in textbox.

Design page:-

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    window.onload = function () {
        var textarea = document.getElementById('<%=TextBox2.ClientID %>');
        textarea.scrollTop = textarea.scrollHeight;
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="TextBox1" runat="server" Text="Sample Text"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Add" OnClick="Button1_Click" />
<hr />
<asp:TextBox ID="TextBox2" runat="server" TextMode="MultiLine" Height="100"
            ontextchanged="TextBox2_TextChanged"></asp:TextBox>
    </div>
    </form>
</body>
</html>

Code Behnid Page:-

protected void Button1_Click(object sender, EventArgs e)
    {
        TextBox2.Text += TextBox1.Text + "\n";
    }


Run the code and check output.