How to use javascript client object model in sharepoint designer?

Question

I have to fetch data using javascript client object model and for that i have to use Sharepoint Designer 2010 only i have searched on google and there i got solution only by adding code in visual web part. So can any tell me how i can use javascript client object mode to retrieve data in sharepoint designer 2010?

Answer 1

Here take a look at this. I completely deleted my original answer. Now below make sure in your script type that it is just like below.

    <script type="text/ecmascript" src="/_layouts/SP.Core.js" />
     <script type="text/ecmascript" src="/_layouts/SP.Debug.js" />
       <script type="text/ecmascript" src="/_layouts/SP.Runtime.Debug.js" />

      <script language="ecmascript" type="text/ecmascript">

      function onQuerySucceeded(sender, args) {
          alert('Title: ' + this.oWebsite.get_title() + ' Decription: ' +   this.oWebsite.get_description());
      }

      function onQueryFailed(sender, args) {
          alert('request failed ' + args.get_message() + '\n' +    args.get_stackTrace());
      }

      function retrieveWebSite() {
          var clientContext = new SP.ClientContext.get_current();
          this.oWebsite = clientContext.get_web();
          clientContext.load(this.oWebsite);
          clientContext.executeQueryAsync(Function.createDelegate(this,   this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
      }
  </script>

Make sure you have the libraries loaded. Look here

http://msdn.microsoft.com/en-us/library/ee535709.aspx

http://msdn.microsoft.com/en-us/library/hh185009.aspx

First link is how to setup your application page the second link is how to perform a simple list lookup function.

Answer 2

Think of the visual web part as a container. You can implement this code in a couple different ways using only SPD:

1. Open the page in advanced mode in SPD and enter the script just as you would a plain old web page. I would put the script inside the PlaceHolderMain control as SharePoint is a little picky about where to put javascript.

2. Put the script in a content editor web part right in the web interface.

3. (recommended) Create a separate javascript file for your code. Reference it in a script tag either on your page, or on the master page.

Answer 3

<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>
<script type="text/ecmascript" src="/_layouts/SP.Core.js" />
<script type="text/ecmascript" src="/_layouts/SP.Debug.js" />

<script type="text/ecmascript">
ExecuteOrDelayUntilScriptLoaded(createList, "sp.js");
    function createList() {
        var clientContext = new SP.ClientContext.get_current();
        var oWebsite = clientContext.get_web();

        var listCreationInfo = new SP.ListCreationInformation();
        listCreationInfo.set_title('CustomList'); // list name
        listCreationInfo.set_description('description'); // list description
        listCreationInfo.set_templateType(SP.ListTemplateType.genericList); //list type

        oWebsite.get_lists().add(listCreationInfo);

        clientContext.executeQueryAsync(
            Function.createDelegate(this, this.onQuerySucceeded),// when success
            Function.createDelegate(this, this.onQueryFailed) // when failed
            );
    }
    function onQuerySucceeded() {
        alert("List Created");
    }

    function onQueryFailed(sender, args) {
        alert("List Failed");
    }

</script>

Answer 4

Working code for ecmascript just add the content place holder ..through web part than. click on edit this webpart than make sure that u have selected the content place holder and click on edit source..and it should be empty if you have selected any other web part it will show you some div etc... so make sure that you have selected the content place holder..and just copy the below code there...

and if you want to change the list name..than u can change it here listCreationInfo.set_title('CustomList');

Steps: 1. add a page in sharepoint site. 2. add a web part(content place holder) 3. click on edit this web part 4. now click on edit source make sure..(Add web content is clicked) it will show you the dotted line that your content editor is selected.(you can check it by clicking on select button on a format toolbar(right side) it will show you which box is selected. 5. click on Edit Source. 6.Copy the code. 7. Happy Coding :)

<script type="text/javascript" src="/_layouts/15/init.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
 <script type="text/javascript" src="/_layouts/15/sp.js"></script>??

 <script type="text/ecmascript">
     ExecuteOrDelayUntilScriptLoaded(createList, "sp.js");
     function createList() {
     var clientContext = new SP.ClientContext.get_current();
     var oWebsite = clientContext.get_web();

    var listCreationInfo = new SP.ListCreationInformation();
    listCreationInfo.set_title('CustomList'); // list name
    listCreationInfo.set_description('description'); // list description
    listCreationInfo.set_templateType(SP.ListTemplateType.genericList); //list type

    oWebsite.get_lists().add(listCreationInfo);

    clientContext.executeQueryAsync(
     Function.createDelegate(this, this.onQuerySucceeded),// when success
     Function.createDelegate(this, this.onQueryFailed) // when failed
     );
}
function onQuerySucceeded() {
    alert("List Created");
}

function onQueryFailed(sender, args) {
    alert("List Failed");
}