javascript - How to render view only after selection in yii2

Question

I am rendering two views in my single view.

<?= $form->field($model, 't_type')->dropDownList([
    '' => 'Please Select', 'Slab Based' => 'Slab Based',
    'TOU Based' => 'TOU Based']) ?>

<div class="showSlab" id="slab" style="display: none">
    <?php echo $this->render('_slabBased', [
        'modelsTariffSlabs' => $modelsTariffSlabs,
    ]); ?>
</div>

<div class="showTou" id="tou" style="display: none">

    <?php echo $this->render('_touBased', [
        'modelsTouSlabs' => $modelsTouSlabs,
    ]); ?>
</div>

By default both div's are hidden but both of them are rendering. But I want to render the form only when I select option 'Slab Based' or TOU Based

JS

$('#mdctariff-t_type').on('change', function () {
    if (this.value === 'Slab Based') {
        $("#slab").show();
        $("#tou").hide();


    } else if (this.value === 'TOU Based') {
        $("#tou").show();
        $("#slab").hide();


    } else {
        $("#slab").hide();
        $("#tou").hide();

    }
});

Note: After rendering the form I am also saving it

Update 1

I have tried to render it via ajax

$url = Url::toRoute(['/mdctariff/_slabBased','modelsTariffSlabs'=>$modelsTariffSlabs]);

doGet('$url')

function doGet(url, params) {
        params = params || {};

        $.get(url, params, function(response) { // requesting url which in form
            $('#slab').html(response); // getting response and pushing to element with id #response
        });
    }

Reference: How to render partial using AJAX? Laravel 5.2

When I selects an option I am not able to view the form. In my Network tab I am getting error Not Found (#404): Page not found.. The URL generated is http://localhost/mdc/backend/web/mdctariff/_slabBased

While pasting this URL at my browser I am getting the same error. I must be missing something that I don't know

How can render my view only when I select an option?

Any help would be highly appreciated.

Answer 1

In your URL

$url = Url::toRoute(['/mdctariff/_slabBased','modelsTariffSlabs'=>$modelsTariffSlabs]);

The first argument should be the proper existing route. But you have written it in the form of a directory, i.e. mdctafiff folder then _slabBased file.

What you need to do here is, you need to create an action method in the controller so that you can access it through route. Like MdctariffController and partialAction and then in the body of partialAction method you need to call the _slabBased view file. Futher you can also take reference here for Url::toRoute().