I need to move on to the next element. My code shows 3 different cards and put the option in ddbb, but when click on the option I need to pass the 'screen-view' to the next card when sucess is ok. I tried .next('.card').toggle() and .show() but don't work, any advice?
My template:
{% for standard in standards %}
<div class="card mx-auto mt-4 card-standard" style="width: 95%;" data-aos="fade-up">
...
</div>
{% endfor %}
<script type="text/javascript">
AOS.init({
duration: 1200,
})
$(document).on('click', '.alternative', function () {
const $this = $(this)
const alternative_pk = $this.data('alternative-pk');
console.log(alternative_pk)
const url = $('.tabla-standard').data('alternative-url');
$.ajax({
...
success: function (json) {
if (json.success) {
console.log("ok")
}
}
});
$('.card-standard').next().show();
})
</script>
If anyone knows how to solve this please comment
I see a few things here that are going to cause you problems with what you're trying to do.
First, your call to $('.card-standard').next().show(); is not happening when success is okay, but instead it happens immediately after the AJAX call begins. With JavaScript, functions are run to completion, before any nested callbacks occur. If you want to switch cards on success (when your success callback executes), you need to switch at the same time you say console.log("ok").
Second, you're going to get some strange results from $('.card-standard').next().show();, because you seem to expect it to find a single element, but that is going to find all elements with class .card-standard. Then for each one, it will go to the next and show it. That means it will show every card except the first, which it leaves untouched.
Third, at no point do you hide the current card. I don't know what your UI looks like, but if only one card should be on screen at a time, shouldn't you hide it in here, too?
Maybe you should put in your success handler something like this:
$this.parent("card").hide();
$this.parent("card').next().show();