echo-ed HTML Element from PHP is not read in JAVASCRIPT

Question

so i have some html elements generated from PHP since most contents are fetched from the database

i.e.

<?php
    ...
    while($row = $sqlQry->fetch_object()) {
        echo "<li class = 'lstOption' id = 'opt$row->name' data-value = '$row->total_count'>
                  <h3>$row->given_reference<h3>
              </li>";
    }
    ...
?>

and this is a sample structure based on my javascript

<script>
    $("ul li").click(function(){
        alert($(this).data('value'));
    });
</script>

but if i inject an onClick= attribute while inside the echo. the script executed properly. what i need is for the script to work with the echo-ed html elements from php.

EugeneSantos · Accepted Answer · 2016-01-21 06:31:20Z

3

Try using variable interpolation syntax, i.e. wrap your variables around curly braces

"{$var}" take note that you have to use double quotes("") for this

"<li class = 'lstOption' id = 'opt{$row->name}' data-value = '{$row->total_count}'>
              <h3>{$row->given_reference}<h3>
          </li>"

answered Jan 21, 2016 at 6:31

EugeneSantos

3682 silver badges7 bronze badges

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

2 Comments

TheQuestioner Over a year ago

uhm. what are they for ?

EugeneSantos Over a year ago

basically telling a php string that you are injecting value of a variable to it, without using concatenation, it also works on arrays i.e. "lorem {$arr['ipsum'}"

Thanga · Accepted Answer · 2016-01-21 06:29:03Z

2

Just put your script inside document ready as below. That will fix the issue

 $(document).ready(function(){
   $("ul li").click(function(){
      alert($(this).data('value'));
   });
 });

answered Jan 21, 2016 at 6:29

Thanga

8,2003 gold badges22 silver badges39 bronze badges

2 Comments

TheQuestioner Over a year ago

the script is already inside $(document).ready(function(){}); sir. still not fixed

Thanga Over a year ago

Are you seeing this generated html in firebug ?

Keyur Mistry · Accepted Answer · 2016-01-21 06:49:34Z

2

You should try the code binding with the $(document).ready() method. This is because once your all DOM elements are ready then after code bind with document ready will appear. so do the following code.

<?php
    ...
    while($row = $sqlQry->fetch_object()) { ?>
        <li class = 'lstOption' id = 'opt<?php echo $row->name?>' data-value = '<?php echo $row->total_count?>'>
                  <h3><?php $row->given_reference?><h3>
              </li>";
    }
<?php    ...
?>


<script>
$(document).ready(function(){
 $("ul li").click(function(){
        alert($(this).data('value'));
    });
});
</script>

or write as follows

<script>
    $(document).ready(function(){
     $("ul li").on("click",function(){
            alert($(this).data('value'));
        });
    });
    </script>

edited Jan 21, 2016 at 6:49

answered Jan 21, 2016 at 6:28

Keyur Mistry

9266 silver badges19 bronze badges

2 Comments

TheQuestioner Over a year ago

the script is already within $(document).ready(function(){}); sir

Keyur Mistry Over a year ago

So can you please let me know the full HTML code of yours? So I can able to fix it

Vincent Teyssier · Accepted Answer · 2016-01-21 06:56:27Z

1

You can try to select by id and use the on() method:

$(document).on('click', '[id^="opt"]', function () {});

Works only if you don't have anything else with id starting with "opt". In my opinion id selectors are always stronger than any other selector. The on() method is also preferable as it is also valid for dynamically generated elements (in case of adding content via ajax for example)

Also if you want to print the actual value and not the formula in your data-value, your quotes are wrong, here is the correct version :

while($row = $sqlQry->fetch_object()) {
    echo "<li class = 'lstOption' id = 'opt".$row->name."' data-value = '".$row->total_count."'>
              <h3>".$row->given_reference."<h3>
          </li>";
}

edited Jan 21, 2016 at 6:56

answered Jan 21, 2016 at 6:51

Vincent Teyssier

2,2275 gold badges30 silver badges69 bronze badges

1 Comment

Vincent Teyssier Over a year ago

@TheQuestioner I think your issue comes from your quotes and that you do not concatenate the php parts. Read my edit

Vincent Teyssier · Accepted Answer · 2016-01-21 07:17:55Z

1

try like

$(document).ready(function(){
   $("ul li").on('click', function(){
      console.log($(this).data('value'));
   });
 });

Since your html elements are generating dynamically you have to use on()

edited Jan 21, 2016 at 7:17

Vincent Teyssier

2,2275 gold badges30 silver badges69 bronze badges

answered Jan 21, 2016 at 7:02

Anto S

2,4576 gold badges35 silver badges52 bronze badges

2 Comments

TheQuestioner Over a year ago

according to jquery documentation as of 1.7 it was deprecated and as of 1.9 it was removed. i am using 2.1.4 atm

Anto S Over a year ago

@TheQuestioner give a try to on()

Collectives™ on Stack Overflow

echo-ed HTML Element from PHP is not read in JAVASCRIPT

5 Answers 5

2 Comments

2 Comments

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related