Find value of sibling children

Question

I am trying to find the value of span. When I click on anchor it should give me value inside span. It should be dynamic.Here is the html

<div class="member-info">
     <h2>Total Votes : <span>1</span></h2>
     <a href="3" class="btn-system btn-medium border-btn vote_btn" data-target="#danger" data-toggle="modal">Vote</a>
</div>

Here is the jquery code

 $('.vote_btn').on('click',function(){
        var id = $(this).attr('href');
        var method_url = "<?php echo base_url(); ?>Home/vote/"+ id;

        $.ajax
        ({
            type: "POST",
            url : method_url,
            success:function(data)
            {

                if(data=='1')
                {
                     var votes = $(this).siblings('h2').children('span').text() ; alert(votes);
                    $("#vote_response").html('Thanks you and come back tomorrow to vote again.');
                }else if(data=='0')
                {
                    var votes = $(this).siblings('h2').children('span').text() ; alert(votes);
                    $("#vote_response").html('Sorry you have already voted today, please come back tomorrow to vote again.');
                }

                $('#response_modal').modal('show')
            }       
        }); 
    });

This code is giving me undefined value whereas I want to get the value available in span element when I click on anchor vote. Please help

when your ajax call is triggered.. in document ready or some click event? — Janani Kumar, Aug 12 '16 at 11:34

score 2 · Accepted Answer · answered Aug 12 '16 at 11:44

you cannot access $(this) in success function directly ,assign a variable and access it in success function

 $('.vote_btn').on('click',function(){
    var id = $(this).attr('href');
    var method_url = "<?php echo base_url(); ?>Home/vote/"+ id;
    var $current_element = $(this);

    $.ajax
    ({
        type: "POST",
        url : method_url,
        success:function(data)
        {

            if(data=='1')
            {
                 var votes = $current_element.siblings('h2').children('span').text() ; alert(votes);
                $("#vote_response").html('Thanks you and come back tomorrow to vote again.');
            }else if(data=='0')
            {
                var votes = $current_element.siblings('h2').children('span').text() ; alert(votes);
                $("#vote_response").html('Sorry you have already voted today, please come back tomorrow to vote again.');
            }

            $('#response_modal').modal('show')
        }       
    }); 
});

score 1 · Answer 2 · answered Aug 12 '16 at 11:19

1

Use .text() instead of .val(). The .val() function is used for finding the value of inputs and the span element is not an input. The .text() function will find the text inside of the span.

$('.vote_btn').on('click',function(){
  var votes = $(this).siblings('h2').children('span').text() ; alert(votes);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="member-info">
     <h2>Total Votes : <span>1</span></h2>
     <a href="3" class="btn-system btn-medium border-btn vote_btn" data-target="#danger" data-toggle="modal">Vote</a>
</div>

answered Aug 12 '16 at 11:19

Wowsk

3,637
2
18
29

Not working. Its giving empty alert. – Umerm Aug 12 '16 at 11:22
Is there something else that may be causing the program, because with the available code you posted my answer works. Look at the example in my answer. – Wowsk Aug 12 '16 at 11:24
Are you sure you have jQuery in your program? – Wowsk Aug 12 '16 at 11:24
Please see the code now. It is working outside ajax but not inside. – Umerm Aug 12 '16 at 11:28
yes I have jquery... now I have posted the full code. – Umerm Aug 12 '16 at 11:34

score 0 · Answer 3 · answered Aug 12 '16 at 11:20

0

Use .text() or .html() in place of .val() because span do not have value attribute

answered Aug 12 '16 at 11:20

Mayank Pandeyz

25,704
4
40
59

Not working. Its either giving undefined or empty. – Umerm Aug 12 '16 at 11:21

Find value of sibling children

3 Answers3