Tuesday, September 25, 2012

Disable Right Click In a Web Page

We can disable right click on apage using the following code

  <script type="text/javascript">
        document.onmousedown = clickfn;

        function clickfn(e) {
            var button;
            if (navigator.appName == "Microsoft Internet Explorer") {
                button = event.button;
              
            }
            else {
                button = e.buttons;
            }

            if (button == 2) {
                alert("Right Click Disabled");

                if (navigator.appName == "Microsoft Internet Explorer") {
                    event.returnValue = false;
                }               
                return false;
            }
        }
    </script>



navigator.appName == "Microsoft Internet Explorer"  this is used because in ie 7 "e" is not supported so we used event in common for all ie versions...

Wednesday, September 5, 2012

$.ajax Method - Asynchronous postback

 $.ajax({
                    type: "POST",
                    url: "sample.aspx/ShowValue",
                    data: "{'data':'jisha','value1':'123456'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (msg) {
                        suc(msg);
                    }

                });

  data: "{'data':'jisha','value1':'123456'}" - the data is the parameter needed for the method.
here "data" and "value1" are the parameter names - should be same as the code behind parameter name.

each $.ajax function needs a post back. so total 5 post backs in the button btn click.
try and feel... lol..............

Look at the below button click function, i ve 5 post backs. bt the user does not feel even one.
Ajax made it all happen.

html code
*****************************************************************************
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="sample.aspx.cs" Inherits="sample" %>

<!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></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#<%=txt.ClientID %>").keypress(function (e) {
                if (e.charCode == 44 || e.which == 44) {
                    if ($.browser.msie)
                        event.returnValue = false;

                    return false;
                }
            });

            $("#<%=btn.ClientID %>").click(function () {
                $.ajax({
                    type: "POST",
                    url: "sample.aspx/ShowValue",
                    data: "{'data':'chris','value1':'123456'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (msg) {
                        suc(msg);
                    }

                });
              
                $.ajax({
                    type: "POST",
                    url: "sample.aspx/ShowValue",
                    data: "{'data':'sonu','value1':'123456a'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (msg) {
                        suc(msg);
                    },
                    error: function (msg) {
                        alert(msg.responseText);
                    }

                });

                $.ajax({
                    type: "POST",
                    url: "sample.aspx/ShowValue",
                    data: "{'data':'golda','value1':'123456'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (msg) {
                        suc(msg);
                    }

                });

                $.ajax({
                    type: "POST",
                    url: "sample.aspx/ShowValue",
                    data: "{'data':'jisha','value1':'123456'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (msg) {
                        suc(msg);
                    }

                });

                $.ajax({
                    type: "POST",
                    url: "sample.aspx/ShowValue",
                    data: "{'data':'ramees','value1':'123456'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function (msg) {
                        suc(msg);
                    }

                });

                return false;
            });
        });

        function suc(msg) {           
            var text = $("#divBody").html();
            $("#divBody").html(text + "<br/>" + msg.d);
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="scr" runat="server" EnablePageMethods="true"></asp:ScriptManager>
        <div>
            <asp:TextBox ID="txt" runat="server"></asp:TextBox>
            <asp:Button ID="btn" runat="server" Text="Click" />
        </div>
        <div id="divBody"></div>
   
    </form>
</body>
</html>


*****************************************************************************

Code behind

*****************************************************************************
using System;
using System.Web.Services;

public partial class sample : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static string ShowValue(string data, int value1)
    {
        return DateTime.Now.ToString() + " " + data + " " + value1;
    }
}

*****************************************************************************

Disable or Remove Comma in Asp Textbox

we can disable comma using jquery.

The code is given below

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $("#<%=txt.ClientID %>").keypress(function (e) {
                if (e.charCode == 44 || e.which == 44) {
                    if ($.browser.msie)
                        event.returnValue = false;

                    return false;
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:TextBox ID="txt" runat="server"></asp:TextBox>
    </div>
    </form>
</body>
</html>




$("#<%=txt.ClientID %>").keypress(function (e) {
                if (e.charCode == 44 || e.which == 44) {
                    if ($.browser.msie)
                        event.returnValue = false;

                    return false;
                }
            });



 e.charCode == 44 || e.which == 44  ----------  this is used because IE 7 does not support e.charCode.
 and all the other browsers support e.charCode.

-----------------------------------------------------------------------
if ($.browser.msie)
                        event.returnValue = false;

                    return false;


 -------------------------------------------------------------------------

$.browser.msie is used to check whether the currunet browser is IE or not.
IE 7 does not support return false. dats why we used event.returnValue =false. 

Tuesday, September 4, 2012

Using Weather API in javascript

Yahoo, Google... etc are providing weather report through API's. We can directly use those in html page using jquery and javascript. we can use location id, or location sharing to get weather.

simply create one html file and use the code.
digg on this and find more exciting features.

here is the code.

-----------------------------------------------------------------------------------------------------------------------------

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <title></title>
    <script type="text/javascript">
        function loadXMLDoc() {
        
            var Result = $.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%3D%2233015%22&format=json", "",
    function (data) {
        display(data);
    });


        }
        function display(data) {
            $("body").html('');
            $("body").append("Sunrise: " + data.query.results.channel.astronomy.sunrise + "<br />");
            $("body").append("SuntSet: " + data.query.results.channel.astronomy.sunset + "<br />");
            $("body").append(data.query.results.channel.item.description + "<br />");
            $("body").append(data.query.results.channel.item.title + "<br />");
        }

    </script>
</head>
<body>
    <div id="myDiv">
        <h2>
            Get weather</h2>
    </div>
    <button type="button" onclick="loadXMLDoc()">
        Get weather</button>
</body>
</html>


-----------------------------------------------------------------------------------------------------------------------



$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20location%3D%2233015%22&format=json", "",
    function (data) {
        display(data);
    });

 this method returns a jason object. "data.query.results.channel". this contains more features. try digg on this.


you can share you location using the following code.

---------------------------------------------------------------------------------------------------------------
 if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(success, errorfn);
            }

 

 function success(position) {
            alert(position);
        }
        function errorfn(error) {

        }

---------------------------------------------------------------------------------------------------------------

some api's does not provide jason so we need to use this code

----------------------------------------------------------------------------------------------------------------

 if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "http://weather.yahooapis.com/forecastrss?w=615702&u=c", true);
            xmlhttp.send();

----------------------------------------------------------------------------------------------------------------------