Pass variables from button to modal using Yii2 Ajax (Note: This is a

I have a button with a specific parameter and I need to pass this parameter to a widget. How can I achieve this?

Specific Parameter: data-video="fbnSR-KBOiE"

The goal is to pass the parameter as 'param' => 42, like this: 'param' => fbnSR-KBOiE

Any suggestions on how to accomplish 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
javascriptajaxyii2modal-dialog

Answer №1

The following code sends parameters from a button with data-url="watch?v=ik7ysDGWbcw" to a modal through the controller youtube/index using ajax.

<span id="play-button" class="fa fa-play-circle play-button" data-toggle="modal" data-target="#youtubeModal" data-url="watch?v=ik7ysDGWbcw" data-backdrop="false">
</span>

<div class="modal fade" id="youtubeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <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>
    $('#youtubeModal').on('show.bs.modal', function (event) {
        let button = $(event.relatedTarget) // Button that triggered the modal
        let youtubeUrl = button.data('url') // Extract info from data-* attributes

        $.ajax({
            url: '<?= \yii\helpers\Url::toRoute(['youtube/index'])?>',
            type: 'post',
            data: {youtubeUrl: youtubeUrl},
            success(response) {
                // Add response in Modal body
                $('.modal-body').html(response);
                //$('#exampleModal').html(response);
                // Display Modal
                //$('#exampleModal').modal('show');
            }
        });
    });
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular Universal 9 disrupts the functionality of Bootstrap CSS directives

My application runs perfectly fine with npm run start. However, when I try npm run build:ssr and npm run serve:ssr, it doesn't function properly without throwing any errors. While running npm run start, there's a button with 65% opacity. The des ...

javascripthtmlcssbootstrap-4angular-universal

Tips for handling a disabled button feature in Python Selenium automation

When trying to click this button: <button id="btn-login-5" type="button" class="m-1 btn btn-warning" disabled="">Update</button> I need to remove the disable attribute to make the button clickable. This ...

javascriptpythonseleniumwebdriverwaitdisable

Ruby on Rails allows for the selection of values in a dropdown menu to trigger the visibility of different sections of HTML

As a newcomer to Rails, I was able to successfully implement the onclick function for a f.checkbox element. Now, my challenge lies in achieving a similar functionality for a f.select element within a _form. Below is the code snippet that works for a chec ...

javascriptruby-on-railshtmlruby-on-rails-5

`Where can I locate a grid example?`

Right here: Upon reading the documentation, I discovered: onItemInserting has the following arguments: { grid // represents the grid instance item // item being inserted } In my software application there are multi ...

javascriptjsgrid

Tips for executing an Angular controller prior to DOM initialization

I have some code in my Angular controller that I want to run when the document is ready, but Angular currently runs it as the DOM is being created. While this does produce the correct output, it also generates console errors because initially the image src ...

javascriptangularjshtmldom

Extracting a floating picture from an Excel spreadsheet using ReactJS

Is it possible to extract an image from an Excel sheet that is not contained within a cell, but instead appears to be floating above the cells? The XLSX library only gathers cell information and does not provide a solution. Are there alternative methods su ...

javascriptreactjsexcelxlsximport-from-excel

Capturing attention within react-bootstrap drop-downs and pop-ups

Currently, I'm focused on enhancing accessibility features and I have a specific goal in mind: to confine the focus within a popover/dropdown whenever it is opened. Working with react-bootstrap, my inquiry revolves around finding out if there's ...

javascriptreactjsreact-bootstrap

"An issue with the colyseus server has been detected within the JavaScript code

I have written some code but it seems to be causing errors. const colyseus = require("colyseus"); const http = require("http"); const express = require("express"); const port = process.env.port || 3000; const app = express(); ...

javascriptexpresscolyseus

Guide to designing a personalized mesh in THREE.JS

I've inquired about this and received the following response: var geom = new THREE.Geometry(); var v1 = new THREE.Vector3(0,0,0); var v2 = new THREE.Vector3(0,500,0); var v3 = new THREE.Vector3(0,500,500); geom.vertices.push(new THREE.Vertex(v1)); ...

javascriptthree.js

Exploring Rotation Challenges in Photogrammetry Reference Cameras within a Three-Dimensional Environment Using THREE.JS and Reality Capture

Greetings to everyone who has taken the time to read through my post. I am hopeful that not only will this post be beneficial for me, but also for others who may come across it! A Brief Overview Currently, my focus is on a project involving point clouds c ...

javascripttypescriptthree.jspoint-cloudsphotogrammetry

Deactivate fields B and C unless input A is provided

http://jsfiddle.net/6Pu3E/ JavaScript Code: $(document).ready(function() { var block = false; if ($('#password').attr('disabled')) { block = false; } else { block = true; } if (block) { $(&a ...

javascriptjquery

Having difficulty locating any content within the return element in JSX

I'm relatively new to React and JSX and currently working on creating a button that, when clicked, should trigger a dialog box to appear. Within this dialog box, there should be a table with three columns: name, status, and exception error, all repres ...

javascriptreactjsnext.jsjsx

How can I prevent the arrow keys and space bar from causing my webpage to shift downwards?

I created a game where the arrow keys control movement and the space bar shoots, but every time I press the down key or space bar, it scrolls to the bottom of the web page. Is there a way to adjust the CSS so that it focuses on the game div tag without ...

javascripthtmlcss

Array vs Single Object - Comparing AngularJS / Javascript Data Structures (Basic)

My array is very basic [ { ticketId: 1, name: "John", }, { ticketId: 124, name: "Ads" } ] I have displayed the data in a dropdown menu <ul class="dropdown-menu"> <li ng-repeat="ticket in tickets"> <a h ...

javascriptangularjs

Unable to reset HighCharts Speedometer value to zero

I am currently experimenting with implementing the highcharts speedometer. The goal is to simulate a connection meter - when there is a good connection, the meter should display values between 30 and 100. If the connection result from an Ajax call is any ...

javascriptajaxhighchartsmeter

numerous conditional statements within a React.js component

Currently revamping my portfolio and encountered an interesting issue. This feature receives tasks (in array format) and sortBy parameter ('all', 'true', or 'false'). The challenge lies in despite passing the value 'all&a ...

javascriptreactjsif-statement

Unique Select Menu featuring list items with Font Awesome icons

Trying my hand at creating a customized select box to match my style. Everything seems to be going well, except for one issue - when I make a selection from the dropdown, the text displays but the icon remains hidden. As someone who is new to jQuery, I&apo ...

javascripthtmljquerycss

transferring attributes from a component iterated over to a component it renders

Admitting my lack of expertise, I am seeking assistance with the implementation of the following code. This is my "posts" component responsible for making an API call to fetch all post data: import React from 'react' import Post from '../pos ...

javascriptreactjsreact-propsreact-functional-component

How can I dynamically assign a random class to a new div using jQuery?

I have shared all of the code related to the object I am currently working on, but I believe that you only need assistance with the "create building in screen" part. My objective is to dynamically change the class name from something like class="House hou ...

javascriptjquery

Angular 7 features a table with multiple timers indicating the remaining time until expiration

I have a table with multiple rows where I need to display a timer showing the remaining time in days, hours, minutes, and seconds. After researching how to calculate the remaining time using this link, I found a solution that works well. I am calling the ...

javascriptangular7