Question

I’m trying to call a server side method, using jquery, on the textchange event of a textbox which is generated dynamically on the clientside (I dont know how to fetch the id of this). Can somebody help me to do this stuff? The script im using is as follows:

  <script type="text/javascript">

    $(init);

    function init() {

      $('#test').droppable(  //Div Control where i'll be dropping items
            {
              drop: handleDropEvent
            });

      $('a').each(function(idx, item) {   
        $(item).draggable({ cursor: 'move', helper: 'clone' })
      });
    }

    function handleDropEvent(event, ui) {
      var draggable = ui.draggable;
      document.getElementById('test').innerHTML += addColumn(draggable.attr('text')) + '<br>';
    }
    $('.textChangeClass').live('change', function() { 
/* Evokes on the text change event for the entire textboxes of class .textChangeClass. Is it possible to specify the dynamic textbox generated @ clientside here? (like for e.g. :  $('#mytextbox').click(function () ) */

    $.ajax({
      type: "POST",
      url: "Webtop.aspx/ServerSideMethod",         //This is not getting called at all.
      data: "{'param1': AssignedToID}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      async: true,
      cache: false,
      success: function(msg) {
        alert("From Server");
      }
    })

    });

    });
    function addColumn(column) {

      var iHtml;

      //This is how i'm generating the textboxes along with a checkbox bound by a div.
      iHtml = '<div id="dv' + column + '" width="100px;" height="20px;" padding: "0.5em;">&nbsp;' + '<span title="ToolTipText">' + '<input type="checkbox" id="cb' + column + '" value="' + column + '" /> <label for="cb' + column + '">' + column + '</label></span><input class="textChangeClass" type="text" id="aln' + column + '">&nbsp;</div>';
      return iHtml
    }
  </script>

Answer 1

1. I think you have an extra “});” although this probably isn’t the problem.
2. What is “AssignedToID”? Try adding single quotes around that. I seem to remember having a weird problem a couple years ago related to quoting in the json.
3. Can you see the request in Fiddler/firebug/etc? Is the content correct?

You should be careful of your use of inferred semi-colons too. If you ever minify your javascript (yeah, I know this is embedded, but I’d like to hope that one day it will be moved to a seperate js file) you’re eventually going to have a problem. Imagine some other developer comes along, does some refactoring and needs to add a return value after the ajax call.

$.ajax({...})return foo}

EDIT

Fiddler/Firebug Net panel are your friends… They will allow you to inspect the request and the response from the server. This way you don’t have to add the error handler (although you may want to for other reasons eventually)

EDIT

To answer the other part of your question, you can access the textbox for which the change event was triggered through the use of the ‘this’ keyword inside of the event handler.

$('.textChangeClass').live('change', function(event) {
    //Note that the 'event' parameter has interesting things in it too. 
    var changedText = $(this).val();
    alert("The value in the textbox is: '" + changedText + "'");
    var data = {
        param1: changedText
    };
    $.ajax({
        ...
        //Using json2 library here to create json string
        data: JSON.stringify(data), 
        ...
    });
});

Note that I added the optional ‘event’ parameter to the event handler. It has interesting things in it and it’s something that is often overlooked by people who are new to jQuery. Read about it here.