Not getting correct text data from link javascript

Question

I have this code that is a couple of links with divs inside them. When i click on one of the links it pops another div up that fills out using the "Case No" and "Type". However it only uses the data from the first link, not any other that i click.

HTML

<div class="plu-view-data">
 <a href="#" id="tp_0">
    <div class="tp-box">
        <div style="width: 45%; float:left;" id="type">TICKET</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
        <div id="case_no">CASE NO: 1234</div>
    </div>
 </a>
 <a href="#" id="tp_1">
    <div id="tp_id" class="tp-box">
        <div style="width: 45%; float:left;" id="type">WRITTEN WARNING</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
        <div id="case_no">CASE NO: 1235</div>
    </div>
 </a>
</div>

and the javascript is

$('.plu-view-data a').click(() => {
  $("#pedlookup-overlay").css('display','block')
  var type = $(this).find('#type').text()
  var caseno = $(this).find('#case_no').text()
  $('#plu-overlay-headbar').find('p').html(type+"  &nbsp;&nbsp; || &nbsp;&nbsp;  "+caseno)
})

Any idea as to why when i click the link it only uses the first link information?

Carl Edwards · Accepted Answer · 2017-12-30 05:01:18Z

2

The one tradeoff with using arrow functions is that there is no binding of this. To get it's context back you unfortunately have to go back to using the traditional function syntax (as it currently stands).

$('.plu-view-data a').click(function() {
  ...
});

edited Dec 30, 2017 at 5:01

answered Dec 30, 2017 at 4:52

Carl Edwards

14.6k12 gold badges69 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Wilkinson Over a year ago

Thats what it was. Thanks for that. Ill mark as answer when it lets me.

Carl Edwards Over a year ago

Much appreciated. Glad I was able to help out.

Akbar Soft · Accepted Answer · 2017-12-30 04:52:31Z

0

You have duplicated id 'type' in your html. please change it.

answered Dec 30, 2017 at 4:52

Akbar Soft

1,06610 silver badges19 bronze badges

Comments

Paaarth · Accepted Answer · 2017-12-30 04:57:25Z

$('.plu-view-data a').click(function() {
    $("#pedlookup-overlay").css('display', 'block')
    var type = $(this).find('#type').text();
    var caseno = $(this).find('#case_no').text();
    if (type && caseno) {
        console.log(caseno);
        $('#plu-overlay-headbar').find('p').html(type + "  &nbsp;&nbsp; || &nbsp;&nbsp;  " + caseno)
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="plu-view-data">
 <a href="#" id="tp_0">
    <div class="tp-box">
        <div style="width: 45%; float:left;" id="type">TICKET</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
        <div id="case_no">CASE NO: 1234</div>
    </div>
 </a>
 <a href="#" id="tp_1">
    <div id="tp_id" class="tp-box">
        <div style="width: 45%; float:left;" id="type">WRITTEN WARNING</div><div style="width: 55%; float:left;">WRITTEN: 01/01/2018</div>
        <div id="case_no">CASE NO: 1235</div>
    </div>
 </a>
</div>

Collectives™ on Stack Overflow

Not getting correct text data from link javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related