0

I am using yii2 framework, I want to clone a form input with SelectMapLocationWidget when the user clicks on add button.

<div id="branches-div">
    <?php foreach ($branches as $i => $branch): ?>
        <div class="item panel panel-default"><!-- widgetBody -->
           <div class="panel-heading">
                <div class="pull-right">
                   <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
                    <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="panel-body">
                <?php
                        // necessary for update action.
                    if (! $branch->isNewRecord) {
                        echo Html::activeHiddenInput($branch, "[{$i}]id");
                    }
                ?>
                <div class="row">
                    <?= 
                    $form->field($branch, "[{$i}]name")->widget(\kalyabin\maplocation\SelectMapLocationWidget::className(), [
                    'attributeLatitude' => "[{$i}]latitude",
                    'attributeLongitude' => "[{$i}]longitude",
                        'googleMapApiKey' => 'MY_KEY',
                        'draggable' => true,
                        ]); ?>

                </div><!-- .row -->
            </div><!-- panel-body -->
        </div>
    <?php endforeach; ?>
</div> 

to clone the input I wrote JS

<?php

$clone_map = "
// branch-0-latitude branch-0-longitude branch-0-name  --> id / for
// Branch[0][longitude]  --> name
$( '.add-item' ).on('click',function() {
    var clonedDiv = $('#branches-div .item').clone(true);
    clonedDiv.removeClass('item');
    //change index of name and coordinates
    counter= ($('.panel')).length;
    clonedDiv.find('[id*=\'branch-0-\']').each(function() {
        var id = $(this).attr('id');
        id = id.replace('0', counter);
        $(this).attr('id',id);
    });
    clonedDiv.find('label[for*=\'branch-0-\']').each(function() {
        var html_for = $(this).attr('for');
        html_for = html_for.replace('0', counter);
        $(this).attr('for',html_for);
    });
    clonedDiv.find('[name*=\'Branch[0]\']').each(function() {
        var name = $(this).attr('name');
        name = name.replace('0', counter);
        $(this).attr('name',name);
    });
    clonedDiv.appendTo('#branches-div')
});";

$this->registerJs($clone_map, yii\web\View::POS_END);
?>

the problem is that the clones are not working (google maps) they are just a copy of the values of the first input. I cannot move the marker or search for place. how can I solve this issue.

Zainab
  • 15
  • 6
  • I've removed your API key from your question. Please don't share private API keys on public sites, and make sure you restrict them as per https://developers.google.com/maps/api-key-best-practices#restrict_apikey – evan Feb 12 '20 at 17:22
  • Does this answer your question? [jQuery clone() not cloning event bindings, even with on()](https://stackoverflow.com/questions/9549643/jquery-clone-not-cloning-event-bindings-even-with-on) – Muhammad Omer Aslam Feb 12 '20 at 18:32
  • @MuhammadOmerAslam no – Zainab Feb 13 '20 at 05:28

0 Answers0