Balas Blog..: Javascript

Showing posts with label Javascript. Show all posts

Monday, May 18, 2009

calling WCF Service method from javascript

here am speaking about the how wcf service method will call in the clientside using javascript. please find the below examples.

Before starting the code please select the template called Ajax enabled wcf service.

then call the method in the javascript.

ASPX with javascript.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript">
function getValue()
{
AjaxWCF.DoWork(onSucess,onFailure)
}
function onSucess(result)
{
alert(result);
}
function onFailure(result)
{
alert(result);
}
</script>
</head>
<body onload="getValue();">
<form id="form1" runat="server">
<asp:ScriptManager ID="script" runat="server">
<Services>
<asp:ServiceReference Path="~/AjaxWCF.svc" />
</Services>
</asp:ScriptManager>
</form>
</body>
</html>

AjaxWCF.svc File

using System;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;

namespace Xmlhttp
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class AjaxWCF
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public string DoWork()
{
// Add your operation implementation here
return "Hi bala";
}
// Add more operations here and mark them with [OperationContract]
}
}

Access a control on the Content Page from a MasterPage using JavaScript

If you have a control on the control page, which has to be accessed in the master page using JavaScript, then here how to do so.

on the content page. create a text box has given below.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:Panel ID="panelContent" GroupingText="ContentPage Controls" runat="server">
<asp:TextBox ID="txtContent" runat="server"></asp:TextBox>
</asp:Panel>
</asp:Content>

Now access and control the page text box "txtContent" from the master pages.

<head runat="server">
<title></title>
<script type="text/javascript">
function accessControlContentPage() {
var txtCont = document.getElementById('<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("txtContent").ClientID %>');
txtCont.value = "I got populated using Master Page";
}
</script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>

Thursday, May 14, 2009

Calling Webservice through Ajax with javascript

In modern way of calling the web service through the JavaScript.

Aspx page

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script type="text/javascript">
function OnLookup()
{
var stb = document.getElementById("txt1");
Xmlhttp.call.HelloWorld1(stb.value, OnLookupComplete);
}
function OnLookupComplete(result)
{
var res = document.getElementById("txtHint");
res.innerHTML = "<b>" + result + "</b>";
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="script" runat="server">
<Services>
<asp:ServiceReference Path="~/call.asmx" />
</Services>
</asp:ScriptManager>
First Name:<input type="text" id="txt1" onkeyup="OnLookup();">
<span id="txtHint"></span>
</div>
</form>
</body>
</html>

webservice
namespace Xmlhttp
{
///

/// Summary description for call
///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class call : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld()
{
string value = "1";// HttpContext.Current.Request.QueryString["value"];
Dictionary objDictionary = new Dictionary();
if (HttpRuntime.Cache["out"] != null)
{
objDictionary = (Dictionary)HttpRuntime.Cache["out"];
if (!objDictionary.ContainsKey(value))
{
objDictionary.Add(value, value + "out");
}
}
else
{
objDictionary.Add(value, value + "out");
}
HttpRuntime.Cache["out"] = objDictionary;
return objDictionary[value];
}
[WebMethod]
public string HelloWorld1(string value)
{
return value;
}
}
}

Accessing webservice from javascript using XML HTTp Activex

Define:

XML http is a active X object to enable the browser to sending the request and receiving the response asynchronously.

Example:

Aspx Section

<html>
<head>
<script type="text/javascript">
var xmlHttp=null;
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
try
{// Firefox, Opera 8.0+, Safari, IE7
xmlHttp=new XMLHttpRequest();
}
catch(e)
{// Old IE
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
}
var url = "http://localhost:2735/call.asmx?op=HelloWorld";
//var getValue = document.getElementById("txt1");
//url = url + "&value='" + getValue.value + "'";

xmlHttp.onreadystatechange = output;
xmlHttp.open("GET",url,true);
xmlHttp.send();
function output() {
if (xmlHttp.readyState == 4)
{
xmlHttp.open("POST", "http://localhost:2735/call.asmx/HelloWorld", false);
xmlHttp.send();
document.getElementById("txtHint").innerHTML = xmlHttp.responseText;
}
}
}
</script>
</head>
<body>
<form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form><p>Suggestions: <span id="txtHint"></span></p> </body>
</html>

Webservice Section

