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
Post a Comment