尽管自动刷新页面，但单击时仍隐藏跨度

Question

html (quotazioni.php)

<?php 
    $azioni = $db_handle->runQuery("SELECT idAzione,nome,prezzo FROM azioni");
    foreach($azioni as $azione){
?>          

                        <tr>
                            <td style="text-align:center;border-bottom:#F0F0F0 1px solid;"><a href="azione.php?idAzione=<?=$azione["idAzione"]?>"><?php echo $azione["nome"]; ?></a></td>
                            <td style="text-align:center;border-bottom:#F0F0F0 1px solid;"><?php echo $azione["prezzo"]; ?></td>
                            <td style="text-align:center;border-bottom:#F0F0F0 1px solid;">
                                <a href="compraVendi.php?action=segui&idAzione=<?=$azione["idAzione"]?>" id="<?=$azione["nome"]?>" style="text-decoration:none;" class="preferiti" >
                                    <span style="color:yellow;font-size:200%;" id="<?=$azione["idAzione"]?>" >&star;</span>
                                </a>
                            </td>
                        </tr>
<?php 
    }
?>

php (compraVendi.php)

case "segui":
            $db_handle->query("INSERT INTO preferiti (visibile,idAzione) VALUES (1,'".$_GET["idAzione"]."')");  
            header("location: quotazioni.php");
            break;

javascript

    $(document).ready(function(){
    <?php
        $preferiti = $db_handle->runQuery("SELECT * FROM preferiti");
        foreach($preferiti as $preferito){
            if ($preferito["visibile"]==1){ 
    ?>          
            var element = document.getElementById(<?=$preferito["idAzione"]?>);
            element.hide();
    <?php
            }
        }
    ?>
});

I must hide the span inside the link after I click on it. How do I keep the span disabled considering the page contains an automatic refresh? I provide an example of code which not work, please help me to solve the problem. In the sql database, the table preferiti contains idPreferito,visibile and idAzione. The row preferito contains 1 if i clicked on the respective prefer.

Answer 1

When user clicks on the the star - you need to save this data to a persistent storage, e,g your backend. This is the only way you will be able to regain this state after page refresh.

So when serving the page to the client, you will consider another field, for example 'disabled' which contains string 'disabled'

It could be something like this:

<a href="#" id="<?=$azione["nome"]?>" class="preferiti" >
    <span class="favourites-star <?=$azione["disabled"]?>" id="<?=$azione["idAzione"]?>" >&star;</span>
</a>

Consider not using insline styles and instead using classes for styling - this is a general good practice.

.favourites-star {
    color:yellow;
    font-size:200%;
}

Classes are also better when dealing with events.

$(document).ready(function(){
    $('.prefereti').on('click', function(evt){
        // Save the state first and then disable the star - try it yourself!
        $.post()
            .done(function () {
                 $(evt.currentTarget).addClass('disable');
            })
            .fail(function () {
                 // Don't disable - instead show error
            });
    });
});

One more thing that you need to keep in mind while the state is being saved, your page might reload - so you might like to prohibit it from reloading for that time.