CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-4
rogerthat
rogerthat

Reputation: 1815

id field not appending to div mvc 4

I have a dialog that opens an items window. I want to select an item click Add have that item's id appended to a div where I can then submit it up to the db. I'm getting the id in the alert but nothing is appending. I want to append on the Add button click but was trying just on a click of the li which isn't working either.

Dialog options

   $('.ITA').dialog({
 autoOpen: false,
 draggable: true,
 width: 450,
 resizable: false,
 dialogClass: "ui-dialog",
 modal: true,
 show: { effect: 'fade', duration: 200 },
 buttons: [{
 id: "AddToAddPage",
 text: "Send Trade",
 click: function () {


  // on close the item selected is added to `div ITA`
  //$(this).dialog("close");

  });

get the <li> clicked and append to div ITA

  $(".ITA").on("click", "li", function () {
   //get div 
     var div = $("#DivToAddTo");   

   //get id of item
    var itemtoadd = $(this).attr("data-id");    

    alert(itemtoadd);//for debug

    //apendTo?
    $(itemtoadd).appendTo(div); 
   });

The view where selected items should go

@model IEnumerable<Item>

@{
ViewBag.Title = "Tradepage";
}
<div id="Item">

 @foreach (var item in Model)
 { 
<ul>
    <li>
        @Html.DisplayFor(modelItem => item.ID)
    </li>
     <li>
        @Html.DisplayFor(modelItem => item.item_name)
    </li>
    <li>
        @Html.DisplayFor(modelItem => item.item_description)
    </li>
</ul>

 }
 </div>
 <div id="AddNav">
  <a class="AllItemsBtn" href='@Url.Action("GetItemsToAdd")' >Add File...</a>
  <a class="SubmitAdds" href="#" >Submit</a>
    </div>

 <div class = "ITA"></div>

 <div id = "AddedItems">Added items go here</div>

View where items are

@foreach (var item in Model)
 { 
<ul>
    <li data-id = "@item.ID">
        @Html.DisplayFor(modelItem => item.ID)
    </li>
     <li>
        @Html.DisplayFor(modelItem => item.item_name)
    </li>
    <li>
        @Html.DisplayFor(modelItem => item.item_description)
    </li>
  </ul>
 }

 <div id="addItemBtn">
<button id="AddToAPage">Add</button>

 <p><a id="AddToAdd" href="#">Add</a></p>
 </div>

Upvotes: 0

Views: 233

Answers (1)

zigdawgydawg
zigdawgydawg

Reputation: 2046

Replace

$(itemtoadd).appendTo(div);

With:

div.text(itemtoadd);

That should update the contents of the div with the selected id. Here is a simple example: jsFiddle . Click on one of the list items to see the id updated.

Upvotes: 2

Related Questions