namespace Xmlhttp
{
///

/// Summary description for call
///

Wednesday, April 15, 2009

Calling javscript method in different frames.

Step1:

Create one html page with following frames with frameset.

<frameset cols="30%,70%">
<frame src="testFrame.aspx" name="foody"/>
<frame src="Frame1.aspx" name="goody"/>
</frameset>

step 2:

Create one javascript method in testFrame.aspx, which it has been included in frame 1.

Javascript method.

function getValueFrame1()
{
alert("hi");
}

step 3:

call that javacript method in the second frame of page.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

</div>
</form>
<script language="javascript">
parent.foody.getValue();
</script>
</body>
</html>

Note:foody is frame name

Monday, April 13, 2009

Showing Intelligence for JavaScript methods in different Files.

Showing Intelligence for JavaScript methods in different Files.
I have created Jscript1.js with following methods with out definition.

I am referring the jscript1.js file in to script2.js using Reference Attribute. After adding the reference am getting intelligence for the jscript1.js file methods.

Tuesday, March 24, 2009

Generating javascript Id through C# (Instead of using control.clientID)

protected void Page_PreRender(object sender, EventArgs e)
{
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),string.Empty,string.Format("{0}"), string.Format("var gridUniqueID = '{0}'; ", uwgDailyView.UniqueID))
}

fromdate always less than todate validation using javascript

Finding Eventtop and EventLeft position Using javascript

var evnt=window.event;
var y =evnt.clientY + document.body.scrollTop + document.body.parentNode.scrollTop;
var x =evnt.clientX + document.body.scrollLeft + document.body.parentNode.scrollLeft;

You have to apply this top and left position value to style attribute of the control.

Monday, August 11, 2008

how to run exe file through javascript

<html>
<head>
<script language="javascript" type="text/javascript">

function runApp()
{s
var shell = new ActiveXObject("WScript.shell");
shell.run("notepad.exe ", 1, true);
}
</script>
</head>

<body>
<input type="button" name="button1" value="Run Notepad" onClick="runApp()" />
</body>
</html>

Monday, July 7, 2008

Dropdown validation using Javascript

The below code is for validating the dropdown when click on the submit button. I have described below step by step process.

Step 1:

function getcheckdrp()
{
var drp=document.getElementById("drpcheck");
if(drp=='[object]')
{
if(drp.selectedIndex==0)
{
alert("please select state");
return false;
}
}
}

step 2:

<asp:ListItem>----Select State----</asp:ListItem>
<asp:ListItem>Karnataka</asp:ListItem>
<asp:ListItem>Bangalore</asp:ListItem>
</asp:DropDownList>

<asp:Button ID="btncheckdrp" runat="server" />

step 3:

protected void Page_Load(object sender, EventArgs e)
{
btncheckdrp.Attributes.Add("onclick", "javascript:return getcheckdrp()");
}

Monday, June 9, 2008

How to select all checkbox when i select header checkbox in datagrid.

number validatuion in textbox using Javascript

how to search textbox value in dropdownlist Using Javascript

<asp:TextBox ID="txtbox" runat="server" onkeyup="getValue(this)"></asp:TextBox>
<asp:DropDownList ID="drpt" runat="server">
<asp:ListItem Text="text">ss</asp:ListItem>
<asp:ListItem Text="text">ss1</asp:ListItem>
<asp:ListItem Text="text">ss2</asp:ListItem>
<asp:ListItem Text="text">ss3</asp:ListItem>
<script language="javascript">

function getValue(obj)
{
var d=obj.value;
var dro=document.getElementById("drpt");
var drplen=document.getElementById("drpt").options.length
var i;
for(i=0;i<drplen;i++)
{
if(document.getElementById("drpt").options[i].value==d)
{
document.getElementById("drpt").selectedIndex=i;
}
}
}
</asp:DropDownList>

</script>

Wednesday, April 16, 2008

How to show Modal and Modeless dialog windows in Javascript

How to show Modal and Modeless dialog windows in Javascript

When you show a modal dialog the window remains on top of other windows until the user explicitly closes it.

window.showModalDialog("Test.html","dialogWidth:400px; dialogHeight:225px; status:no; center:yes");

When you show a modeless dialog the window remains on top of other windows, but you can still access the other windows.

window.showModalessDialog("Test.html","dialogWidth:400px; dialogHeight:225px; status:no; center:yes");

Tuesday, March 25, 2008

Calling Javascript in Dotnet based on Button id

In aspx Page

<script language="javascript" type="text/javascript">
function Getconfirm()
{
var con=confirm("Are sure want to delete this");
var test;
if(con==false)
{
alert("test");
}
else
{
alert("test1");
}
}
</script>

<asp:Button ID="btnsubmit" runat="server" OnClick="btnsubmit_Click" />
In C# Page
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterClientScriptBlock(btnsubmit, typeof(string), "bala", "Getconfirm();", true);
}
Note:btnsubmit is control id.

Thursday, February 21, 2008

Javascript Debugger Enabling

