JQuery passing element by id in razor ASP.Net Core Visual Studio 2017 -


i'm using asp.net core 2.0 on visual studio 2017. i'm trying pass id element _layout.cshtml in shared file index.cshtml in home file, code isn't working.

this navigation bar in _layout.

        <div class="navbar-collapse collapse">             <ul class="nav navbar-nav">                 <li class="dropdown">                     <a class="dropdown-toggle" data-toggle="dropdown" href="#">food , drinks<span class="caret"></span></a>                     <ul class="dropdown-menu">                         <li><a href="#" class="update" id="restaurant" onclick="update(this)">restaurant</a></li>                         <li><a href="#" class="update" id="cafe" onclick="update(this)">cafe</a></li>                         <li><a href="#" class="update" id="bakery" onclick="update(this)">bakery</a></li>                     </ul>                 </li>             </ul>         </div> 

this buggy query in index.cshtml. i'm testing see if i'm getting correct id having alert(type); returns value undefined each time.

<script type="text/javascript">  $(document).ready(function ($) {     $(".update").click(function update(e) {         var type = $(e).attr('id');         alert(type);         $.ajax({             type: 'get',             url: '@url.action("getdata", "home")',             data: { type: type },             success: function (result) {                  $('#form').html(result);             }         });     }); }); 

get rid of onclick="update(this)" using unobtrusive event handler

and use current element content this retrieve attribute value

var type = $(this).attr('id'); //this.id; 

also persist arbitrary data use custom data-* attributes can fetched using .data()

$(".update").click(function(e) {    var type = $(this).data('id');    console.log(type);  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <ul class="dropdown-menu">    <li><a href="#" class="update" data-id="restaurant">restaurant</a></li>    <li><a href="#" class="update" data-id="cafe">cafe</a></li>    <li><a href="#" class="update" data-id="bakery">bakery</a></li>  </ul>


Comments

Popular posts from this blog

angular - Ionic slides - dynamically add slides before and after -

minify - Minimizing css files -

Add a dynamic header in angular 2 http provider -