Get KoolPHP UI with 30% OFF!

Grid Handle_OnRowSelect to ajax panel in bootstrap modal popup

Shaun
Hi Guys
I''m struggling to get this to work. I've gone over all the examples and I just cant get this right.
Im basically trying to click on a grid row then bring up a modal window with information relating to that row.
The information I need to fetch from the row is taken from a function called fetch_call_data(). If i fill in the post variable with a value I do get the info I expect so the function is working and if I view the row variable its correct.
What have I got wrong here ?
function Handle_OnRowSelect(sender, args) {
        
         var _row = args["Row"];
          //alert("Row is selected" + _row.getDataItem()["dst"]);
           $("#responsive").modal();
          panel_cdr.attachdata("dst",_row.getDataItem()["dst"]);
          panel_cdr.update;
      }

<?php echo KoolScripting::Start();?>
			 <updatepanel id="panel_cdr">
				  <content>
                                    <?php fetch_call_data($_POST["dst"],$cdrs); ?>                               
                                 </content>
                            <loading image="<?php echo $KoolControlsFolder;?>/KoolAjax/loading/5.gif"/>
			 </updatepanel>
 <?php echo KoolScripting::End();?>

Thanks
Shaun
Posted Sep 7, 2015 , edited Sep 7, 2015 Kool
Peter
You may try:
panel_cdr.update();
Posted Sep 7, 2015 Kool
Shaun
I do use
panel_cdr.update();
in the my OnHandle_onrorselect function
Posted Sep 8, 2015 Kool
Peter
I see in your pasted code is
panel_cdr.update;

It is needed to be function
Posted Sep 8, 2015 Kool
Shaun
lol, ya, sorry, a DOH moment ;).
but nope, it doesn't make a difference.
I also had a syntax error with
panel_cdr.attachdata

should be
panel_cdr.attachData

Just for sanitys sake if I wanted to see the value of the attachData in the panel could I just
<?php echo ($_POST["dst"]); ?>
in the updatepanels content field ?
panel_cdr.attachData("dst", _row.getDataItem()["dst"]);

<?php echo KoolScripting::Start();?>
			                               <updatepanel id="panel_cdr">
				                             <content>
                                                <?php echo ($_POST["dst"]); ?>
                                             </content>
                                               <loading image="<?php echo $KoolControlsFolder;?>/KoolAjax/loading/5.gif"/>
				                            </updatepanel>
		                                   <?php echo KoolScripting::End();?>

because I get nothing.
Posted Sep 8, 2015 , edited Sep 8, 2015 Kool
Peter
Could it be possible you for you to send us the page link? You may sent to support@koolphp.net if you want it to be secured.
Posted Sep 8, 2015 Kool
Shaun
I think im getting somewhere.
If i remove the updatepanel from within the modal html it works. Im going to play around a bit.
Posted Sep 8, 2015 Kool
Shaun
sigh.
I tried encapsulating the modal html into the koolscript but it breaks some jquery stuff on the page.
 <?php echo KoolScripting::Start();?>
			                               
                                                 <!-- Destination Number profile - Responsive Modal -->
							<div id="responsive" class="modal fade" tabindex="-1" data-width="760">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
									<h4 class="modal-title">Responsive</h4>
								</div>
								<div class="modal-body">
									<div class="row">
										<div class="col-md-6">
										 <updatepanel id="panel_cdr">
				                             <content>
                                                <?php fetch_call_data($_POST["dst"],$cdrs); ?>
                                                <?php echo ($_POST["dst"]); ?>
                                             </content>
                                               <loading image="<?php echo $KoolControlsFolder;?>/KoolAjax/loading/5.gif"/>
				                            </updatepanel>
										</div>
										<div class="col-md-6">
											<h4>Some More Input</h4>
											<p>
												<input class="form-control" type="text">
											</p>
											<p>
												<input class="form-control" type="text">
											</p>
											<p>
												<input class="form-control" type="text">
											</p>
											<p>
												<input class="form-control" type="text">
											</p>
											<p>
												<input class="form-control" type="text">
											</p>
											<p>
												<input class="form-control" type="text">
											</p>
											<p>
												<input class="form-control" type="text">
											</p>
										</div>
									</div>
								</div>
								<div class="modal-footer">
									<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
									<button type="button" class="btn blue">Save changes</button>
								</div>
							</div>
                  <!-- End Responsive Modal -->
                                                 
		                                   <?php echo KoolScripting::End();?>	

So it basically seems there is some issue with using koolajax in conjunction with this modal JS script. Below is the link.
my link
Posted Sep 8, 2015 , edited Sep 8, 2015 Kool
Shaun
DO you know of any modals which I can use with koolajax ?
Posted Sep 8, 2015 Kool
Shaun
Hi Pete
It works with the standard bootstrap modal.
dont try to use this fancy one ;)
http://jschr.github.io/bootstrap-modal/
Posted Sep 8, 2015 Kool
Shaun
Hi Pete
Just to let you know, the panel is working within the bootstrap modal but the <loading> field does not. Example of usage below ;)
 <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">  
                             <div class="dashboard-stat blue-madison">
						<div class="visual">
							<i class="fa fa-info-circle"></i>
						</div>
						<div class="details">
							<div class="number">
								 Destination Number Details
							</div>
						</div>		
				    </div>	          
        <div class="modal-body" style="padding:40px 50px;">
  <?php echo KoolScripting::Start();?>              
 <updatepanel id="panel_cdr">										
 <content>  				                             
 <?php $calldata = fetch_call_data($_POST["dst"],$cdrs); ?>                                                 
<div class="table-responsive">          
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Dialled Total</th>
        <th>Total Minutes</th>
        <th>Total Cost</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><?php echo ($calldata[0]);?></td>
        <td><?php echo ($calldata[1]);?></td>
        <td><?php echo ($calldata[2]);?></td>
        <td><?php echo ($calldata[3]);?></td>
      </tr>
    </tbody>
  </table>
  </div>
</content>
 <loading image="<?php echo $KoolControlsFolder;?>/KoolAjax/loading/5.gif"/>                                              
 </updatepanel>				                           
 <?php echo KoolScripting::End();?>                                                                                               
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
        </div>
      </div>              
	</div>
  </div>  
Posted Sep 8, 2015 , edited Sep 8, 2015 Kool
Shaun
Hi Pete
just so you know, i also tried using a bootstrap switch in the content field of the ajax panel and that also does not work.
http://www.bootstrap-switch.org/
Posted Sep 8, 2015 Kool
Peter
I will try to create a simple example to test
Posted Sep 8, 2015 Kool
Shaun
did you get a chance to test this Pete ?
Posted Sep 17, 2015 Kool