javascript


I would like to read selected value from dropdownlist and accordingly, set the maxlength of a textbox through javascript.

To use javascript inside a user control, one should remember, while it is rendered in the page, a control called txtComany will be having a name like ctl03$txtComany when it is rendered on the page.

Hence it is important to call the clientId of the textbox like :

document.getElementById(“<%=txtComany.ClientID%>”).value;

 

function SetTextBoxMaxLength() {
var e = document.getElementById(“<%=DropDownlist1.ClientID%>);
var strUser = e.options[e.selectedIndex].text;
if (strUser == “Cargo ” || strUser == “Agent”) {
//Set maxlength of textbox to 11 through Javascript
document.getElementById(“<%=TextBox1.ClientID%>).maxLength = 11
}
else {
//Set maxlength of textbox to 8 through Javascript
document.getElementById(“<%=TextBox1.ClientID%>).maxLength = 8
}
}

The HTML of the page is like

<asp:TextBox CssClass=”contact” ID=”CUECode” onKeyDown=”SetCUECodeMaxLength();” runat=”server”/> 

To get selected value from dropdownlist using javascript:

var e = document.getElementById(“<%=Dropdown1.ClientID%>”);

var strUser = e.options[e.selectedIndex].text;

 To use onchange event of dropdownlist instead of using the selectedindexchange event through code behind to prevent postback, suppose the HTML is as shown below:

<asp:DropDownList ID=”DropDown1″ runat=”server” onchange=”ClearTextBox();” class=”type”/>

function ClearTextBox() {

  

 if (document.getElementById(“<%=TextBox1.ClientID%>”).value.length > 0) {

 

document.getElementById(“<%=TextBox1.ClientID%>”).value = “”;

}

}

 

 

 

To to validation checking or marking foelds mandatory while saving data, the below code can be used, here txtVendorName is the name of the control

function trim(strText) { while (strText.substring(0,1) == ‘ ‘) { strText = strText.substring(1, strText.length); } while (strText.substring(strText.length-1, strText.length) == ‘ ‘) { strText = strText.substring(0,strText.length-1); } return strText; }

function MandatoryCheck()
{
  var VendorName = document.getElementById(‘<%= txtVendorName.ClientID %>’); 
  if(trim(VendorName.value) == ”)
  {
      alert(“Please enter a Vendor name.”);
      return false;
  }
 }

My friend asked me that he has a document repository site in sharepoint and wants to edit the documents online.

 Much like the “edit in Microsoft Word” option of sharepoint, but he needed to do that programmatically.

Such features are available in MS Office 2007 version.So, my friend first needed to check the MS Office version of the client machine. As you know, it is very difficult to get software information of the client machine through web applications.

My friend tried various options,he checked the registry but it only returned the servers information not the clients.

After searching the net for long, the sharepoint upload page gave him a good idea.

He noticed that the “Upload multiple files” is shown in some versions and not in others. Digging deep he found the “Upload Multiple Documents” feature is an ActiveX control that installs with Office 2003/2007 so if you aren’t running either Office versions then the option won’t show up in SharePoint. This ActiveX control is called STSUpld.UploadCtl.

Now that we know which activeX control to call to check the version of office, now we need to edit the document online as it can be done through “Edit in Microsoft office word”.

After seraching the net, I found an ActiveX control that allows users to edit documents with their associated applications in the context of Microsoft Windows SharePoint Services called OpenDocuments Control.

So, in the final code, first we check whether STSUpld.UploadCtl exists or not and then we call OpenDocuments axtiveX to edit the document on the fly.

The javascript for this is shown below:

function EditDoconFly(strDocument){var objEditor;var objactivex; try{if(objactivex = new ActiveXObject(‘STSUpld.UploadCtl’)){objEditor = new ActiveXObject(‘SharePoint.OpenDocuments.1’);if(objEditor){ objEditor.EditDocument(strDocument, ”); }else{ alert(‘Cannot edit documents on fly below Microsoft Office 2007’);  }objactivex = ”;objEditor=”;}else{alert(‘Cannot edit documents on fly below Microsoft Office 2007’);}}catch(e){alert(‘Cannot edit documents on fly below Microsoft Office 2007’);} return false;} 

We often see sites which has a text box with some default value, mostly in grey and when we click inside the textbox, the default value disappears and we can type in, similarly if we click elsewhere in the page the default value again re-appears.

This can be achieved very simply using javascript where we display the default data on onblur event and it disappears on onfocus event, see the illustration below:

Suppose I have a html textbox as follows,

<input id=”txtBizFocus” runat=”server” name=”txtBizFocus” autocomplete=”off” type=”text”  enableviewstate=”true”/>

 Now, I have to check whether txtBizFocus is empty or not, if it is empty include the default value in grey color. Now, if the user clicks inside the textbox txtBizFocus, the default value should disappear and the user should be able to type inside in font-color black.

 if (txtBizFocus.Value == “”)

txtBizFocus.Value = “<type here or select>”;

if (txtBizFocus.Value == “<type here or select>”)

{

    txtBizFocus.Style.Add(“color”, “#808080”);

 

}

else

{

    txtBizFocus.Style.Add(“color”, “black”);

}

 txtBizFocus.Attributes.Add(“onfocus”,   var txtBizFocus = document.getElementById(‘” + txtBizFocus.ClientID + “‘); if(txtBizFocus.value=='<type here or select>’){txtBizFocus.value=”; txtBizFocus.style.color=’black’;};”);

 

txtBizFocus.Attributes.Add(“onblur”,   var txtBizFocus = document.getElementById(‘” + txtBizFocus.ClientID + “‘); if(txtBizFocus.value==”){txtBizFocus.value='<type here or select>’; txtBizFocus.style.color=’#808080′;};”);

 

 So, when the page loads, txtBizFocus comes with a default value “<Type here or select>” in grey color, the moment user clicks inside the textbox(onfocus) the writing disappears and becomes blank so that the user can type in black(this is checked in the above code, where we check if the value inside txtBizFocus is not the default value, change color to black).

We know that to open a pop-up we use window.open( [sURL] [, sName] [, sFeatures] [, bReplace]).

But, what if we want to open it as a modal window? We can use window.showModalDialog(sURL [, vArguments] [, sFeatures]).

But this approach has certain disadvantages, your client side script does not always behave the way it should otherwise.

So the best possible approach to open a modal pop-up window is,

From your page, open a normal popup as
window.open(‘/_layouts/OpenOpUp.aspx?Mode=New’, ‘pop1’,‘left=80, top=50, center=yes, height=480, width=450,status= no, resizable= no, scrollbars=yes, toolbar=no, location=no,menubar=no’); 

Now, in the modal popup window(here, OpenOpUp.aspx) in the body tag write,
<body onblur=”self.focus()”>
Your job is done, now it will behave as a modal popup window as it will have focus on itself and you have to close the page to get back to the parent page (either through javascript or by clicking the cross button at top) and all your client side scripts will work just fine.