Question

我正在尝试使用jquery在文本框的textchange事件上调用服务器端方法，该文本框是在客户端上动态生成的（我不知道如何获取它的id）。有人可以帮我做这个吗？我使用的脚本如下：

  <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

您需要在生成文本框后写下将事件添加到文本框的代码，否则它不会被激活。

添加文字框
之后编写代码以将事件添加到文本框或将事件绑定到文本框

按照上面的步骤即可完成您的工作

修改

将错误功能添加到您的ajax调用中，您将收到错误...将允许您继续进行

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

Answer 2

我认为你有一个额外的“}）;”虽然这可能不是问题。
什么是“AssignedToID”？尝试在其周围添加单引号。我似乎记得几年前有一个奇怪的问题与json中的引用有关。
你能看到Fiddler / firebug / etc中的请求吗？内容是否正确？

你也应该小心使用推断的分号。如果你曾经缩小你的javascript（是的，我知道这是嵌入的，但我希望有一天它会被移动到一个单独的js文件）你最终会遇到问题。想象一下其他一些开发人员出现了，做了一些重构，需要在ajax调用之后添加一个返回值。

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

修改

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新手常常忽略的东西。阅读它here。

如何使用jquery调用服务器端方法？

2 个答案: