Using JavaScript to inject HTML

Question

i have this in my view:

 <div class="grid_12">
<div class="box tabbed news" id="box1">
   <div class="header">
    <h3>
       <%: Model.News.Title %> 
    </h3>
  </div>
  <div class="content" id="newsItem">
    <% Html.RenderPartial("NewsItem", Model); %>
  </div> 
  <div class="clear"></div>
 </div>
 </div> <!-- End of .grid_12 -->

 <div class="clear"></div>
 <table id="table2">

 </table>
 <div class="grid_12">
 <div class="box tabbed news" id="box2">
   <div class="content" id="testdiv">
     <table id="table">
       <tr>
         <td>
           <a href="javascript:ShowReplyTextArea();" class="button">Reply</a>
         </td>
         <td>
           <a href="javascript:ReplyPost(<%: Model.News.NewsId %>);" class="button" id="post_button">Post</a>
         </td>
       </tr>
     </table>
    </div>
  </div>
</div>
<div class="clear"></div>
</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="ScriptPlaceHolder" runat="server">
<script type="text/javascript">
 function ShowReplyTextArea() {
   div = document.getElementById('testdiv')
   textArea = document.createElement("textarea");
   textArea.setAttribute('rows', 20);
   textArea.setAttribute('cols', 149);
   textArea.setAttribute('id', "textarea");

   div.appendChild(textArea);
 }

 function ReplyPost(newsId) {
   var message = $("#textarea").text();
   if (message != null)
     $("#post_button").show();
   var jqxhr = $.getJSON("<%= Url.Action("ReplyPost", "Home", new { area = "News" }) %>?newsId=" + newsId + "&message=" + message, function (data) {
   });

   divtext = document.getElementById('table2');
   divtext.setAttribute('text', message);
 }
</script>

when i click on the reply button my text area pops up, i typed in some news and click on the post button. I need to display what i just typed underneath the grid_12 div. the textarea must then be hidden again until i click on reply again

I am struggeling to make this work. can someone help please?

Please change <a href="javascript:ReplyPost(<%: Model.News.NewsId %>);" class="button" id="post_button">Post</a> to <a href="#" onclick="ReplyPost(<%: Model.News.NewsId %>); return false" class="button" id="post_button">Post</a> and see if it helps — mplungjan
– mplungjan, Commented Dec 4, 2012 at 13:52
You do not do anything when you submit var jqxhr = $.getJSON("<%= Url.Action("ReplyPost", "Home", new { area = "News" }) %>?newsId=" + newsId + "&message=" + message, function (data) { do something here!!! }) — mplungjan
– mplungjan, Commented Dec 4, 2012 at 14:03

Mateusz · Accepted Answer · 2012-12-04 13:58:08Z

1

Add some div to display value and use jQuery in MVC3 you can use jQuery out of the box. When you use $("#id") you select item by id, much like getElementById but it is wrapped set of jQuery with which you can do much more than selecting it normally.

new div for displaing

<div id="displayArea"></div>

some jQuery code to put in onClick:

$("#textArea").hide();
$("#displayArea").innerText = $("#textArea").val();

answered Dec 4, 2012 at 13:58

Mateusz

2,32720 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using JavaScript to inject HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related