Uncaught Reference Error and JS functionality

Question

I've been looking at this for a while and I can't seem to find a proper solution for it.

Here is part of my code:

         <li style="float: right;">Themes
            <ul>
             <?php
                $db=mysql_connect('localhost','root','');
                if(!$db) {
                    die('Could not connect: '.mysql_error());
                }
                $connection_string=mysql_select_db('somedb',$db);
                $selectSQL='SELECT * FROM color_patterns';       
                $queryset=mysql_query($selectSQL);
                $num=mysql_num_rows($queryset);
                if(0==$num) {
                    echo "No record";
                    exit;
                } else {
                    while($row=mysql_fetch_assoc($queryset)) {?>
                    <li onclick="liPosition()">
                        <?php echo($row['name']);?></li><?php
                    }
                }
            ?>  

            </ul>
        </li>

this is a list item that contains a drop down list. To populate the dropdown list I make a call to my database and for each row in the table I add an li element to the dropdown. I want to retrieve more information from the db based on which li the user clicks so I made a JS function that should get me the index of the li that's clicked on, (The li index corresponds to the id of another table I want to retrieve information from):

      <script>

        function liPosition() {
          var index = $(this).parent().children().index(this);
          alert("You clicked item " + index);
        });

        </script>

When I click on the li I get an error: Uncaught ReferenceError: liPosition is not defined after some research I found that I can't pass onclick listeners here but I don't know how to find the index of the li in the while loop otherwise. Is there a way to find the index of an li element in a list that's been generated with a while loop? Any help would be greatly appreciated, Thank you.

Please [stop using `mysql_*` functions](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php). [These extensions](http://php.net/manual/en/migration70.removed-exts-sapis.php) have been removed in PHP 7. Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [PDO](http://php.net/manual/en/pdo.prepared-statements.php) and [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php) and consider using PDO, [it's really pretty easy](http://jayblanchard.net/demystifying_php_pdo.html). — Jay Blanchard, Jun 15 '16 at 16:02

Jeff Puckett · Answer 1 · 2016-06-15T16:09:44.183

you can send the this reference as a parameter to the function.

<li onclick="liPosition(this)">

and then add the parameter to your function.

<script>

    function liPosition(listitem) {
      var index = $(listitem).parent().children().index(listitem);
      alert("You clicked item " + index);
    };

</script>

FYI, you also have a small typo with an extra ) at the end of your function definition });

<script   src="http://code.jquery.com/jquery-3.0.0.min.js"   integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="   crossorigin="anonymous"></script> 

<li onclick="liPosition(this)">item 1</li>
<li onclick="liPosition(this)">item 2</li>

<script>

    function liPosition(listitem) {
      var index = $(listitem).parent().children().index(listitem);
      alert("You clicked item " + index);
    };

</script>

score 0 · Accepted Answer · edited May 23 '17 at 12:32

0

Why not remove the inline JavaScript and go full jQuery?

PHP - use a class to identify the clicked item;

while($row=mysql_fetch_assoc($queryset)) {?>
    <li class="list_item">
    <?php echo($row['name']);?></li><?php
}

jQuery - The selector is the list item's class;

<script>

$(document).on('click', '.list_item', function() {
    var index = $(this).id;
    alert("You clicked item " + index);
});

</script>

In addition: please stop using mysql_* functions. These extensions have been removed in PHP 7. Learn about prepared statements for PDO and MySQLi and consider using PDO, it's really pretty easy.

edited May 23 '17 at 12:32

Community

1
1

answered Jun 15 '16 at 16:09

Jay Blanchard

34,243
16
77
119

Yeah, I just came back to say I figured it out and this was how i did it. I did something along the lines of $('ul li ul li').on('click', function(){...}; and it worked out but assigning a class to the li is a smarter solution. Thank you! – H.H. Jun 15 '16 at 16:18
Just out of curiosity, Is there a way to achieve this with just JS that would also be similarly compact? – H.H. Jun 15 '16 at 16:19
Yes @H.H., you could do it with JS alone. It would take a tiny bit more code, but it could certainly be done. – Jay Blanchard Jun 15 '16 at 17:17

Uncaught Reference Error and JS functionality

2 Answers2