Issue getting value of php output results with jQuery

Question

I am attempting to get the value of specific looped elements. I basically have a list of records and if I click on a record, I want to be able to obtain the value of the status of that element. The status value is binary, either 0 or 1. The issues I am running into are the following:

-The click function I created is not generating a value and the alert is not showing.

-As you can see in my foreach loop, I am outputting the $status_img for $status if it meets a certain condition. The value I need is really $status.

Does anyone see what I can do to help my problems?

foreach ($rows as $row) {
            $status = $row['status'];
            $class = $status != 0 ? 'status-nonzero' : '';
            if ($status == 0) {
                $status_img = '<img src="../icons/collection/x-sign.png" alt="Goal Not Complete">';
            }
            else {
                $status_img = '<img src="../icons/collection/checkmark.png" alt="Goal Complete">';
            }
            $goal_date = $row['date'];
            $fixed_goal_date = fixDate($goal_date);
            $html = "";
            $html .= '<div class="goal-box" id="comment-'.$row['id'].'">';
            $html .= '<div class="goal-box-left">';
            $html .= '<div class="goal-post-status">'.$status_img. '</div>';

jQuery:

 $('.goal-post-status').click(function (event) {
     var status = $(this).val;
     alert(status);
 });

br3t · Accepted Answer · 2016-11-15 21:47:48Z

1

You can set status in data-attribute then read it from jQuery:

HTML

$html .= '<div class="goal-box" id="comment-'.$row['id'].'">';
$html .= '<div class="goal-box-left">';
$html .= '<div class="goal-post-status" data-status="'.$status.'">'.$status_img. '</div>';

Javascript

$("body").on("click", ".goal-post-status", function (event) {
    var status = $(this).attr("data-status");
    alert(status);
});

edited Nov 15, 2016 at 21:47

answered Nov 15, 2016 at 21:30

br3t

1,6582 gold badges22 silver badges29 bronze badges

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

7 Comments

Paul Over a year ago

Thanks, this makes sense, but for some reason the alert still isn't showing.

br3t Over a year ago

Can you share problem web-page?

br3t Over a year ago

If you insert this goals via ajax - use this from of event-listening: $("body").on("click", ".goal-post-status"). I've fixed solution.

Paul Over a year ago

Thanks! That helped, but for some reason, the check marked icons aren't working. I also noticed that it isn't reading my css rule of cursor:pointer; Do you see why that specific one wouldn't work?

Paul Over a year ago

Thanks. I believe it has to do with my element above it that has opacity:0. If you click on "Add New Goal", you will see a form appears. I can't figure out how to make that not interfere with this.

|

RonyLoud · Accepted Answer · 2016-11-15 21:45:26Z

0

You can use: use $(this).html() in place of $(this).val()

 $('body').on('click','.goal-post-status',function (event) {
     var status = $(this).html();
     alert(status);
 });

answered Nov 15, 2016 at 21:45

RonyLoud

2,4362 gold badges23 silver badges27 bronze badges

Comments

David · Accepted Answer · 2016-11-15 22:06:11Z

0

Try this:

$(".goal-post-status").click(this, function() {
    var status = $(this).html();
    alert(status);
});

answered Nov 15, 2016 at 22:06

David

4392 gold badges5 silver badges14 bronze badges

Collectives™ on Stack Overflow

Issue getting value of php output results with jQuery

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related