How to extract elements from html using jquery?

Question

I have a popover that lists various playlists a user has. On click, I am trying to get the video_id associated with the video to be added to the appropriate playlist. I'm not sure how to implement this; the user clicks on the link in the popover, the video_id (from the div #add) and the playlist selected (there are multiple playlists that the user generates names for but only one is selected) is supposed to be extracted. Any advice?

    <script type="text/javascript">
   $(document).ready(function() {
       $("#muncher").click(function(event){
       event.preventDefault();
            $.ajax({
                 type:"POST",
                 url:"/edit_favorites/",
                 data: {
                        'video_add': $('#add').val(), // from form
                        'playlist_selected': $('#').val() //from form
                        },
                 success: function(){

                        $('#muncher').html("Added");


                    }
            });
            return false;
       });

    });
</script>   


<div id = 'muncher'>
    <div id = 'add'>12345</div>
    <a href = "#" id="munch" rel="popover" data-html="true" data-placement="right"  data-content= "<a href= '#'>Favorites</a><br>

                <a href = '#' class = 'Funny'>Funny</a><br>

                <a href = '#' class = 'test'>test</a><br>

                <a href = '#' class = 'test1'>test1</a><br>                     

    " data-original-title="Add to your plate">
            Munch
    </a>    
</div>

You can't use `.val()` on `div` elements, it's only for form elements. Also, `$('#').val()` - what are you trying to select here?? — ahren, Dec 03 '12 at 00:23
I am trying to select the video id (12345) and the playlist that the user clicks on (Funny, test, test1, or whatever playlist they create). — sharataka, Dec 03 '12 at 00:24
Well, what is a playlist, what exactly are you trying to get? As a sidenote you are not closing the elements properly, and you're nesting anchors within anchors so it will be hard to figure out exactly what anchor was clicked when at any time you click "anything" you're clicking multiple anchors nested inside each other? — adeneo, Dec 03 '12 at 00:30
I am trying to determine if a user has clicked on "Funny", "test", or "test1" in the example above. — sharataka, Dec 03 '12 at 00:33
Something like `$('a').on('click', function() { if ($(this).is('.Funny')) { alert('you clicked funny'); } });` — adeneo, Dec 03 '12 at 00:36
I'm trying not to name the playlists absolutely because a user could create a playlist that isn't one of the three above. — sharataka, Dec 03 '12 at 00:46

Daveo · Answer 1 · 2012-12-03T00:33:53.040

0

You can try using jquery data attribute to store the ID within the A tag.

or instead you can try to get the previous sibling which is the DIV tag above the A tag that was clicked then use .text() to get its value

Also you should not have multiple elements with the same ID? It sounds like you have lots of items with ID="ADD" ?

In this case you may need to chage your code from

 $('#add').val(),

to

 $('#add', $(this)).text(),

edited Dec 03 '12 at 00:33

answered Dec 03 '12 at 00:26

Daveo

19,018
10
48
71

So this returns the video_id, but how do I get the playlist as well (Favorites, test, test1, or any other user-generated playlist)? – sharataka Dec 03 '12 at 01:12

score 0 · Answer 2 · edited May 23 '17 at 12:18

In an HTML document, .html() can be used to get the contents of any element, http://api.jquery.com/html/ so give this a try:

$('#add').html()

Daveo is correct, you would need to make the id of your divs unique, one option to do that is to use the playlist id along with add. like id="add_12345"

Then, instead of a .click jQuery method, use an onclick inline in each of your add_[id variable] divs:

<div id="add_12345" onclick="addClick(this);">

The javascript function to get the id:

function addClick(element) {
    id = element.id.slice(element.id.indexOf("_") + 1);
    alert(id);
    //your ajax post code here
}

There are several ways to handle what you are trying to achieve, check out this very good stackoverflow Q&A for more on this topic: Getting the ID of the element that fired an event

You should change your markup, 12.2.2 Nested links are illegal

score 0 · Accepted Answer · answered Dec 03 '12 at 05:16

Little confused about what exactly sure what you're trying to do. Is each video a child of playlist? If so, try passing this.id as a parameter in the onClick event...

...click="toPlaylist(this.id)"

function toPlaylist(clicked) {
  var tempVideo = clicked;
  // Get a parent node ID like this...
  var tempList = $(clicked).parentNode.id;
  // Do something else...
  nextAction(tempVideo, tempList);
}

PS: You may have to do something like this

  var tempVideo = '#'+clicked;

...for the variables, I'm not sure sure.

Hope this was helpful.

How to extract elements from html using jquery?

3 Answers3