CODEWITHSUNDEEP
jquerysqlasp.netasp.net-mvc
yunusunver
yunusunver

Reputation: 620

How to get 'a' tag of id while click that in jquery?

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.

for example

<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

Answers (3)

Shyju
Shyju

Reputation: 218962

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

zagzter
zagzter

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

hardkoded
hardkoded

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

Related Questions