Printing object xmldocument

To print the "object xmldocument" you can use: alert('responseText: ' + xData.responseText);

jQuery and Sharepoint web services - add a list item

This is a very basic tutorial in how to add list items using SharePoint and jQuery. Some prerequisites to understand what is happening.

• jQuery
• SharePoint web services
• List GUIDs

The main items to observe are:

• xhr.setRequestHeader that you can get from the web services page (see bellow)
• in the SharePoint' list you need two columns Title and Description
• the browser alert window will return some information that you could remove after testing
• after posting the information in the list it will run the processResult function where you can do some fancy user feedback

Html with the fields to be edited by the user

Title: 
Description: 

In the SharePoint web services description you can extract the value for the xhr.setRequestHeader variable invoking /_vti_bin/lists.asmx?op=UpdateListItems, here is an example:

POST /_vti_bin/lists.asmx HTTP/1.1
Host: www.ausinnovation.org
Content-Type: text/xml; charset=utf-8
Content-Length: length
SOAPAction: "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems"





string

schemaxml

jquery .text garbage bug

There is a small bug in IE that makes $.text() return garbage text at end, in case you have a bug that you cannot nail down, debug the problem using: alert(encodeURIComponent($.text(...))); that will show any hidden character. More information about encodeURIComponent: http://xkr.us/articles/javascript/encode-compare/

href and javascript function()

Today was a nice challenge day, as you all well know javascript is not logic, is pure imagination. I had problems in putting a javascript code into the href instead of using onclick because sometimes sharepoint overwrite it, just because it doesn't make sense. Here is why: you need to put brackets everywhere.

javascript:(function(){alert('test')})()

So in real life it will be:

 alert 

Firebug - Javascript debugging

One of the best tools to debug javascript code AlternateIdea: An In-depth Look At The Future of Javascript Debugging With Firebug

Blogger code highlighter

To copy and paste source code into blogger is a pain, so some people developed techniques for that. It is called syntax-highlighter

"The idea behind SyntaxHighlighter is to allow insertion of colored code snippets on a web page without relying on any server side scripts."

It highlight source code in the following languages: C++, C#, CSS, Delphi, Pascal, Java, Javascript, PHP, Python , Ruby, Sql, VB,XML/HTML
Check this out

jquery php mysql and datepicker

Datepicker (http://docs.jquery.com/UI/Datepicker and http://marcgrabanski.com/code/ui-datepicker/) is a very good library for jquery. I had some problems to make it work with PHP and MySQL. The main reason was the beforeShowDay, for all events in datepicker it load the beforeShowDay +/- 36 times, one for each day of the month plus few days after and before. To avoid to have a ajax call every time, you need to create a cache in javascript. There are several patterns to do cache I will do one very simple as example. You could also use the inarray jquery function, but I decide to you the loop to be more clear in the example I will not cover:

• jquery
• json
• php
• mysql
• json in PHP, see the very nice article: http://extjs.com/tutorial/creating-json-data-php

Just the basic concepts. The main trick in this are $.ajax (asynch:false and dataType: "json") and cache the days, you can cache a batch of days per month or per year. I will add the comments and everything latter, just quick notes:

• for all events in datepicker it calls dateLoading (beforeShowDay: dateLoading)
• at the time you select a day it calls dateSelected (onSelect: dateSelected)

Libraries you need to load:

• ui.datepicker.css - http://marcgrabanski.com/code/ui-datepicker/core/ui.datepicker.css
• jquery.js - http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.3.min.js
• ui.datepicker.js - http://marcgrabanski.com/code/ui-datepicker/core/ui.datepicker.js

The javscript in the header section

// cache the days and months
var cached_days = [];
var cached_months = [];
$(document).ready(function() {
 $('#dateinput').datepicker({ 
  beforeShowDay: dateLoading,
  onSelect: dateSelected,
  dateFormat: 'yy-mm-dd'
 });
});

function dateLoading(date) { 
 var year_month = ""+ (date.getFullYear()) +"-"+ (date.getMonth()+1) +"";
 var year_month_day = ""+ year_month+"-"+ date.getDate()+"";
 var opts = "";
 var i = 0;
 var ret = false;
 i = 0;
 ret = false;
 
 
 for (i in cached_months) {
  if (cached_months[i] == year_month){
   // if found the month in the cache
   ret = true;
   break;
  };
 };
 
 // check if the month was not caached 
 if (ret == false){
  //  load the month via .ajax
  opts= "month="+ (date.getMonth()+1);
  opts=opts +"&year="+ (date.getFullYear());
  // we will use the "async: false" because if we use async call, the datapickr will wait for the data to be loaded
  $.ajax({
   url: "return_days.php",
   data: opts,
   dataType: "json",
   async: false,
   success: function(data){
    // add the month to the cache
    cached_months[cached_months.length]= year_month ;
    $.each(data.days, function(i, day){
     cached_days[cached_days.length]= year_month +"-"+ day.day +"";
    });
   }
  });
 };
 i = 0;
 ret = false;
 
 // check if date from datapicker is in the cache otherwise return false
 // the .ajax returns only days that exists
 for (i in cached_days) {
  if (year_month_day == cached_days[i]){
   ret = true;
  };
 };
 return [ret, ''];
};

// trigger when the data picker day is selected
// get the data information: images and binaries and fill the id: images and downloads
function dateSelected(date) {
opts = "date="+ date;
 $("#images").html("");
 $.getJSON(
  "return_images.php",
  opts,
  function(data){
   $("#images").append("
");
  }
 );
};

The html body

go to january 2008

The php code to load the days (return_days.php), you can use mysql to populate the $output[]

$output = array();
// it need to return something otherwise the foreach will break in the .ajax side
$output['days'][] = array('day'  => 0);

if ( ($_REQUEST["month"]==1) and ($_REQUEST["year"]==2008) ){
$output['days'][] = array('day'=>2);
$output['days'][] = array('day'=>4);
$output['days'][] = array('day'=>6);
$output['days'][] = array('day'=>8);
$output['days'][] = array('day'=>10);
}
echo json_encode($output);

The php code to load the images (return_images.php), again you can use mysql to populate the $output[]

$output = array();
switch ($_REQUEST["date"]) {
case "2008-01-02":
$output['images'] = "http://farm1.static.flickr.com/214/505956789_d218caee60_t.jpg";
break;
case "2008-01-04":
$output['images'] = "http://us.i1.yimg.com/us.yimg.com/i/ww/news/2007/04/23/24hours.png";
break;
case "2008-01-06":
$output['images'] = "http://farm1.static.flickr.com/149/409748300_69d05e4ff5_m.jpg";
break;
case "2008-01-08":
$output['images'] = "http://farm1.static.flickr.com/21/98559538_e8d7aa99f2_o.jpg";
break;
case "2008-01-10":
$output['images'] = "http://farm1.static.flickr.com/197/443158364_b615c1ffd5_m.jpg";
break;
}
echo json_encode($output);
exit;

javascript "has no properties"

Few things are not clear in javascript, it tends to be a hybrid language that converts variables at its own. To avoid the "has no properties" errors in javascript you can try:

a=[];
alert(typeof(a["2008"]) == 'undefined');

it will return true have fun!