Get id of element when click ( php, jquery, ajax, javascript )

Question

I'm sorry, this is my first project and I'm learning a lot. So if someone can help me, I will be grateful.

I have this sidebar on my project, which contains rss links. I have to use ajax so each time when user click on any rss link, feeds will appear on screen.

This is my code for sidebar:

<div class="col-md-3">
<div class="well" style="width:300px; bottom: 0; top: 50px; position: fixed;">
    <div id="sidebar-wrapper" style="overflow-y: scroll; overflow-x: scroll; height: 100%;">
        <ul class="list-unstyled">
            <li class="nav-header"> 
                <a href="#" data-toggle="collapse" data-target="#userMenu">
                    <h5><b>Subscriptions </b><i class="glyphicon glyphicon-chevron-down"></i></h5>
                </a>

                <ul class="list-unstyled collapse in" id="userMenu">
                    <li><a id="id_1" href="#">Sub_1</a></li>
                    <li><a id="id_2" href="#">Sub_2</a></li>
                    <li><a id="id_3" href="#">Sub_3</a></li>
                    <li><a id="id_4" href="#">Sub_4</a></li>
                    <li><a id="id_5" href="#">Sub_5</a></li>
                    <li><a id="id_6" href="#">Sub_6</a></li>
                    <li><a id="id_7" href="#">Sub_7</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

There is any chance to get id for each link when any of those links are clicked ?

Or I have to write a different function where to use ajax for each id ?

Can someone show me how to use ajax on this only once, not seven times ? I have a div in my body tag : div id="changebodywithaxaj" and I want to change it with properly feeds for each link.

Thank you in advance.

PeterKA · Answer 1 · 2014-10-21T12:52:41.213

1

Attach a click event listener to the li a elements; in the click handler you can get the id of the element click from the id property of this this.id. Then you can use that id as data in your ajax call. Also, pass the event object, e, and call e.preventDefault() to prevent the click from trying to follow the link -- in your case it would jump upto the top.

$('li a').on('click', function(e) {
    e.preventDefault();
    var Id = this.id;
    // use id in ajax call
});

edited Oct 21 '14 at 12:52

answered Oct 21 '14 at 11:37

PeterKA

24,158
5
26
48

1

An explanation of what you're doing here would be helpful. – blalasaadri Oct 21 '14 at 12:32

score 1 · Accepted Answer · answered Oct 21 '14 at 11:39

1

You can get the ID by this way, for more details and ajax part, check this fiddle, good luck. http://jsfiddle.net/ea51y1j5/

$("#userMenu").children('li').click( function() {
    var rssId = $(this).children('a').attr('id');
});

answered Oct 21 '14 at 11:39

Gonzalo Bahamondez

1,371
1
16
37

score 0 · Answer 3 · answered Oct 21 '14 at 11:31

0

Just retrieve the value on click by using the $('clickedEl').attr('id') link to jsfiddle -> http://jsfiddle.net/6ov1ydzv/

answered Oct 21 '14 at 11:31

JonasB

328
2
11

score 0 · Answer 4 · answered Oct 21 '14 at 11:34

If I underestand correctly, you want to add a click event to all the links:

$('#userMenu a').on("click", ajaxCall);

and in the click event get the id of the clicked element and call an ajax function to paint the feeds on the screen:

function ajaxCall(){
    var id = $(this).attr('id');
    $.ajax({
        url: "url",
        data: { id : id },
        success: paintFeedsOnScreen
    })
}

It's that or I'm missing something?

score 0 · Answer 5 · answered Oct 21 '14 at 11:34

How about this?

$('ul.list-unstyled').on('click', 'a', function() {
  var ID = this.id;
  //use the ID for your ajax call...
});

Even better, you could also use the element id since you have one, as below:

$('#userMenu').on('click', 'a', function() {

score 0 · Answer 6 · answered Oct 21 '14 at 11:38

0

You can try this

  $('li a').click(function(){
    var id = this.id;
       $.ajax({
            url: // your url goes here
             data:{id:id},
             success: function(result){

          }
        });
    });

answered Oct 21 '14 at 11:38

Dev

612
2
13
33

score 0 · Answer 7 · answered Oct 21 '14 at 11:49

So if you only want the ID from the link click on you can do:

$("#userMenu li a").on("click", function(){
    var id = this.id;
    // This is where you can do what ever with your id from that element.
    return false; // This is so that it won't follow the link you're clicking and reload the page 
                  // when you don't want to.
});

But perhaps you actually want the href from the link you click. Since it's a link you want to follow (with ajax) any way? You'd pretty much do the same thing:

$("#userMenu li a").on("click", function(){
    var href = $(this).attr('href');
    // do your ajax stuff here perhaps. With href as a link in your ajax call. 
    return false; 
});

EnKrypt · Answer 8 · 2014-10-21T11:34:54.717

-1

Add this code as a JS script on the page :

$("#userMenu a").click(function() {
    $("#changebodywithajax").html(updateRSSWithID($(this).attr('id')));
});

Where updateRSSWithID(IDGoesHere) is a function that takes in the ID of the element and returns the appropriate body of text that corresponds to it.

edited Oct 21 '14 at 11:34

answered Oct 21 '14 at 11:28

EnKrypt

777
8
23

It's either $(this).attr('id') or better this.id; – lshettyl Oct 21 '14 at 11:30
Downvotes should ideally be removed once the error has been rectified. – EnKrypt Oct 21 '14 at 11:35

Get id of element when click ( php, jquery, ajax, javascript )

8 Answers8

Linked