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
Martin
You can get the best cloud computing consulting services just follow the link. You can choose a direction from Oracle and IBEM to Google Cloud and Salesforce, consultants will help you choose the best solution, as well as the best professionals in their field who will meet all the necessary skills.
Posted Apr 18, 2023 , edited Apr 18, 2023 Kool
June
Outsourcing IT support service is a game-changer for businesses looking to improve their technical support services. By utilizing remote support, enterprises can increase productivity while achieving greater customer satisfaction. This is made possible by the availability of domain specialists and professionals who are well-equipped to handle Level 1, Level 2, and Level 3 tech support issues. >>> explanation
Posted Apr 21, 2023 Kool
Melissa
As a business owner or startup founder, finding quality staff can be a daunting task. The process is often challenging and expensive, and hiring the wrong person can be detrimental to your business. Fortunately, there is a solution. An excellent support service is available to assist with effective recruitment and staffing of a group of skilled professionals online. You will have the ability to shape the team to fit your needs, as all of your requirements will be taken into account, more information here.
Posted Apr 22, 2023 , edited Apr 22, 2023 Kool