javascript - How to insert html content to a particular div element during ajax call success function? -

javascript - How to insert html content to a particular div element during ajax call success function? -

using ajax script below, want insert html content 1 of div element within table. can see have main div element called "ajaxcom" want insert html content div element class = "divrep". how insert html info in "divrep" element during success function of ajax call?

ajax script:

$('#ajaxcom').on('click ', '.postrep', function () { var inputs = $(this).closest('div').find('input'); //finding inputs within div var textin = $(this).closest('div').find('textarea'); //finding textarea within div var dataobject = { id: inputs.first().val(), //getting value of first input name: $(this).closest('div').find('input[class="name"]').val(), //getting/finding value of element within div reply: textin.first().val() //getting value of first textarea in div }; $.ajax({ url: '/ajaxcomms/ajaxreplies', type: "post", data: dataobject, datatype: "json", success: function (result) { $.ajax({ url: '/ajaxcomms/displayreppartial', type: "get", contenttype: 'application/html; charset=utf-8', data: dataobject, datatype: "html", success: function (result) { // $('#ajaxcom').html(result); // on part, i'm struggling???? var findiv = $(this).closest('table').find('div[class="divrep"]'); // $('.divrep').html(result); // var findiv = $(this).closest('table').find('div[class="divrep"]'); // $(findiv).html(result); findiv.html(result); } }) }, error: function (result) { alert(status); } }); }); /**hint part of ajax call:**/ $.ajax({ url: '/ajaxcomms/displayreppartial', type: "get", contenttype: 'application/html; charset=utf-8', data: dataobject, datatype: "html", success: function (result) { // $('#ajaxcom').html(result); // on part, i'm struggling???? var findiv = $(this).closest('table').find('div[class="divrep"]'); // $('.divrep').html(result); // var findiv = $(this).closest('table').find('div[class="divrep"]'); // $(findiv).html(result); findiv.html(result); } })

html view:

<div id="ajaxcom"> <table id="mytable">@foreach (var item in model.comments) { <tr> <td> <div style="font-weight:bold;">@html.displayfor(modelitem => item.name)</div> <p class="comment more" style="white-space: pre-line; margin-top:0px;margin-bottom:0px; border-radius: 4px 4px 4px 4px; max-width :500px; min-height :5px; display :block; background-color: #ccccff">@html.displayfor(modelitem => item.comment)</p> <p style="height:5px;margin-top:0px;margin-bottom:5px"> <input type="button" id="like" name="like" value="like" style="font-weight:normal;margin-top:0px; color:blue;border:0px;background-color:inherit;cursor:pointer" /> <input type="button" class="reply" name="reply" value="replie(s)" style="margin-bottom:10px;font-weight:normal;margin-top:0px; color:blue;border:0px;background-color:inherit;cursor:pointer" /> </p> <div id="divreply" class="divrep" style=" position:relative;left:57px; overflow:auto;margin-top:0px;margin-bottom:0px"> <table>@foreach (var item2 in model.replies.where(r => r.id == item.id) ) { <tr> <td> <div style="font-weight:bold;">@html.displayfor(modelitem => item2.name)</div> <p class="comment more" style="margin-top:0px;margin-bottom:0px;white-space:pre-line; border-radius: 4px 4px 4px 4px; max-width :445px; min-height :5px; display :block; background-color: #ccccff;">@html.displayfor(modelitem => item2.reply)</p> </td> </tr>}</table> <div> <div class="editor-field" style="display:none; margin-bottom:5px;margin-top:5px"> <input type="text" id="comidvalue" name="id" class="id" value="@html.displayfor(modelitem => item.id)" /> </div> <br /> <input type="text" id="namerep" name="name" class="name" style="width:445px;resize:none" /> <br /> <textarea id="reply" name="reply" class="reply" style="width:445px;height:100px;resize:none"></textarea> <br /> <input type="button" class="postrep" value="post reply" name="butname" style="cursor:pointer" /> </div> </div> <br /> </td> </tr>}</table> </div>

this object within ajax success function refers jqxhr object of ajax call, not element event handler bound . utilize next

$('#ajaxcom .postrep').closest('table').find('div.divrep').html(result);

or set var $this = $(this); @ starting of event handler , utilize $this instead of $(this) within ajax success callback function.

$('#ajaxcom').on('click ', '.postrep', function () { var $this = $(this); //...^........................ ...................... ...................... $.ajax({ url: '/ajaxcomms/ajaxreplies', type: "post", data: dataobject, datatype: "json", success: function (result) { $.ajax({ url: '/ajaxcomms/displayreppartial', type: "get", contenttype: 'application/html; charset=utf-8', data: dataobject, datatype: "html", success: function (result) { var findiv = $this.closest('table').find('div.divrep'); //............^................... findiv.html(result); } }) }, .................... .................... }); });

javascript jquery ajax asp.net-mvc-3 asp.net-mvc-4