Reputation: 620
I created a dynamic a tag in ASP.Net MVC. I want to list the topics according to the menu I clicked with jQuery. And how do I get the value of the clicked A
element? I tried but it brings the value of the first A
element. I want the value to come in when it's clicked.
<ul class="nav navbar-nav navbar-left" id="menuKategori">
@foreach (var item in Model.Take(6))
{
<li><a href="/Home/_PartialKonular/@item.KategoriId"
id="menu">#@item.KategoriAdi</a></li>
}
<li class="dropdown" id="menudropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>...</b>
</a>
<ul class="dropdown-menu">
@{
db_sozluk db = new db_sozluk();
var gelenVeri = db.Kategoris.Where(x => x.KategoriId >
6).ToList();
}
@foreach (var item in gelenVeri)
{
<li><a
href="/Home/_PartialKonular/@item.KategoriId">@item.KategoriAdi</a></li>
}
</ul>
</li>
<script>
$(document).ready(function () {
$('#menuKategori li a').click(function () {
var gelenVeri = $('#menu').text();
$.ajax({
url: '/Home/_PartialKonular/',
data: { veri: gelenVeri },
datatype: 'Json',
type: 'Get'
})
})
})
</script>
Upvotes: 0
Views: 79
Reputation: 218952
To start with, you should not hard code id
value for items you are generating in a loop. If your DOM has more than one element with same Id value, that is invalid html. So remove id="menu"
from the loop
@foreach (var item in Model.Take(6))
{
<li>
<a href="/Home/_PartialKonular/@item.KategoriId">#@item.KategoriAdi</a>
</li>
}
Now to get the clicked item ,you can use $(this)
in the click
event. So if you are trying to read the text you can use the text method
$(document).ready(function () {
$('#menuKategori li a').click(function (e) {
e.preventDefault();
alert($(this).text());
})
});
If you want to use some other value (ex : KategoriId
), you can set that in html5 data attribute on your a
tag and read that in your click
event
@foreach (var item in Model.Take(6))
{
<li>
<a data-id="@item.KategoriId" href="/Home/_PartialKonular/@item.KategoriId">
@item.KategoriAdi
</a>
</li>
}
and you will read it like
$(document).ready(function () {
$('#menuKategori li a').click(function (e) {
e.preventDefault();
alert($(this).data("id"));
})
});
If you are trying to call an action method with KategoriId
value, you can certainly use the Url.Action
helper to generate the url for you.
<a data-id="@item.KategoriId" href="@Url.Action("PartialKonular","Home",new { veri=item.KategoriId})">
@item.KategoriAdi
</a>
Assuming your PartialKonular
has a parameter named veri
. Now for your ajax call, you can use the href attribute value of the clicked link
$(document).ready(function () {
$('#menuKategori li a').click(function (e) {
e.preventDefault();
var url = $(this).attr("hred");
alert(url);
$.get(url).done(function(response){
alert("Response received from ajax call");
console.log(response);
});
})
});
Upvotes: 1
Reputation: 327
I think that your code is wrong, thats why you get always the first "a" text.
Try this one:
$('#menuKategori li a').click(function () {
var gelenVeri = $(this).text();
Upvotes: 1
Reputation: 21715
Thought there are countless ways to implement this, one approach is using data-
attributes:
<a href="#" data-tab="tab">Tab 1</a>
From javascript
$("[data-tab]").click(function (event) {
event.preventDefault()
alert($(event.currentTarget).data("tab"));
});
The main problem in your code is that you are not implementing the event
argument in your click event. It should look something like this:
$('#menuKategori li a').click(function (event) {
var gelenVeri = $(event.currentTarget).text();
}
Upvotes: 1