how to dynamic change div content onclick of button with mysql variable

Question

I have a problem with some dynamic buttons, these buttons are generated by a while loop:

while($sub_row=mysqli_fetch_array($piano_query)){ 
    $piano=$sub_row['piano'];
    $prezzo_piano=$sub_row['prezzo'];
    $id_appartamenti=$sub_row['id_appartamenti'];

    echo '<button type="button" class="simple-text piano" id="'.$id_appartamenti.'">piano '.$piano.'<br></button>';

So now, I want that when I click on those buttons (the id is set from a variable) something changes in a div. So I used a JavaScript, and I've tried to insert a php echo for the ID but it doesn't work:

$(document).ready(function() {
    $("#<?php echo $id_appartamenti?> ").click(function() {
        document.getElementById("prezzo").innerHTML="<?php echo $prezzo_piano;?> €";
    });
})

and then something as to happen in the div with id=prezzo:

<div class="paragraph" id="prezzo">something has to happen here €</div>

You mention that "it doesn't work". What does it do then? Do you have any error in the browser console? Show us the rendered/client-side HTML/JS code! — sjahan
– sjahan, Commented Jul 4, 2018 at 12:40
You should do this with data attributes and class handlers, instead of making a js click handler for every id element dynamically. — IncredibleHat
– IncredibleHat, Commented Jul 4, 2018 at 12:42
You're setting the ID from the $prezzo_piano variable, but you're adding the event listener on the ID from $id_appartamenti and in it, you replace the text in the button to the value of $prezzo_piano? That seems... odd. However, I would recommend you to do it as @IncredibleHat suggests. No need for separate event handlers for each button. — M. Eriksson
– M. Eriksson, Commented Jul 4, 2018 at 12:42
yes, there was an error, i want to recall the ID=id_appartamenti and the event listener is the same... — Stefano Zanetti
– Stefano Zanetti, Commented Jul 4, 2018 at 13:04
hi @IncredibleHat, how can i do that? sorry, but i've just started with php and js — Stefano Zanetti
– Stefano Zanetti, Commented Jul 4, 2018 at 13:16

IncredibleHat · Accepted Answer · 2018-07-04 14:18:32Z

An example of how to use data attributes and class for a single event handler that controls them all (you can remove the linebreaks in the echo... I put them in for stackoverflow easier reading):

while($sub_row=mysqli_fetch_array($piano_query)) {
    echo '<button type="button" 
           class="event-hook-class simple-text piano" 
           id="'. $sub_row['id_appartamenti'] .'" 
           data-prezzo="'. htmlspecialchars($sub_row['prezzo'],ENT_QUOTES) .'" 
          >piano '. htmlspecialchars($sub_row['piano']) .'</button><br>';
}

echo '<div class="paragraph" id="prezzo">Placeholder €</div>';

Your script (only one block, not duplicated):

$(document).ready(function() {
    $(".event-hook-class").click(function(e) {
        e.preventDefault();
        $("#prezzo").html( $(this).data('prezzo') +' €' );
    });
});

Using the magical $(this) refers to only the button that was clicked at that time. Then you reference the data attribute with .data('prezzo'). That attribute contains an html safe value (since I was unsure what was exactly in that variable).

Collectives™ on Stack Overflow

how to dynamic change div content onclick of button with mysql variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related