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.

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.

• javascript
• php
• jquery
• html
• rss

8 Answers 8

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

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

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
});

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

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?

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() {

You can try this

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

          }
        });
    });

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; 
});

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.