Passing data from gridview button to modal window - php

Question

I am trying to pass data from a button within a gridview to a modal window. I need to pass the ID of the record in order to be able to reference it after submitting the form within the modal window.
I am struggling with this quite a bit. First I need to be able to pass the ID variable to the modal, and then upon clicking the submit button make an ajax call to create a new record within the DB.
The Gridview
if(isset($results)){
$this->widget('bootstrap.widgets.TbExtendedGridView', array(
'id'=>'searchgrid',
'fixedHeader' => true,
'headerOffset' => 40, // 40px is the height of the main navigation at bootstrap
'type'=>'condensed',
'dataProvider'=>$results,
'responsiveTable' => true,
'template'=>"{items}",
'columns'=>array(
array('name'=>'title', 'header'=>'Name'),
array('name'=>'city', 'header'=>'City'),
array('name'=>'state', 'header'=>'State'),
array('name'=>'leads', 'header'=>'Leads', 'value'=>'Parkslist::model()->leadRange($data["leads"])'),
array('name'=>'pastbid', 'header'=>'Previous', 'value'=>'Parkslist::model()->pastBid($data["pasthighbid"])'),
array('name'=>'currentbid', 'header'=>'Current', 'value'=>'Parkslist::model()->highBid($data["currenthighbid"], $data["secondhighbid"], $data["countcurrenthighbid"])'),
array('name'=>'minimumbid', 'header'=>'Minimum', 'value'=>'Parkslist::model()->minimumBid($data["currenthighbid"], $data["secondhighbid"], $data["countcurrenthighbid"])'),
array('name'=>'userhighbid', 'header'=>'Your Bid'),
array('name'=>'placebid', 'header'=>'Bid', 'value'=>'CHtml::textField("bid" . $data["id"])', 'type'=>'raw'),
array('name'=>'report', 'header'=>'Report',
'value'=>function($data){
$this->widget('bootstrap.widgets.TbButton', array(
'label' => 'Click me',
'type' => 'primary',
'htmlOptions' => array(
'data-toggle' => 'modal',
'data-target' => '#myModal',
'data-id' => '$data["id"]',
),
));
}
),
),
));
}
The Modal
<?php
$this->beginWidget('bootstrap.widgets.TbModal', array('id' => 'myModal')); ?>
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4>Why should this park be removed?</h4>
</div>
<form>
<div class="modal-body">
<select>
<option>Duplicate</option>
<option>Closed</option>
</select>
</div>
<div class="modal-footer">
<?php $this->widget('bootstrap.widgets.TbButton', array(
'type' => 'primary',
'buttonType'=>'submit',
'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>
</form>
<?php $this->endWidget(); ?>

Answer 1

I was able to get this working. I would assume there might be a better solution but this seems to work.
First, inside of the button in the gridview I made the button ID = to the id of the record. Next, I created a javascript function called includeData and included the button ID.
Button Code
array('name'=>'report', 'header'=>'Report',
'value'=>function($data){
$this->widget('bootstrap.widgets.TbButton', array(
'label' => 'Click me',
'type' => 'primary',
'htmlOptions' => array(
'id'=>$data["id"],
'data-toggle' => 'modal',
'data-target' => '#myModal',
'data-id' => '$data["id"]',
'onClick' => 'includeData(this.id);'
),
));
}
),
JS Code
<script type='text/javascript'>
function includeData(parkid){
$('#reportparkid').val(parkid);
}
</script>
The JS function just sets the value of a hidden field equal to the buttonid. I would love to see some better ways to handle this.
Thanks