Showing posts with label Java Script. Show all posts

Thursday, 1 December 2011

Dynamic Listbox using JavaScript

Dynamic combobox-listbox-drop-down using javascript

Want to populate dynamically combobox-listbox-drop-down using javascript? Let us see a very simple script to do this. First let us see createElement() of document object in javascript.

//Create a table element dynamically 
var table = document.createElement("table"); 
  
//Create a select element dynamically 
var select = document.createElement("select"); 
  
//Create a option element dynamically 
var option = document.createElement("option");

Thus, createElement method takes a parameter which is the string that specifies the name for the element node and returns the element node.
Let us see how can we populate a dropdown or combobox using this method. Following is the html file of our example:

<HTML> 
    <HEAD> 
        <TITLE>Dynamically populating drop down, combobox, list box using JavaScript</TITLE> 
        <SCRIPT language="javascript" src="config.js"></SCRIPT> 
    </HEAD> 
    <BODY style="font-family: sans-serif"> 
  
        <fieldset> 
            <legend>Combo box</legend> 
            Add to Combo: <input type="text" name="txtCombo" id="txtCombo"/> 
            <input type="button" value="Add" onclick="addCombo()"> 
            <br/> 
            Combobox: <select name="combo" id="combo"></select> 
        </fieldset> 
    </BODY> 
</HTML>

And following is the javascript file:

function addCombo() { 
    var textb = document.getElementById("txtCombo"); 
    var combo = document.getElementById("combo"); 
  
    var option = document.createElement("option"); 
    option.text = textb.value; 
    option.value = textb.value; 
    try { 
        combo.add(option, null); //Standard 
    }catch(error) { 
        combo.add(option); // IE only 
    } 
    textb.value = ""; 
}

Thus, when we provide a value in text box and click the Add button, a new option element is created using document.createElement method. The attributes of the option element are set using the method .setAttribute(). And finally the option is added to combo using .add() method.

dynamic-combobox-listbox-dropdown-in-javascript

Friday, 4 November 2011

Javascript Content Query over Web Applications

Sometimes you want to show some items from a List in another Site Collection or Web Application (or even another Farm). This can't be done with out of the box webparts. The next javascript which you can paste in de default content editor webpart (source editor) can help you in this situation.

Go to the site where you want to show your list items (not the location of the list)
Download the file http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
Put this file in a document library in your site
Copy the url (e.g. http://mysite/documentlibrary/jquery-1.3.2.min.js)
Edit your page and paste a content editor wepart on your page
Go to source editor (of the webpart properties of the content editor webpart)
Put the next code into your content editor webpart

<script type="text/javascript" src="http://mysite/documentlibrary/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \ <soapenv:Body> \ <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \ <listName>libraryname</listName> \ <viewFields> \ <ViewFields> \ <FieldRef Name='Title' /> \ <FieldRef Name='ID' /> \ </ViewFields> \ </viewFields> \ <rowLimit>5</rowLimit> \ </GetListItems> \ </soapenv:Body> \ </soapenv:Envelope>"; $.ajax({ url: http://corporatesite/site/_vti_bin/lists.asmx, type: "POST", dataType: "xml", data: soapEnv, complete: processResult, contentType: "text/xml; charset=\"utf-8\"" }); }); function processResult(xData, status) { $(xData.responseXML).find("z\\:row").each(function() { var liHtml = "<li><a href=\"http://corporatesite/site/list/listname/DispForm.aspx?ID=" + $(this).attr("ows_ID") + "\">" + $(this).attr("ows_Title") + "</a></li>"; $("#tasksUL").append(liHtml); }); }</script>

Thursday, 3 November 2011

Integrating Twitter in your SharePoint Site

How to add the Twitter Widgets in your SharePoint Site?

Steps:

1. Open the site page where you want to add the twitter widgets.

2. Add a Content Editor Web part.
3. Now open this URL in your browser

http://twitter.com/about/resources/widgets

4. You will find 4 widgets (in the Widgets for my site option) which is provided by default in the Twitter Official Site

Profile Widget
Search Widget
Faves Widget
List Widget

5. All the information about the widgets will be given the site.

6. Now for example I will add the SEARCH WIDGET to our site. I click on Search Widget which will navigate to this link

http://twitter.com/about/resources/widgets/widget_search

7. You have 4 options such as Settings, Preferences, Appearance and Dimensions.

8. Here you can customize everything and my sample is shown code grabbed from the site is shown below.
<script src="http://widgets.twimg.com/j/2/widget.js">
</script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
search: 'SharePoint',
interval: 30000,
title: 'What people are saying about',
subject: 'SharePoint',
width: 250,
height: 300,
theme: {
    shell: {
      background: '#8ec1da',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#444444',
      links: '#1985b5'
    }
},
features: {
    scrollbar: false,
    loop: true,
    live: true,
    hashtags: true,
    timestamp: true,
    avatars: true,
    toptweets: true,
    behavior: 'default'
}
}).render().start();
</script>

9.That’s it!! Add this code in the Source Editor of the Content Editor Web Part.

10.This will display all the tweets with respect to the Query you gave in the Search.

11.Save it!! Enjoy the Twitter integration in your SharePoint Site.