Php echo jQuery click issue

Question

I have this page with a button that is echoed in php. I also echo a jQuery script, to slideToggle an ul list element when a button is clicked. The problem here is that the jQuery javascript script is echoed at the same time when the button is echoed, and i can think of no way to delay it.

Code:

<?php
include_once('../php/connDb.php');
mysqli_set_charset($connect, 'utf8');
$query = mysqli_query($connect, "SELECT * FROM pages WHERE page_id = '".$page_id."'");
while($row = mysqli_fetch_assoc($query))
{
    echo '<h3>'.$row['text'].'</h3>';
}
$query = mysqli_query($connect, "SELECT * FROM menu");
echo '<div id="menuArea">';
while($row = mysqli_fetch_assoc($query))
{
    $menuName = $row['menuName'];
    $menuElements = $row['menuElements'];
    $menuElements = explode(", ", $menuElements);
    echo '
    <button id="'.$menuName.'"><h3 id="'.$menuName.'h3">'.$menuName.' &#X25BE;</h3></button>
        <ul id="'.$menuName.'S" class="menuCollapseSecond">
    ';
    foreach($menuElements as $menuElement)
    {
        echo '<li>'.$menuElement.'</li>';
    }
    echo '</ul>';
}
echo '</div>';
?>
</div>
<img id="sacImg" src="../images/sac.png">
<p>Copyright © Le Kerouac 2015</p>
</div>
<?php
$query = mysqli_query($connect, "SELECT * FROM menu");
while($row = mysqli_fetch_assoc($query))
{
    echo '
    <script type="text/javascript">
    $(document).ready(function() 
    {
        $("#'.$menuName.'").click(function()
        {
            $("'.$menuName.'S").slideToggle();
        });
    });
    </script>
    ';
}
mysqli_close($connect);
?>

I put document.ready to the script and also moved the script at the bottom of the page, but it didn't help

that's truly hideous code. why are you assigning a click handler by ID? if all of the menu items have the same click behavior, why not put a class on them and assign a click handler to the class instead? then you have only ONE click handler... — Marc B
– Marc B, Commented Jun 30, 2015 at 17:40
If i put them in a class, it would mean that i could click on the list and it would also toggle the action, because it would be in the same class. I want the action to only happen if i click on the button. — Jojo01
– Jojo01, Commented Jun 30, 2015 at 17:42
no. it's a tree of nodes. the clickt even tells you which node the click occurred on, and then you can "look around" at ancestor/sibling/descendent nodes to do other things. — Marc B
– Marc B, Commented Jun 30, 2015 at 17:43

KAD · Accepted Answer · 2015-06-30 17:44:36Z

1

First thing you need to add a # to the dynamically created ul id with S in the script part in order to catch the DOM object through the Id.

Second, use jquery 'on' function which binds the event to an element at anytime this element is created, so your code shall become as follows :

...
while($row = mysqli_fetch_assoc($query))
{
    echo '
    <script type="text/javascript">
    $(document).ready(function() 
    {
        $("#'.$menuName.'").on( "click", function() {
        {
            $("#'.$menuName.'S").slideToggle(); // adding # to catch element by Id
        });
    });
    </script>
    ';
}
....

answered Jun 30, 2015 at 17:44

KAD

11.2k4 gold badges34 silver badges75 bronze badges

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

4 Comments

Jojo01 Over a year ago

I missed that little detail, oops. I haven't slept much

KAD Over a year ago

programmers never sleep dude

KAD Over a year ago

another note, you are not setting $menuName = $row['menuName']; in second loop. Actually you don't really need to access the database twice and loop throught the menus, it can be done in first loop where you inject your js to a variable and then after the loop ends wrap the variables with the script tags and the document ready function.

Jojo01 Over a year ago

Yeah i put that at the bottom cause i thought the problem was that the button had not loaded when i bind the .click() function to It.

Collectives™ on Stack Overflow

Php echo jQuery click issue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related