Jquery Clear array when making new request

Question

Jquery Clear array when making new request

Asked 5 years, 5 months ago

Viewed 218 times

1

In the view I have a input select which event onchange I run a call on ajax for a given route that searches all items of a Model.

<select required onchange="getQuestions()" name="questionnaire_id" id="questionnaire_id" class="form-control">
                            <option value="">Selecione</option>
                            @if(count($questionnaires) > 0)
                                @foreach($questionnaires as $item)
                                    @if($item->id == $anamnese->quest_id)
                                        <option selected value="{{ $item->id }}">{{ $item->name }}</option>
                                    @else
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endif
                                @endforeach
                            @endif
                        </select>

function getQuestions(){
    $.ajax({
        type: "GET",
        data: {id: $('#questionnaire_id').val()},
        url: '/student-anamnese/questions/' + $('#questionnaire_id').val(),
        success: function(data){
            $.each(JSON.parse(data), function(i, item) {
                console.log(data);
                $("#col").append('<h3>Perguntas</h3>\
                <p class="text-success">' + item.name + '</p>\
                <input type="hidden" name="questionnaire_question_id[]" value="'+ item.id +'" />\
                <textarea required name="questionnaire_questions_answers[]" cols="80" placeholder="Digite a resposta aqui" rows="3" id="perguntas"></textarea>');
            });
        }
    })
}

In this ajax call, in Success, I rewrite some html elements on the screen. I need that when the user changes the option in select, these html elements are deleted and render the new elements.

$("#col").html('') can resolve, in case you wanted to delete all data from #col, but if you have more inside and want to delete only what has been added, you can give them a class... that would be the simplest way and then remove them: $('.nome_class').remove()

– edson alves

2019/01/23 at 11:37
jQuery has its own method for emptying elements: $("#col").empty();

– Sam

2019/01/23 at 12:07

1 answer

Browser other questions tagged jquery ajax laravel-5 laravel-blade

You are not signed in. Login or sign up in order to post.

by Diego Souza • **16,524** points · Answer 1 · 2019-01-23T11:37:19+00:00

Use the function beforeSend: function() before the success to carry out this action.

function getQuestions(){
    $.ajax({
        type: "GET",
        data: {id: $('#questionnaire_id').val()},
        url: '/student-anamnese/questions/' + $('#questionnaire_id').val(),
        beforeSend: function(){
            $("#col").html('');
        },
        success: function(data){
            $.each(JSON.parse(data), function(i, item) {
                console.log(data);
                $("#col").append('<h3>Perguntas</h3>\
                <p class="text-success">' + item.name + '</p>\
                <input type="hidden" name="questionnaire_question_id[]" value="'+ item.id +'" />\
                <textarea required name="questionnaire_questions_answers[]" cols="80" placeholder="Digite a resposta aqui" rows="3" id="perguntas"></textarea>');
            });
        }
    })
}