Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Send parameters from button to modal-ajax #32

Open
vkponomarev opened this issue Aug 12, 2020 · 3 comments
Open

Send parameters from button to modal-ajax #32

vkponomarev opened this issue Aug 12, 2020 · 3 comments

Comments

@vkponomarev
Copy link

Hello, i need to put one parameter from button to widget

data-video="fbnSR-KBOiE"

to 'param' => 42 like this 'param' => fbnSR-KBOiE

How can i do this?

echo ModalAjax::widget([
'id' => 'showVideo',
'header' => 'Create Company',
//'toggleButton' => [
// 'label' => 'New Company',
// 'class' => 'btn btn-primary pull-right'
//],
'url' => \yii\helpers\Url::toRoute(['youtube/index', 'param' => 42]), // Ajax view with form to load
'ajaxSubmit' => true, // Submit the contained form as ajax, true by default
// ... any other yii2 bootstrap modal option you need
]);

?>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#showVideo" data-video="fbnSR-KBOiE" data-backdrop="false">
show video

@vangogogo
Copy link

I have same scenario,do you have solution yet?

@vkponomarev
Copy link
Author

Hi, i did it with js and jquery:
you can look here how it done
https://flowlez.com/ru/albums/towards-thee-infinite-beat-113785/

<span data-url="rrJvkBP_mcQ" onclick="sYM(this)"></span>

<div class="modal fade" id="yM" data-backdrop="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<script>
    let youtubeModal = $('#yM').modal({'show': false});
    youtubeModal.on('show.bs.modal', function (event) {
        let button = $(event.relatedTarget);
        let url = button.data('url');
        $.ajax({
            url: '<?= \yii\helpers\Url::toRoute(['youtube/index'])?>',
            type: 'post',
            data: {url: url},
            success(response) {
                $('.modal-body').html(response);
            }
        });
    });
    function sYM(trigger) {
        youtubeModal.modal('show', $(trigger));
    }
</script>

class YoutubeController extends Controller
{


    public function actionIndex()
    {

        if(\Yii::$app->request->isAjax){

            $youtubeUrl = \Yii::$app->request->post('url');
            //$youtubeUrl = explode('=', $youtubeUrl);

            return $this->renderAjax('index', [
                'youtubeUrl'  => $youtubeUrl,
            ]);
        }

    }


}

    <script src="//www.youtube.com/player_api"></script>

    <iframe id="ytplayer" type="text/html" width="100%" height="100%"
            src="https://www.youtube.com/embed/<?=$youtubeUrl?>?autoplay=1&enablejsapi=1"
            frameborder="0" allow="autoplay" allowfullscreen></iframe>

@vangogogo
Copy link

this can works,but in this case we cann't use this package any more..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants