SharePoint and COM and Jquery - example

 

1. Put JQuery distribution in 14hive\Layouts.
2. Add Javascript link referral in the AdditionalPageHead place holder:
   

   <SharePoint:ScriptLink Language="Javascript" Localizable="False" runat="server" Name="jquery-1.4.4.min.js"/>
   <SharePoint:ScriptLink Name="SP.js" runat="server" OnDemand="true" Localizable="false"/>

3. Add Javascript code and create Client Object Model call to retrieve value in Main conten place holder:

 

<script type="text/javascript"> 
// JQuery_Script

var spListItems;

function FilterLookup(filterSource, lookupList) 
{

//select lookupcontrol 
   var filterElement = $("select[title='" + filterSource + "'] option:selected"); 
   if(filterElement.length == 0) return;

   var selectedFilterText =  filterElement.text(); 
   var selectedFilterValue = filterElement.value;

   var clientCtx = new SP.ClientContext.get_current(); 
   var spList = clientCtx.get_web().get_lists().getByTitle(lookupList);

   var camlQuery = new SP.CamlQuery(); 
   camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\''+ filterSource +'\'/>' + 
        '<Value Type=\'Text\'>'+ selectedFilterText +'</Value></Eq></Where></Query></View>');

   this.spListItems = spList.getItems(camlQuery); 
   clientCtx.load(spListItems); 
   clientCtx.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed) );

} // 

function onQuerySucceeded(sender, args) {

   alert(this.selectedFilterText); 
   // Get CityElement Select or Input 
   var cityElement = $("select[title='City']"); 
   if(cityElement.length == 0) { alert('Unknown'); }

    var options = ''; 
    var listItemEnumerator = spListItems.getEnumerator();

    while (listItemEnumerator.moveNext()) { 
        var oListItem = listItemEnumerator.get_current(); 
        options += '<option value="' + oListItem.get_id() + '">' + oListItem.get_item('Title') +'</option>'; 
    } 
   cityElement.html(options); 
}

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


// Attach function on document ready 
$(document).ready( 
   function() { 
      ExecuteOrDelayUntilScriptLoaded(FilterLookup,"sp.js"); 
      //FilterLookup("Country","City");

       // Get CountryElement Select or Input 
      var countryElement = $("select[title='Country']"); 
      if(countryElement.length == 0) 
      { 
           countryElement = $("input[title='Country']"); 
      } 
      if(countryElement.length != 0) { 
       if(countryElement[0].optHid) { 
          $("input[id='" + countryElement[0].optHid + "']").bind("propertychange", function() { FilterCity(); });

       } else{ 
          $("select[title='Country']").change(function() { FilterLookup("Country","City"); });

       }

   }


   }); // Document ready

</script> 

 

NOTE: example and not complete code