[solved] Submit button in active form not working after loading view detail via ajax

hi, how to debug a create button in a form? I have clicked the button but not responding.

first, when not filling the fields, and click the create button, it will validate the fields.
after filling the fields, and click the create button, it is not responding.

please help. thanks.

What is your debug toolbar displaying?

this is the debug toolbar. after click the create button, nothing happen.

I clarify my question. I have active form, i called a popup modal to show information (contain gridview) and select the row tobe loaded to the active form page. after loaded the information to active form page, the submit button won’t work/not responding.
Please advise me. thanks before.

this is the button i called the modal.

<?php $form = ActiveForm::begin(); ?>
            
            <?= $form->field($model, 'ref_id')->textInput(['maxlength' => true, 'readonly' => false]) ?>
            <div id="BtnSearchPengiriman">
                <?= Html::button('Search Pengiriman Produksi', [
                    'value' => Yii::$app->urlManager->createUrl('/pengiriman-produksi/list'),
                    'class' => 'btn btn-primary',
                    'id' => 'BtnModalPengiriman',
                    'data-toggle' => "modal",
                    'data-target' => "#modalPengiriman",
                ]) ?>
            </div>

this is the section which i loaded the information.

 <?php ActiveForm::end(); ?>
        </div>
        <div class="col-xs-6">
            <div id="view-pengiriman"></div>
        </div>
    </div>
    <?php
    Modal::begin([
        'header' => 'List Pengiriman Produksi',
        'id' => 'modalPengiriman',
        'size' => 'modal-lg',
        'class' => 'style=width:auto'
    ]);
    echo "<div id='modalContent'></div>";
    Modal::end();
    ?>

ajax function

$('#BtnModalPengiriman').click(function(e){    
    e.preventDefault();
    $('#modalPengiriman').modal('show')
        .find('#modalContent')
        .load($(this).attr('value'));  
    return false;
})

code that is loaded into modal and return view to active form

$(document).on('click', '.select-row', function(){
    // get id from custom button    
    var id = $(this).attr('data-id');

    $.get('../pengiriman-produksi/get-data', {id : id}, function(data){
        $('#penerimaanproduksi-ref_id').val(id);
        $('#view-pengiriman').html(data);
        $('#penerimaanproduksi-bruto').focus();
     });
     $('#modalPengiriman').modal('hide');
});

entire code

I have created sample code to try this case.
please advise. thanks

The pjax loads more html, which conflicts with the id from the form. The form has id w0 and some content from the pjax has same id.
Set the activeform id manually.

<?php $form = ActiveForm::begin([
    'id' => 'penerimaan-produksi-form-id'
]); ?>
2 Likes

@mathis you’re genius. thanks alot. :grinning:

1 Like