Yii2 populating dropdownlist using pjax - yii2-advanced-app

Question

I already updated my question here. The pjax is working now and reloading the specific container but the modal doesn't close. I don't have any idea what is the problem. Can someone help me?
modal.php
$this->registerJs(
'jQuery(document).ready(function($){
$(document).ready(function () {
$("body").on("beforeSubmit", "form#form-person", function () {
var form = $(this);
if (form.find(".has-error").length)
{
return false;
}
$.ajax({
url : form.attr("action"),
type : "post",
data : form.serialize(),
success: function (response)
{
$("#modalOfficials").modal("toggle");
$.pjax.reload({container:"#for_from"}); //for pjax update
},
error : function ()
{
console.log("internal server error");
}
});
return false;
});
});
});');
?>
<div class="name-form">
<?php yii\widgets\Pjax::begin(['id' => 'sign-up']) ?>
<?php $form = ActiveForm::begin(['id' => 'form-person', 'options' => ['data-pjax' => true]]); ?>
<?= $form->field($model, 'position')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'fname')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'mname')->textInput(['maxlength' => true]) ?>
<?= $form->field($model, 'lname')->textInput(['maxlength' => true]) ?>
<div class="form-group">
<?= Html::submitButton($model->isNewRecord ? 'Add' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary', 'style' => 'width: 100%; padding: 10px 30px;']) ?>
</div>
<?php ActiveForm::end(); ?>
<?php yii\widgets\Pjax::end() ?>

Answer 1

I already solved my own question! The codes are correct. There is no problem in the codes. However, it doesn't working because of the conflicts of the two jquery libraries. Can someone give me an idea on how to solve it?

Answer 2

You do not need pjax if you are going to use jquery to run an ajax jquery. Just have it update the select element on success.
success: function (response)
{
var myOptions = response.data
$.each(myOptions, function(val, text) {
$('#select').append(
$('<option></option>').val(val).html(text)
);
});
}