Установите значение текстового поля в Gridview с помощью JQuery

Question

У меня есть сетка grdtest. Я хочу обновить текстовое поле в gride, используя JQuery из модального диалога, который появляется при щелчке якоря. Я добавил код, но модальный диалог обновляет все текстовые поля в сетке. Как я могу обновить только текстовое поле в той же строке, что и якорь?

HTML-код

<div id="output"> 
<asp:GridView ID="grdtest" CssClass="grid" Width="20%" AutoGenerateColumns="false" runat="server" 
DataKeyNames="ID" OnRowCreated="grdtest_RowCreated" OnRowCommand="grdtest_RowCommand"> 
<Columns> 
<asp:BoundField DataField="ID" Visible="false" /> 
<asp:BoundField HeaderText="NAME" DataField="NAME" ItemStyle-Width="5%"/> 
<asp:TemplateField HeaderText="MONTH" ItemStyle-Width="5%"> 
<ItemTemplate> 
<asp:TextBox ID="txtsubject" runat="server" Wrap="true"></asp:TextBox> 
</ItemTemplate></asp:TemplateField> 
<asp:TemplateField ItemStyle-Width="2%"> 
<ItemTemplate><a href="#" >Month</a> 
</ItemTemplate> 
</asp:TemplateField> 
</Columns> 
</asp:GridView> 
</div> 

<div id="overlay" class="web_dialog_overlay"></div> 

<div id="dialog" class="web_dialog"> 
    <table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0"> 
     <tr> 
      <td class="web_dialog_title">Month Chooser</td> 
      <td class="web_dialog_title align_right"> 
       <a href="#" id="btnClose">Close</a> 
      </td> 
     </tr> 
     <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td colspan="2" style="padding-left: 15px;"> 
       <b>Choose the months from the list </b> 
      </td> 
     </tr> 
     <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td colspan="2" style="padding-left: 15px;"> 
       <div id="months"> 
        <input id="month1" name="month" type="checkbox" value="Jan" />January 
        <input id="month2" name="month" type="checkbox" value="Feb" />February 
        <input id="month3" name="month" type="checkbox" value="Mar" />March 
        <input id="month4" name="month" type="checkbox" value="Apr" />April 
        <input id="month5" name="month" type="checkbox" value="May" />May 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
     </tr> 
     <tr> 
      <td colspan="2" style="text-align: center;"> 
       <input id="btnSubmit" type="button" value="Submit" /> 
      </td> 
     </tr> 
    </table> 
</div> 
</form> 
</body> 

, ИС код

<script type="text/javascript"> 

    $(document).ready(function() 
    { 
     $("#btnClose").click(function (e) 
     { 
      HideDialog(); 
      e.preventDefault(); 
     }); 


     $('#btnSubmit').click(function(e) 
     { 
      var sub = []; 
      $(':checkbox:checked').each(function(i){ 
      sub[i] = $(this).val(); 
      }); 
      $("#grdtest").find("input[type=text][id*=txtsubject]").val(sub); 
      HideDialog(); 
      e.preventDefault(); 
     }); 

    }); 

    function ShowDialog(modal) 
    { 
     $("#overlay").show(); 
     $("#dialog").fadeIn(300); 

     if (modal) 
     { 
      $("#overlay").unbind("click"); 
     } 
     else 
     { 
      $("#overlay").click(function (e) 
      { 
       HideDialog(); 
      }); 
     } 
    } 

    function HideDialog() 
    { 
     $("#overlay").hide(); 
     $("#dialog").fadeOut(300); 
    } 

</script> 

Answer 1

Вы могли бы что-то добавить к вашей ссылке метод щелчка, который дает текстовое поле конкретный класс, который впоследствии может предназначаться так вы только цель одна, как:

$(".openModalLink").click(function(){ 
    $(this).parent().parent() 
     .find("input[type=text][id*=txtsubject]").addClass("ChangeMe"); 
    ShowDialog(); 
} 

Вы должны добавить класс к <a href="#" class="your class name">Month</a> в ваш gridview. В моем случае это будет openModalLink. Тогда ваш отправить функция будет выглядеть следующим образом:

$('#btnSubmit').click(function(e) 
    { 
     var sub = []; 
     $(':checkbox:checked').each(function(i){ 
     sub[i] = $(this).val(); 
     }); 
     $("#grdtest").find(".ChangeMe").val(sub); 
     HideDialog(); 
     e.preventDefault(); 
    }); 

И в вашем HideDialog удалить конкретный класс из всех текстовых полей.

function HideDialog() 
{ 
    $("#overlay").hide(); 
    $("#dialog").fadeOut(300); 
    $("#grdtest").find("input[type=text][id*=txtsubject]").removeClass("ChangeMe"); 
} 

Надеюсь, это поможет и является тем, что вы искали.

Answer 2

Сначала вам нужно получить индекс текстового поля. Затем обновите значение с помощью индекса.

Я использовал приведенный ниже код для своего приложения. Работает хорошо ..

$('[id*=txtBindSplitPercent]').change(function() { 
      var value = $(this).val(); 
      index = $(this).closest('tr').index(); 
      if (value.trim() != '') { 
       $(this).val(100); 
      } 
     });