I have an h4 tag and a button. The button opens a modal with a GridView whose action column contains a button in order to select the row.
What I need the row button to do is closing the modal and populate the h4 tag with "Row 3 was selected", for instance. But I don't want the page to be reladed.
This is the parent page tag and button:
<h4>*</h4>
<?
echo Html::button('Explotación', [
'value' => Url::to('/explotaciones/seleccionar'),
'class' => 'btn btn-primary',
'id' => 'modalButton'
]);
Modal::begin([
'header' => 'Seleccionar Explotación',
'id' => 'modal',
'size' => 'modal-md'
]);
echo "<div id= 'modalContent'></div>";
Modal::end();
?>
The action column in the modal:
[
'class' => 'yii\grid\ActionColumn',
'template' => '{seleccionado}',
'buttons' => [
'seleccionado' => function ($url, $model) {
return Html::a('<span class="glyphicon glyphicon-chevron-right"></span>', '#', [
'id' => 'seleccionado_' . $model->exp_id,
'class' => 'seleccionado',
'data-fila' => $model->exp_id
]);
}
]
]
Registering the javascript in the modal:
<?
$assets_js = Yii::$app->assetManager->publish(__DIR__ . '/js');
$this->registerJsFile($assets_js[1] . '/seleccion.js', [
'depends' => [
'app\assets\AppAsset'
]
]);
?>
And the javascript itself:
(function($){
$(document).ready(function() {
$('.seleccionado').click(function(evento) {
var value = 'HELLO';
alert(value);
value = $(this).data("fila");
alert(value);
$('h4').html(value);
$('#modal').modal('hide');
});
});
})(jQuery);
The code prints the HELLO alert but it does not print the second one nor poupulates the h4 tag nor closes the modal.
Which is the right way to make this work?
Erasing the cache in order to reload javascript changes correctly did the trick. Thanks anyway.
Related
I've view page(index.php) in my Yii2 project, and I'm using Kartik gridView for showing the data
This the view from index.php:
On the right side of view, I've a checkbox column.
And I've an Export button.
I want to export the selected name (selected by checkbox) into name.txt file.
I've finally make the export function, but I don't know how to get the selected data from view into controller.
I've try suggestions that I got from many forums, for example:
I put this javascript code in my view index.php:
<script>
function getRows(){
var keys = $('#grid').yiiGridView('getSelectedRows');
$.post({
url: FakturOutController / exportAction,
dataType: 'json',
data: {keylist: keys},
success: function(data) {
alert('I did it! Processed checked rows.')
},
});
}
and set the export button like this:
<p>
<button type="button" onclick="getRows()" class="btn btn-success">Export</button>
</p>
But I got nothing, the button didn't showed any action/reaction when clicked.
This is the gridView code in index.php:
`<?php Pjax::begin(); ?>
<?=
GridView::widget([
'dataProvider' => $dataProvider,
'tableOptions' => ['class' => 'table table-hover'],
'columns' => [
['class' => 'yii\grid\SerialColumn',
'header' => 'No',
],
[
'label' => 'Name',
'value' => function($data) {
return $data->name;
}
],
['class' => '\kartik\grid\CheckboxColumn'],
],
'toolbar' => [
['content' =>
Html::a('<i class="glyphicon glyphicon-repeat"></i>', ['index'], ['data-pjax' => false, 'class' => 'btn btn-default', 'title' => 'Reset Grid'])
],
'{export}',
'{toggleData}'
],
'panel' => [
'heading' => '<i class="glyphicon glyphicon-align-left"></i> <b>Data</b>',
'before' => '', //IMPORTANT
],
]);
?>
<?php Pjax::end(); ?>
<?=
Html::a('<i class=" glyphicon glyphicon-export"></i> Export', ['export', 'userId' => $userId], ['class' => 'btn btn-success']);
?>`
Any help would be appreciated. Thanks
By inspect element on checkbox column you can find name of row ( checkbox name ). it contain id as value.
from that you can find how many rows are selected.
in my case i get 'selection[]' in checkbox name.
ex.
<input type="checkbox" class="kv-row-checkbox" name="selection[]" value="1">
i write jquery code to get selected rows below.
<script>
function getRows()
{
var strvalue = "";
$('input[name="selection[]"]:checked').each(function() {
if(strvalue!="")
strvalue = strvalue + ","+this.value;
else
strvalue = this.value;
});
// strvalue contain selected row by comma separated
$.post({
url: FakturOutController / exportAction,
dataType: 'json',
data: {keylist: keys},
success: function(data) {
alert('I did it! Processed checked rows.')
},
});
}
</script>
I am using Yii2 modal to update a form in modal window but I am unable to fetch the values to be already filled in the form.
In this screen-shot link below:
http://awesomescreenshot.com/0f957qq367
When I click on edit option, It takes me to the update form which is opened in a modal window. But this form shows empty values in all fields. I want to update the form.
Please find this in this screen-shot below:
http://awesomescreenshot.com/0f257qqscb
This is the snippet for what I have tried yet:
<?php
use yii\bootstrap\Nav;
use yii\bootstrap\Modal;
Modal::begin([
'id'=>'modalEdit',
//'header' => '<h2>Hello world</h2>',
'size'=> 'modal-lg',
//'toggleButton' => ['label' => 'click me'],
]);
$newmodel = new Backlog();
// $newmodel->id;
echo $this->render('/backlog/update', ['model' => $newmodel]);
Modal::end();
echo Nav::widget([
'options' => ['class' => 'nav-pills navbar-right'],
'encodeLabels' => false,
'items' => [
['label' => '', 'items' => [
['label' => '<span data-toggle="modal" data-target="#modalEdit" style="cursor: pointer;">Edit</span>','url' => 'javascript:void(0);'],
'<li class="divider"></li>',
['label' => '<span>Assign</span>', 'url' => ['#']],
'<li class="divider"></li>',
['label' => '<span>Convert To Backlog</span>', 'url' => ['#']],
'<li class="divider"></li>',
['label' => '<span>Close</span>', 'url' => ['#']],
]],
],
]);
if Backlog is an ActiveRecord Replace the Line with this.
$newmodel = Backlog::findOne(['ID'=>$id]);
Finally, I solved the problem using javascript and ajax loading :
$(document).on("click",".edit-backlog",function(e){
var back_l_id=$(this).attr("b-id");
var modal_body=$("#modalEdit").find(".modal-body");
$.ajax({
url:getAjaxUrl('backlog','update'),
data:{'id':back_l_id},
success:function(res){
//console.log(res);
modal_body.html(res);
}
});
});
I added a class .edit-backlog to span and get the id ("b-id") and used in the above script. Hope this answer helps others too.
For example here I want to change alert for a bootbox.alert(...
'delete' => function ($url, $model, $key) {
return Html::a('<span class="glyphicon glyphicon-trash"></span>', $url, [
'title' => Yii::t('yii', 'Delete'),
'class'=>'btn btn-primary',
'data-confirm' => Yii::t('yii', 'Are you sure you want to delete this item?'),
'data-method' => 'post',
'data-pjax' => '0',
]);
},
Just add a HTML class to the element, drop the "data-confirm" param and use a "click" event.
That way you can execute whatever you want when the link is clicked.
'delete' => function ($url, $model, $key) {
return Html::a('<span class="glyphicon glyphicon-trash"></span>', $url, [
'title' => Yii::t('yii', 'Delete'),
'class'=>'btn btn-primary delete-button',
'data-id' => $model->id, // For using when the button is clicked
]);
},
And inside your javascript file:
$(".delete-button").on("click",function(e){
e.preventDefault();
var modelId = $(this).data('id');
// Run bootbox.alert() here!!
// Based on the bootbox result, you can decide to fire the initial event again:
// $(this).unbind('submit').submit()
});
Hope it helps :)
Just assign a class name or id : "id"=>"btn-id"
Then override click event :
$("#btn-id").on("click",function(e){
e.preventDefault();
//Somethings and return here
}));
Link Overriding yii.js confirm --> bootbox.confirm.
Yii 2.0: Escape from Default's Yii2 Delete Confirm Box :
I have a several tables delivered via PHP loop to my page. At the end of each PHP loop an if statement is run (which is evaluating true) like this:
if ($ssstatus[0] == 'F'){
echo "<script>";
//echo "alert('We are in this loop');";
echo "flagfinished(".$gameID.");";
echo "</script>";
}
My flagfinished function is this:
function flagfinished(tableid){
//alert("Made it to the function!");
var myid = "table"+tableid;
//alert(myid);
var testel = document.getElementById(myid);
testel.setAttribute("border-style","solid");
};
I'm not sure why this isn't working. I can say that my id attribute on the table is properly set and matches the variable myid. I've even tried just putting in the text of a single id attribute instead of myid and still no luck. I've also manually added the "border-style" attribute to my css and it works. Maybe I am going about this in the wrong way entirely. Or maybe I am overlooking something obvious. I've been working on this for hours! Thanks for any ideas or help!
testel.style.borderStyle = "solid";
The border-style that you are trying to define is not an element attribute. The attribute would be style. And border-style would be a value of the style attribute.
So, in your line of thinking:
var testel = document.getElementById(myid);
testel.setAttribute("style", "border-style: solid");
But, Javascript DOM already takes care of the style attribute for you, so you can go:
var testel = document.getElementById(myid);
testel.style.bordeStyle = "solid";
Follows MDN HtmlElement.style docs
Why are u trying to call flagFinished with javascript anyway? You could do the same with php. Add a css class to the table before sending it to the browser ( echoing / printing out ) and then let css do it's magic? Then you wouldn't have to send all these extra tags to client, which makes the page load faster, and would be a better solution to use.
you could do something like:
<?php
$tables = [
['data' => [
['id' => 1, 'content' => 'sample content'],
['id' => 2, 'content' => 'sample content jabadabaduuu...'],
['id' => 3, 'content' => 'test 1123123123'],
['id' => 4, 'content' => 'sample content']
],
'status' => 'F'
],
['data' => [
['id' => 1, 'content' => 'sample content'],
['id' => 2, 'content' => 'sample content jabadabaduuu...'],
['id' => 3, 'content' => 'test 1123123123'],
['id' => 4, 'content' => 'sample content']
],
'status' => 'S'
],
['data' => [
['id' => 1, 'content' => 'sample content'],
['id' => 2, 'content' => 'sample content jabadabaduuu...'],
['id' => 3, 'content' => 'test 1123123123'],
['id' => 4, 'content' => 'sample content']
],
'status' => 'F'
]
];
foreach ($tables as $table) {
?>
<table id="<?= myUniqueTableIdGeneratorFunction() ?>"
class="<?= ($table['status']) == 'F' ? 'class-with-border' : null ?>" ><?php
foreach ($table['data'] as $row) {
?>
<tr>
<td><?= $row['id'] ?></td>
<td><?= $row['content'] ?></td>
</tr>
<?php
}
?></table><?php
}
?>
I havent test this, just wrote this from the top of my head quickly.
I have a
- button that opens a modal window, and
- jquery dynatree.
How can I pass variable from js (the id of the selected node in the tree) to modal in Yii?
//the modal window
$this->widget('bootstrap.widgets.TbModal', array(
'id' => 'createExercise',
'header' => 'Create..',
'content' => $this->renderPartial('_form', ['model'=>$model], 1),
'footer' => [
TbHtml::button('Save', ['onclick'=>'$("#exercise-form").submit()']),
],
));
//the button
TbHtml::button('Create', array(
'id' => '#btnCreate',
'data-toggle' => 'modal',
'data-target' => '#createExercise',
));
I get the ID of active node from tree with this code:
$("#yw0").dynatree("getActiveNode").data.id;
How can be passed this ID to the modal?
Thank you!
You can pass it from your button, using the onClick Attribute
modify the button to this
TbHtml::button('Create', array(
'id' => '#btnCreate',
'data-toggle' => 'modal',
'data-target' => '#createExercise',
'onClick'=>'js:PassToModal($("#yw0").dynatree("getActiveNode").data.id)',
));
In you js function you can do what you want with value, for example you want to populate the modal with some dynamic data depending on node value you can do this
<script type="text/javascript">
function PassToModal(id){
<?php echo CHtml::ajax(array(
'url'=>$this->createurl('getDetails'),
'type'=>'GET',
'dataType'=>'html',
'data'=>array('id'=>'js:id'),
'update'=>'#createExerciseBody'// Id of the Modal Body
)); ?>
}
</script>