I got a modal like that. Now i want to add Kartik's Popover X to the injected form.
<div class="ensemble-form-add">
<?php
$content = '<p class="text-justify">sometext</p>';
echo PopoverX::widget([
'id' => 'ownShit',
'header' => 'Usage Information',
'size' => PopoverX::SIZE_LARGE,
'placement' => PopoverX::ALIGN_BOTTOM,
'content' => $content,
'toggleButton' => ['label'=>'<span class="glyphicon glyphicon-question-sign"></span>', 'class'=>'btn btn-lg btn-link'],
]); ?>
<?php $form = ActiveForm::begin(['id' => 'add ...
...
The popover button and dialog (hidden) is rendered correctly. But hitting the button within the modal doesn't do anything. If i open up the above form alone (not in modal) the button works and displays the dialog.
Has anyone tried this before? Do i have to set id's to get this working?
Finally i got it working. I used the code from this link :
public static function renderLabelHelp($label, $help) {
return Html::tag('label', $label, [
'data-toggle'=>'popover',
'data-trigger' => 'click hover',
'data-placement' => 'auto right',
'data-html' => 'true', // allow html tags
// 'data-title'=> 'Help',
'data-content'=>$help,
'style'=>'border-bottom: 1px dashed #888; cursor:help;'
]);
}
And added the following js to make it work like a charm!
$(function(){
// this will show the popover within a modal window
$('#modal').on('shown.bs.modal', function(){
$('[data-toggle="popover"]').popover();
});
});
Related
I am having a problem with modal window loading on staging server. Where my modal windows load on localhost (Apache) they fail to load content on staging (LiteSpeed). What is strange is that the modal opens and shows header, but no content. I get 503 error when I inspect elements.
Staging also doesn't load favicon. I suppose the problem is somewhere in configuration, but as I am just starting with Yii2, I don't know where to look anymore.
I have created the modal functionality as follows:
modal.js in web/js/modal.js
$(function(){
$(document).on('click', '.showModalButton', function(){
if ($('#modal').data('bs.modal').isShown) {
$('#modal').find('#modalContent')
.load($(this).attr('value'));
//dynamically set the header for the modal
document.getElementById('modalHeader').innerHTML = '<button type="button" class="close" ' +
'data-dismiss="modal" aria-label="Close">' +
'<span aria-hidden="true">×</span>' +
'</button> ' +
'<h4>' + $(this).attr('title') + '</h4>';
} else {
$('#modal').modal('show')
.find('#modalContent')
.load($(this).attr('value'));
//dynamically set the header for the modal
document.getElementById('modalHeader').innerHTML = '<button type="button" class="close" ' +
'data-dismiss="modal" aria-label="Close">' +
'<span aria-hidden="true">×</span>' +
'</button> ' +
'<h4>' + $(this).attr('title') + '</h4>';
}
});
});
Layout set in views/layouts/main.php (excerpt)
</footer>
<?php
Modal::begin([
'headerOptions' => [
'id' => 'modalHeader',
],
//'footer' => 'Close',
'id' => 'modal',
'size' => 'modal-lg',
//keeps from closing modal with esc key or by clicking out of the modal.
// user must click cancel or X to close
'clientOptions' => [
'backdrop' => 'static',
'keyboard' => false
],
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>
<?php $this->endBody() ?>
View for index action (excerpt)
<p>
<?= Html::a('Create FAQ',
false,
[
'class' => 'showModalButton btn btn-success',
'value' => '/index.html?r=faq/create',
'title' => 'Create FAQ',
]) ?>
</p>
When I press button modal opens,but doesn't load the form.
If I missed some important information, please ask if it can shed light to this issue.
The page loads all the assets and I get the 503 error only on staging server.
use yii\bootstrap\Modal;
in your Grid View
'panel' => [
'before' => Html::a('<i class="glyphicon glyphicon-plus">Open Modal</i>', ['#'], ['data-toggle' => 'modal', 'class' => 'btn btn-md btn-success', 'data-target' => '#showModal']),
'type' => GridView::TYPE_PRIMARY,
]
At the bottom add this
Modal::begin([
'id' => 'showModal',
'header' => '<center><h4 class="modal-title">Allocate Work </h4></center>',
'closeButton' => [
'label' => 'Close',
'class' => 'btn btn-danger btn-sm pull-right',
],
]);
echo Yii::$app->controller->renderPartial('allocation');
Modal::end();
How to display the form when I click on Gridview button?
Basically I want to populate one form which includes the drop down and submit button in it.
By clicking on button I want to populate the form in popup box.
'panel' => [
'type' => 'info',
'after' => Html::button('<i class="glyphicon glyphicon-plus"></i> Allocate', [ 'id' => 'modalButton', 'class' => 'btn btn-success'),
'showFooter' => false,
Used following code and resolved my issue.
$this->registerJs("$(function() {
$('#popupModal').click(function(e) {
e.preventDefault();
$('#modal').modal('show').find('.modal-content')
.load($(this).attr('href'));
});
});");
I want to pass a php variable to modal window , what i am doing is opening a modal window using this link , but i want to pass a variable to this link and get same variable in modal window , i try to to do this to append a text in some div but it return html that i am unable to get in query
echo CHtml::link(
'Set Recipe', '', array(
'class' => 'testclass',
'id' => $finalDate,
'data-toggle' => 'modal',
'data-target' => '#myModal',
'fahadVar' => $finalDate
));
and when i click this button i got modal window how to get variable set in button
Here is simple modal code of yiibooster
<div class="modal-body">
<p>One fine body...</p>
</div>
<div class="modal-footer">
<?php $this->widget(
'bootstrap.widgets.TbButton',
array(
'type' => 'primary',
'label' => 'Save changes',
'url' => '#',
'htmlOptions' => array('data-dismiss' => 'modal'),
)
); ?>
<?php $this->widget(
'bootstrap.widgets.TbButton',
array(
'label' => 'Close',
'url' => '#',
'htmlOptions' => array('data-dismiss' => 'modal'),
)
); ?>
</div>
<?php $this->endWidget(); ?>
thanks in advance
You should create a Widget.
Note: I copied below from another post. It works like charm.
First Create a new widget. Let say the name is CategoryWidget. Put this widget under components directory protected/components.
class CategoryWidget extends CWidget {
public function run() {
$models = Category::model()->findAll();
$this->render('category', array(
'models'=>$models
));
}
}
Then create a view for this widget. The file name is category.php. Put it under protected/components/views
category.php
<?php if($models != null): ?>
<ul>
<?php foreach($models as $model): ?>
<li><?php echo $model->name; ?></li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
Then call this widget from your main layout.
main.php
// your code ...
<?php $this->widget('CategoryWidget') ?>
I have a custom module, inside:
/Block/Adminhtml//Edit/Tab/Form.php
I am adding a bunch of fields which relate to fields in a table - all works fine and dandy.
However, I have a button on the page which executes some JavaScript, like so:
$fieldset->addField('trigger', 'submit', array(
'name' => 'trigger',
'label' => 'test',
'value' => Mage::helper('modulename')->__('Submit'),
'style' => 'width:100px;',
'onclick' => $this->getProductChooserURL(),
));
Now, for the life of me, I cannot set the value of that button - at the minute, it just shows as a blank html button - I'm just trying to get it to say something on it!
Someone else has had a similar problem here:
http://www.magentocommerce.com/boards/viewthread/283801/#t397177
But I can't make sense of the solution.
Hello if you want call javascript following code may be help you
$eventElemall=$fieldset->addField('trigger', 'submit', array(
'name' => 'trigger',
'label' => 'test',
'value' => Mage::helper('modulename')->__('Submit'),
'style' => 'width:100px;',
'onclick' => "getProductChooserURL()",
));
$eventElemall->setAfterElementHtml('
<script type="text/javascript">
function getProductChooserURL(){
document.getElementById("trigger").value }
</script>');
I want an alert that pops when user tries to click "add to favorite"
1) if there's no checkboxes checked.
2) I also want to know how to get the values of the checked boxes here's my current code on backend
<?php $this->widget('zii.widgets.grid.CGridView',array(
'id' => 'wsrecruitcvhead-grid',
'dataProvider' => $model->search(),
#'filter' => $model,
'columns' => array(
array(
'name' =>'',
'value' => 'CHtml::checkBox("rid[]",null,array("value"=>$data->ResumeID,"id"=>"rid_".$data->ResumeID))',
'type'=>'raw',
'htmlOptions' => array('width'=>5),
'visible' => !Yii::app()->user->isGuest,
),
array(
'name' => 'ResumeTitle',
'value' =>$model->ResumeTitle,
),
'ResumeSummaryIntroduction',
'Name',
array(
'class' => 'CButtonColumn',
'viewButtonUrl' => 'Yii::app()->createUrl("wsrecruitcvhead/view",array("id"=>$data["ResumeID"]))',
'template'=>'{view}',
),
),
));
?>
and here's the screen shot http://pastebin.com/sEpJBCiU
I hope this helps you.
Your code works just fine, just tried it. I would implement the functionality you mentioned using jQuery, like this:
<script type="text/javascript">
$("input:checkbox").click(function () {
var thisCheck = $(this);
if (thisCheck.is (':checked')){
// do what you want here, the way to access the text is using the
// $(this) selector. The following code would output pop up message with
// the selected checkbox text
$(this).val());
}
});
</script>
This code selects all those DOM elements of type checkbox, and then checks with the if condition if it is selected or not. Here you can find more information about this jQuery selector. jQuery is such a powerful tool!!
For get all seleccions of a Grid yii provides the follow code
var seleccions = ($.fn.yiiGridView.getSelection('id_my_cgridview'));
this return an array with the values of checkboxes selected