Cross-domain data with AJAX using JSON

I read some different blogs and sites about using JSON or JSONP in relation with AJAX requests in cross-domain environments.
I just want it to keep it as simple as possible.
Situation:
I have a local webservice, behind a firewall, which is only available from another website somewhere on the internet (ip-filtering). On that site I call the (local) webservice) using

$.ajax({
  type: "POST",
  url: 'http://<my url:portnumber>/myCustomService.asmx/SendMyRequest',
  data: "{name: '" + _name
  + "' , category: '" + _category
  + "' , address: '" + _address
  + "' , company: '" + _company + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
  // etc...

So, I figured out to use "access-control-allow-origin" with the value "*" as a custom header in IIS7.5
Problem:
However, adding the Acces-control-allow-origin=* doesn't work. After some struggling and some more research, in found the solution
Solution:
Besides this access-control-allow-origin, you need to add an extra entry, the "access-control-allow-headers" with value "content-type". So, just place inside your web.config the following data:

<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="access-control-allow-origin" value="*" />
        <add name="access-control-allow-headers" value="content-type" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

Raise (custom) event after closing jQuery popBox

Recently I started to use the jQuery plugin popBox (http://plugins.jquery.com/project/popBox). This plugin provides a simple to use popup textarea extension for textboxes. The nice thing is that it works on hidden textboxes as well.

For my hour registration form I have some hidden textboxes to keep the form a bit clean. The form supplies textboxes for each day (see figure).

So for each day you can add hours, comment en log-info. The last two fields are hidden. To edit the comment and/or log-info you just press on the corresponding image.
Because these fields are invisible, you want to have some kind of indication if some text has been entered already or not. So I want to change the 'button'image if some text has been entered.
Raising an event seems to be a hard job, because you don't really access the (hidden) textbox, so their events are not raised. After some search and trial and error I found a solution.
First of all, let me show you how I attached the jQuery popBox plugin to my hidden comment and log-textboxes (see instructions at http://plugins.jquery.com/project/popBox). The hidden textboxes where called like txtNewMonComment, txtNewMonLog, txtNewTueComment etc.

1. I applied the popBox to all textboxes with class set to 'txtDailyComment':

$(document).ready(function () {
 //attach popBox jQuery plugin to all textboxes with class=txtDailyComment.
 $('.txtDailyComment').popBox();
});

2. The images that simulates a button are configured like this:

<img alt="Comment" src="/hrt/_layouts/images/DNM.WP.HourRegistrationGeneralForm/message_add.png"  onclick='SetTextboxFocus($(this));' id="btnNewMonComment" />

3. I wrote the SetTextboxFocus function to show the content of the corresponding hidden textbox:

function SetTextboxFocus(button) {
 var day = button.attr("id").substring(6, 9);
 var type = button.attr("alt");
 var control = "txtNew" + day + type;
 $("input[name=" + control + "]").focus();
}

So far is just like the instructions on the popBox plugin page.
4. The customization starts here and is quit simple. I wrote a function that I want to fire after closing the popBox. You can do whatever you want in this function. For demo reason I just show an alert:

function AfterTextboxUpdate() {
 alert('popBox is closed');
}

5. The popBox plugin supports option parameters. So I just add one of myself. I changed the popBox attach as written in step 1 as follows:

$(document).ready(function () {
 //attach popBox jQuery plugin to all textboxes with class=txtDailyComment.
 $('.txtDailyComment').popBox({ onclose: function () { AfterTextboxUpdate(); } });
});

6. The last step is to edit the popBox1.3.0.js file. Find the part where blur function is fired and add "options.onclose();" inside the if-section:

popBoxContainer.children().blur(function () {

 if (change) {

  $(this).parent().hide();
  $(this).parent().prev().hide();
  $(this).parent().prev().prev().val($(this).val().replace(/\n/g, options.newlineString));
  options.onclose();
 }
});

That's it. When you close the popBox, the AfterTextboxUpdate function will be fired.

Hope this helps you to get even more about this great jQuery plugin.

The easy way to use jQuery DatePicker on ASP.NET controls

There are several posts on the internet on how to use jQuery datepicker control on ASP.NET (controls). Most of the solutions works with ASP.NET MVC from Microsoft (http://www.asp.net/mvc/). Other wrote their own extension classes and you need to use them to get it work. With other words, a lot of extra development steps and stuff. And that's not what I was looking for.

I was looking for a smaller, faster and easier way of attaching the JQuery datepicker to one of my controls. So I just tried to figure out my own route, and I found one.

Here follows the way I did it.
1. Just use the ordinary ASP.NET textbox for entering a date:

<asp:TextBox ID="txtDate" runat="server" Width="79px"></asp:TextBox>

2. Downloaded the appropriate JQuery libraries, placed them on your website and place a reference to the libraries (jqueryui.com/download/)

<script type="text/javascript" src="/umbraco_client/ui/jquery.js"></script>
<script type="text/javascript" src="/umbraco_client/ui/effects.core.js"></script>
<script type="text/javascript" src="/umbraco_client/ui/ui.datepicker.js"></script>

3. You can use one of the predefined themes (http://jqueryui.com/themeroller/). Place a reference to the CSS

<link href="/CSS/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />

Ok, so far it's just ordinary stuff. Nothing special.

4. As mentioned in step 1, the input box for a date is called txtDate. As you know, looking at the source code of you page when its rendered, the name (and also the id) is 'renamed' to something like 'ctl00_ctl00_ctl00_ContentPlaceHolderDefault_MasterTemplateContentPlaceHolder_ctl01_ContactForm_4_txtDate'
Don't worry, as long as there is the 'txtDate' part inside the name, the following JQuery function will find it:

<script>
$(document).ready(function() {
 $("input[name*='txtDate']").datepicker();
});
</script>

This piece of code will attach the jQuery datepicker functionality onto all input boxes with (somewhere) txtDate in the name. E.g. it will find input boxes with the name 'ct100_(...)_txtDateIn', 'ct100_(...)_txtDateOut', 'ct100_(...)_oldtxtDateIn' etc. As long as txtDate is used, it will be found.

I placed this code in the header section of my master page, so all forms that has a txtDate input box, will get the JQuery datepicker.

Placeholder message in input box with jQuery

I love working with jQuery. It's powerfull and relative easy to use. So I use it also for working with placeholder text inside a input textbox in HTML. So, when no text was entered, a default 'help' text/message is shown, like 'Click here to enter your firstname...'
In my case, I just wanted to have the text 'Zoeken...' (Dutch for Search...).
See the following flash demo:


To get this working, I used jQuery.
First of all, I set up the text box like this:

<input type="text" title="Zoeken..." name="search" value="Zoeken..." class="text" />

In the head section of the page, you need a reference to the jquery library:

<script type="text/javascript" src="http://YourUrl/jquery.js"></script>

Just before the end of the head section place the following piece of javascript code and you are done:

$(document).ready(function() {
 function switchText()
 {
  if ($(this).val() == $(this).attr('title'))
   $(this).val('');
  else if ($.trim($(this).val()) == '')
   $(this).val($(this).attr('title'));
 }

 $('input[type=text][title != ""]').each(
  function()
  {
   if ($.trim($(this).val()) == '')
    $(this).val($(this).attr('title'));
  }
 ).focus(switchText).blur(switchText);
 
 $('form').submit(
  function()
  {
   $(this).find('input[type=text][title != ""]').each(
    function()
    {
     if ($(this).val() == $(this).attr('title'))
      $(this).val('');
    }
   );
  }
 );
});

Remember to put this inside a script tag.