Step 1. Disable Script Debugger - Make this option unchecked in the IE.
function someFunct()
{
Javascript:debugger;alert(window.name)
alert("Mahesh");
}

Wednesday, February 6, 2008

Accesing Parent Window through Childwindow using Javascript

///////////////////////Accessing Id///////////////////////////
alert(window.opener.document.getElementById("HidString").value)

///////////////////////End Accessing Id///////////////////////////

///////////////////////Accessing Function///////////////////////////
child.aspx
window.opener.LoadEmp(obj)

parent.aspx
function LoadEmp(ob)
{
alert(ob);
}

///////////////////////End Accessing Function///////////////////////////

///////////////////////Refershing Parent Page from Child page////////////

Response.Write("<script language='javascript'>
window.opener.location.href=opener.location.href;</script>");

Using Javascript creating control without postback

This one i done for tell a friend, when i click add it should create dynamically one row with all the controls.

////Note dont delete the id of table (i am using that in javascript)////////

<table cellspacing="0" cellpadding="0" width="100%" border="0" id="Tellafriend1">
<tr>
<td colspan="3" align="right"><input type="button" value="Addmore" onclick="fnAddRow()" /> <input type="button" value="DeleteRow" onclick="fnDelRow()" /></td>
</tr>
<tr>
<td colSpan="3"><br /></TD>
</tr>
<tr>
<td>
Friend Name</td>
<td>
Email Id</td>
<td>
Delete</td>
</tr>
<tr>
<td>
<input type="text" id="txtfriendname1" name="txtfriendname1" /></td>
<td>
<input type="text" id="txtfriendemail1" name="txtfriendemail1" /></td>
<td>
<input type="checkbox" disabled="true" id="chkdelete" name="chkdelete" />
</td>
</tr>
</table>

/////////////////////////////////Javascript///////////////////////////
///////////////////This is for adding row/////////////////////////////
var rowcount=1;
var checkcount=1;
function fnAddRow()
{
rowcount++;
// var check=validate(); //this is for my page validation
if(check!=false)
{
var objTbl = document.getElementById("Tellafriend1");
var objTbody = objTbl.getElementsByTagName("tbody")[0];
var row = document.createElement("tr");
//txtfriendname///
var friendnameval=document.createElement("td");
var friendnameDel = document.createElement("INPUT")
friendnameDel.setAttribute("type","text");
friendnameDel.setAttribute("name","txtfriendname"+rowcount);
friendnameDel.setAttribute("id","txtfriendname"+rowcount);
friendnameval.appendChild(friendnameDel)
row.appendChild(friendnameval);
//txtfriendname///
//txtfriendemail///
var friendemailval=document.createElement("td");
var friendemailDel = document.createElement("INPUT")
friendemailDel.setAttribute("type","text");
friendemailDel.setAttribute("name","txtfriendemail"+rowcount);
friendemailDel.setAttribute("id","txtfriendemail"+rowcount);
friendemailval.appendChild(friendemailDel)
row.appendChild(friendemailval);
//txtfriendemail///

//checkbox///
var checkval=document.createElement("td");
var ChkDel = document.createElement("INPUT")
ChkDel.setAttribute("type","checkbox");
ChkDel.setAttribute("name","chkDelete"+rowcount);
ChkDel.setAttribute("id","chkDelete"+rowcount);
checkval.appendChild(ChkDel)
row.appendChild(checkval);
//End check box checkbox///
objTbody.appendChild(row);
}
else
{
return false;
}
}
///////////////////End adding row/////////////////////////////

Note:For deleting i am using checkbox...................
///////////////Deleting Row//////////////////////////////////

function fnDelRow()
{
var ChkOption = ""
for(var i=2;i<=rowcount;i++)
{
var ChkCtrl = document.getElementById("chkDelete"+i)

if(ChkCtrl == '[object]')
{
if(ChkCtrl.checked)
{
ChkOption = "1"
delRow(ChkCtrl)
checkcount++;
}
}
}
if(ChkOption == "" && rowcount!=1)
{
alert("Select any one option to delete")
return false;
}
}
function delRow(button)
{
var row = button.parentNode.parentNode;
var tbody = document.getElementById('Tellafriend1').getElementsByTagName('tbody')[0];
tbody.removeChild(row);
}

/////////////////////////////End Deleting row////////////////////////////////

Reading and removing Listbox using Javascript

/////////////Reading/////////////////////////////////
var listEmp=document.getElementById("PMEmpname");

for(j=0;j<listEmp.options.length;j++)

{
listEmp.options[j].value //Value field
listEmp.options[j].text //Text Field
}

///////////Deleting///////////////////////////////////

for(j=0;j<listEmp.options.length;j++)
{
listEmp.remove(j);
}

Balas Blog..