Как вызвать серверный метод, используя jquery?

Question

Я пытаюсь вызвать метод на стороне сервера, используя jquery, для события textchange текстового поля, которое динамически генерируется на стороне клиента (я не знаю, как получить идентификатор этого). Может ли кто-нибудь помочь мне сделать это? Сценарий, который я использую, выглядит следующим образом:

  <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. Я думаю, что у вас есть дополнительный "});"хотя, вероятно, это не проблема.
2. Что такое "AssignedToID"?Попробуйте добавить одинарные кавычки вокруг этого.Кажется, я помню странную проблему пару лет назад, связанную с цитированием в json.
3. Можете ли вы увидеть запрос в Fiddler / firebug / etc?Является ли содержание правильным?

Вы также должны быть осторожны с использованием выведенных точек с запятой.Если вы когда-нибудь минимизируете свой javascript (да, я знаю, что он встроен, но я хотел бы надеяться, что однажды он будет перемещен в отдельный файл js), у вас в конечном итоге возникнут проблемы.Представьте, что какой-то другой разработчик приходит, проводит некоторый рефакторинг и должен добавить возвращаемое значение после вызова ajax.

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

EDIT

Панель Fiddler / Firebug Netваши друзья ... Они позволят вам проверить запрос и ответ с сервера.Таким образом, вам не нужно добавлять обработчик ошибок (хотя, возможно, вы захотите по другим причинам)

РЕДАКТИРОВАТЬ

Чтобы ответить на другую часть вашего вопросаВы можете получить доступ к текстовому полю, для которого событие изменения было вызвано с помощью ключевого слова this в обработчике события.

$('.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), 
        ...
    });
});

Обратите внимание, что я добавил необязательный параметр 'event' к событиюобработчик.В нем есть интересные вещи, и это то, что часто упускают из виду люди, которые плохо знакомы с jQuery.Читайте об этом здесь .

Answer 2

Вам нужно написать код добавления события в текстовое поле после генерации текстового поля, иначе оно не сработает.

1. добавить текстовое поле
2. После этого написать код для добавления событияк текстовому полю или привязать событие к текстовому полю

, просто следуйте вышеприведенному шагу и сделайте свою работу

РЕДАКТИРОВАТЬ

Добавьте функцию ошибкина ваш вызов ajax вы получите сообщение об ошибке ... позволит вам продолжить

$.ajax({
    type: "post", url: "/SomeController/SomeAction",
    success: function (data, text) {
        //...
    },
    error: function (request, status, error) {
        alert(request.responseText);
    }
});