Yii2 : Sending data to same page not working properly

debugcn Published at Dev

Tushar Walzade

I'm using Yii2-advanced-app. I want to send the value of my selected dropdown to a php code(which shows list with checkboxes) on same page. Please see the following image for reference (That's how I want actually)-

But, after selecting some element from dropdown list, I'm getting the result, but with whole html page in that specific portion. Here is the Snap for reference -

I don't understand why I'm getting the whole page in response.

I've wrote the following code for that -

Dropdown List

<?= $form->field($countries[0], 'id')->dropDownList(
    ArrayHelper::map($countries, 'phonecode', 'name'),
    [
    'prompt' => 'Select Country',
    'onchange' => '
    var id;
    jQuery.ajax({
        type: "POST",
        data: {
            "id": $(this).val(), 
        },
        // url: "",
        success: function(data){
            jQuery(".tobechanged").html(data);
            alert(data);
        }
    });'
    ])->label(false);
    ?>

And my respective div is

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 tobechanged" style="max-height: 400px; background: white; overflow: auto;">
    <ul class="list-unstyled" id="chkall">
        <?php
        if(isset($contacts)) {
            $contacts = $contacts;
                            // print_r($contacts[0]['cust_country_code']);exit();
            foreach ($contacts as $contact) {
                if(isset($_POST['id'])) {
                    if($contact['cust_country_code'] == $_POST['id']) {
                        echo '<li>
                        <div class="checkbox" id="checkboxes">
                            <label><input type="checkbox" value="'.$contact['cust_id'].'" id="'.$contact['cust_id'].'">'.$contact['cust_fname'].' '.$contact['cust_lname'].'</label>
                        </div>
                    </li>';
                }
            } else {
                echo '<li>
                <div class="checkbox" id="checkboxes">
                    <label><input type="checkbox" value="'.$contact['cust_id'].'" id="'.$contact['cust_id'].'">'.$contact['cust_fname'].' '.$contact['cust_lname'].'</label>
                </div>
            </li>';
        }
    }
}
?>
</ul>
</div>

It doesn't work even when we display 'Hello' instead of checkboxes code. i.e like this-

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 tobechanged" style="max-height: 400px; background: white; overflow: auto;">
    Hello
</div>

So, please help me to avoid unwanted html.

I'm getting the Response like this

Tushar Walzade

I've made it in the following way -

Dropdown -

<?= $form->field($countries[0], 'phonecode')->dropDownList(
    ArrayHelper::map($countries, 'phonecode', 'name'),
    [
    'prompt' => 'Select Country',
    'onchange' => '
    dataType : "json",
    $.post("index.php?r=messages/contactist&id="+$(this).val(), function(response) {
        jQuery(".tobechanged").html(response);
    });'
    ])->label(false);
    ?>

The div 'tobechanged' remain same. It's also okay to make it empty, like this -

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 tobechanged">***Nothing Here***</div>

Then, I've shown my checklist in 'contactist' method as follows -

public function actionContactist($id)
{
    $model = new Messages();
    $query = new \yii\db\Query;
    $query->select(['cust_id','cust_fname','cust_lname','cust_mobile'])->from('customers')->where(['cust_country_code' => $id])->orderBy('cust_fname');
    $query->createCommand();

    $contactList = new ActiveDataProvider([
    'query' => $query,
    'pagination' => false,
    ]);
    $contacts = $contactList->getModels();
    // print_r(json_encode($contacts));
    echo '<ul class="list-unstyled" id="chkall">';
    foreach ($contacts as $contact) {
    echo '<li>
    <div class="checkbox" id="checkboxes">
        <label><input type="checkbox" class="case" name="case" value="'.$contact['cust_id'].'" id="'.$contact['cust_id'].'">'.$contact['cust_fname'].' '.$contact['cust_lname'].'</label>
        <input type="hidden" value="'.$contact['cust_mobile'].'" id="'.$contact['cust_id'].'">
    </div>
</li>';
}
echo '</ul>';
}

That's it.

Collected from the Internet

Please contact [email protected] to delete if infringement.