I'm learning about Ajax and Symfony. Since I made a loop to show all rings from database, I would like to put checkbox on each ring and, want to show only selected ring on the top. So I'm trying to use Ajax so that I don't need to refresh the page. I simply put alert box to check whether it is working before making php controller, but seems it's not working

this is my twig file '''

    {% for ring in rings %}
<div >
    <div >
        <p>Ring Name: {{ ring.ring_name }}</p>
        <p>Ring Type: {{ ring.ring_type }}</p>
        <p>Ring Shape: {{ ring.ring_shape }}</p>
        <p>Ring Size: {{ ring.size }}</p>
        <p>Price: {{ ring.price }}</p>
        <input type="checkbox" id="select_ring" name="select_ring" value=ring.id  >
        
    </div>
    <br>
    <div >
        <a href="" >detail</a>
        <a href="{{ url('update_ring', {'id':ring.id}) }}" >Update Ring</a>
    </div>

</div>
{% endfor %}

'''

this is Ajax inside the twig '''

    $('#myCheckbox').click(function() {
var checked = $(this).is(':checked');

$.ajax({
    type: "POST",
    url: myUrl,
    data: { checked : checked },
    success: function(data) {
        alert('it worked');
    },
    error: function() {
        alert('it broke');
    },
    complete: function() {
        alert('it completed');
    }
});

}); '''

CodePudding user response：

What you want to do is just a front end manipulation, you don't need to use ajax for it.

Just define ID to your rings (based on ring id for exemple) and set all your rings as hidden at start.

Then in js/jquery (BTW forget about Jquery, it's lame), just set the selected element visible on click. Don't forget to put the others element to hidden every time you click on a ring, otherwise the previous rings will stay visible.