0

1.ボタンをクリックすると、一意のIDを持つテキストボックスを含むdivを動的に生成したい

      <input id="<%:rid %>" type="button" value="reply"/>

2.また、jquery ajax mathodを使用して、テキストボックスデータをashxファイルに転送したいと思います。

誰か助けてもらえますか

コード

 var lineItemCount = 0;
    $(document).ready(function () {

        $(".commentbox input[type='button']").click(function () {

            var id = $(this).attr("id");

            alert(id);

           var cid = id.substring(5);
           var containerid = "container" + cid;
           alert(containerid);

            //Increase the lineitemcount
            lineItemCount++;
            //Add a new lineitem to the container, pass the lineItemCount to makesure                      
            getLineItem() 
            // can generate a unique lineItem with unique Textbox ids
            $(containerid).append(getLineItem(lineItemCount));
        });
});
 //Create a new DIV with Textboxes
     function getLineItem(number) {
         var div = document.createElement('div');
         //Give the div a unique id
           div.setAttribute('id', 'lineitem_' + number);

         //pass unique values to the getTextbox() function
         var t1 = getTextbox('txt_' + number + '_1');
         div.appendChild(t1);
         return div;
     }

     //Create a textbox, make sure the id passed to this function is unique...
     function getTextbox(id) {
         var textbox = document.createElement('input');
         textbox.setAttribute('id', id);
         textbox.setAttribute('name', id);
         return textbox;
     }

aspxページのモデルの反復

<%var i=1;%>
 <%foreach (var commentitem in item.commentsModelList)
  { 
    <table border="0"  class="commentbox">
    <tr>
      <%var rid = "reply" + i;%>
       <div id="<%:containerid %>">
        <td>  <input id="<%:rid %>" type="button" value="reply"/>
       </div>
    </td>
   </tr>
  </table>
  <% i++;}%>
4

1 に答える 1

0

マークアップを少し変更して、クリック イベントで対応するアイテムの ID を取得しました

HTML

 <table border="0"  class="commentbox">
    <tr>
        <td>Some Item text
        </td>
     </tr>
     <tr>
         <td>
             <div id="container-1" ></div>
             <input type="button" class='btnReply' id="reply-1" value="Reply" />             
         </td>
     </tr>
</table>

そしてスクリプト

 $(function(){     
      $(".commentbox .btnReply").click(function(){
        $(this).hide();
        var id=$(this).attr("id").split("-")[1]        
        var strDiv="<input type='text' class='txtCmnt' id='txtReply-"+id+"' /> <input type='button' class='btnSave' value='Save' id='btnSave-"+id+"' /> ";
        $("#container-"+id).html(strDiv);          
      });

       $(".commentbox").on("click",".btnSave",function(){
          var itemId=$(this).attr("id").split("-")[1]         
           var txt=$(this).parent().find(".txtCmnt").val();
           $.post("/echo/json/", {reply: txt, id: itemId},function(data){                            
               alert(data);
               //do whatever with the response
           })           
       });       
    });

これが jsfiddle の例です: http://jsfiddle.net/UGMkq/30/

投稿のターゲット URL を、ajax 応答を処理する関連ページに変更する必要があります。

編集：複数のDivの処理に関するコメントによると

コンテナー div id が一意である限り、機能します。マークアップを変更して、複数の項目を含めるようにしました。

 <table border="0"  class="commentbox">
    <tr>
        <td>Some Item text<br/>                
             <div id="container-1" ></div>
             <input type="button" class='btnReply' id="reply-1" value="Reply" />             
         </td>
     </tr>
      <tr>
        <td>Some Another Content here <br/>               
             <div id="container-2" ></div>
             <input type="button" class='btnReply' id="reply-2" value="Reply" />             
         </td>
     </tr>
</table>

これがサンプルです: http://jsfiddle.net/UGMkq/44/

上記の出力をレンダリングするには、おそらく次のようにかみそりの構文を書きたいと思うでしょう。

<table border="0"  class="commentbox">
@foreach (var commentitem in item.commentsModelList)
{
   <tr>
      <td>Some Another Content here<br/>
          <div id="container-@(commentitem.Id)" ></div>
          <input type="button" class='btnReply' id="reply-@(commentitem.Id)" value="Reply" />             
       </td>
    </tr>
}
</table>

アイテムごとに新しいテーブルを作成する代わりに、既存のテーブルに新しい行を作成しました。

于 2012-04-15T16:08:22.523 に答える