【问题标题】:Bind textbox with response from onclick event - jquery将文本框与 onclick 事件的响应绑定 - jquery
【发布时间】:2015-08-21 05:42:56
【问题描述】:

我的视图页面中有一个文本框。当我单击 imageIcon 时,它将从数据库中获取数据并成功返回警报。但是,当我尝试将此响应数据绑定到文本框时,它没有正确绑定。我在视图页面中的代码如下:

@foreach (var dateitem in list)
                    {                        
                            <td id="HoursTxt">
                                @Html.TextAreaFor(modelitem => dateitem.Hours, new { id = string.Format("txtHours"), style = "width:50%;height:70%;" }) 
                                @Html.Hidden("CuDate", dateitem.Date)
                                    <img src="~/Images/comment.png" class="prevtest" />
                                <div style="border:solid;display:none;">                                   
                                    <input type="text" id="TxtNotess" />
                                    <input type="button" id="BtnComment" value="Save" />
                                </div>
                            </td>
             }

在我的 imageIcon jquery 的 onclick 事件中如下:

$('.prevtest').on('click', function () {        
        var Cudate = $(this).prev('#CuDate').val();
        var ProjId = parseInt($(this).parents('tr').find('input[type="hidden"]').val());
        var TskId =parseInt($(this).parents('tr').find('td').find('#testTaskId').val());       
        $.ajax({
            type: "POST",
            url: "/Timesheet/GetComments?ProjectId=" + ProjId + "&TaskId= " + TskId + "&date= " + Cudate,
            success : function(data)
            {
                alert(data);
                $('#TxtNotess').val(data);
                alert('success');
            },
            error:function()
            {
                alert('Error');
            }
        });
        $(this).next().toggle();
    });

id 为 TxtNotess 的文本框未与响应值绑定 任何人都可以帮我做到这一点.. 提前谢谢..

【问题讨论】:

    标签: javascript jquery html view


    【解决方案1】:

    首先:元素的 ID 必须是唯一的,因此请使用 TxtNotess 文本字段的类。

    <input type="text" class="TxtNotess" />
    

    然后,在成功处理程序中,在被点击元素的下一个兄弟元素中找到类 TxtNotess 的文本文件

    $('.prevtest').on('click', function () {
        var Cudate = $(this).prev('#CuDate').val();
        var ProjId = parseInt($(this).parents('tr').find('input[type="hidden"]').val());
        var TskId = parseInt($(this).parents('tr').find('td').find('#testTaskId').val());
        $.ajax({
            type: "POST",
            url: "/Timesheet/GetComments?ProjectId=" + ProjId + "&TaskId= " + TskId + "&date= " + Cudate,
            context: this,//pass a custom context to the ajax handlers - here the clicked element reference
            success: function (data) {
                alert(data);
                $(this).next().find('.TxtNotess').val(data);//find the target textfield
                alert('success');
            },
            error: function () {
                alert('Error');
            }
        });
        $(this).next().toggle();
    });
    

    【讨论】:

    • 感谢您的回复。我试过了,但点击事件后文本框仍然是空的
    • 数据是否正常告警...也尝试在处理程序中告警$(this).length
    • 在提醒中我已正确获取数据
    • 每个循环都有问题吗?
    • 成功处理程序中的alert($(this).length) 怎么样
    【解决方案2】:
    $('.prevtest').on('click', function () {
        var Cudate = $(this).prev('#CuDate').val();
        var ProjId = parseInt($(this).parents('tr').find('input[type="hidden"]').val());
        var TskId = parseInt($(this).parents('tr').find('td').find('#testTaskId').val());
        $.ajax({
            type: "POST",
            url: "/Timesheet/GetComments?ProjectId=" + ProjId + "&TaskId= " + TskId + "&date= " + Cudate,
            context: this,//pass a custom context to the ajax handlers - here the clicked element reference
            success: function (data) {
                alert(data);
                $('.TxtNotess').val(data);//find the target textfield
                alert('success');
            },
            error: function () {
                alert('Error');
            }
        });
        $(this).next().toggle();
    });
    

    我通过使用文本框的类名来解决..

    【讨论】:

      猜你喜欢
      • 2012-08-07
      • 2014-06-29
      • 2013-12-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-09-02
      • 2011-03-20
      相关资源
      最近更新 更多