modal en cake

446 views
Skip to first unread message

shanita

unread,
Mar 26, 2014, 12:29:41 PM3/26/14
to cakep...@googlegroups.com
Hola a todos.

Necesito de su ayuda.

Resulta que estoy tratando de implementar un modal en mi proyecto.  Estoy usando en mi plantilla bootstrap.
Tengo el siguiente codigo en el ejemplo que tengo de modal html:

<!-- VENTANA MODAL -->
<button class="btn btn-info" data-toggle="modal" data-target="#myModal">VENTANA MODAL</button>
        <!-- Modal Crear formulario -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                     </div>
                     <div class="modal-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                        <div class="form-group">
                           <label>Comentarios</label>
                           <textarea class="form-control" rows="3"></textarea>
                        </div>
<!--MULTISELECT-->
                        <div class="form-group">
                        <label>Sede de despacho</label>
                   <br />
                   <select id="example09" multiple="multiple">
                 <option value="lab">Lab Course</option>
                 <option value="proseminar">Proseminar</option>
                <optgroup label="Mathematics">
                 <option value="analysis">Analysis</option>
                 <option value="algebra">Linear Algebra</option>
                 <option value="discrete">Discrete Mathematics</option>
                </optgroup>
                <optgroup label="Computer Science">
             <option value="programming">Introduction to Programming</option>
             <option value="automata">Automata Theory</option>
                </optgroup>
                   </select>                                        
                        </div>
</div>
                     <div class="modal-footer">
                        <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-info">Save changes</button>
                     </div>
                   </div>
                    <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

La idea es tener un boton en cada fila de mi tabla llamado ver vehiculo y al dar clic en cada boton me salga en un modal los datos del vehiculo, para eso estoy por ahora haciendo un link asi en mi vista:

<a data-toggle="modal" href=<?php echo $this->webroot?>vehiculos/ver_vehiculo/7 data-target="#modal">Ver vehiculo</a>

Tengo ademas en mi controller vehiculos la function ver_vehiculo($id=null)

Pero no me funciona, simplemente no me sale el modal, aparentemente no hace nada, que me falta?

Agradezco su pronta ayuda.
 

Aland Laines

unread,
Mar 26, 2014, 12:47:35 PM3/26/14
to cakep...@googlegroups.com
hola Shanita, si usa bootstrap debes activa el javascript del modal:

http://getbootstrap.com/javascript/#modals
<script type="text/javascript">
	$('#about').modal('toggle');
</script>

y el link de mi modal es asi

<a href="" data-toggle="modal" data-target="#about"><i class="fa fa-info-circle fa-fw"></i> Acerca de SIGAP</a>
y este mi modal

		<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

		        <h4 class="modal-title" id="myModalLabel">Acerca de XXXXXXXXXXX</h4>
		      </div>
		      <div class="modal-body text-center">
		        <img alt="logo" src="/sigap/img/logo.jpg">
		        <p class="text-center">Desarrollado por XXXXX</p>
		        <p class="text-center">Todos los derechos reservados - &copy; 2014</p>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
		      </div>
		    </div>
		  </div>
		</div>
Saludos,

Aland Laines Calonge
programador de aplicativos web
Twitter: @lainessolutions


--
Has recibido este mensaje porque estás suscrito al grupo "CakePHP en Español" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a cakephp-esp...@googlegroups.com.
Para publicar en este grupo, envía un correo electrónico a cakep...@googlegroups.com.
Visita este grupo en http://groups.google.com/group/cakephp-esp.
Para acceder a más opciones, visita https://groups.google.com/d/optout.

sandra milena mendoza

unread,
Mar 26, 2014, 12:50:38 PM3/26/14
to cakep...@googlegroups.com
Aland gracias por tu respuesta, pero lo que quiero es traer los datos de una function de mi controller, ademas los botones de ver vehiculo los tengo en una tabla, es decir hay varios botones en una plantilla, entonces no puedo colocar los div de modal por cada uno, me entiendes?
--
_____________________________________
 
Sandra Milena Mendoza A.
Ing. Sistemas

Aland Laines

unread,
Mar 26, 2014, 1:23:24 PM3/26/14
to cakep...@googlegroups.com
Hola shana en todo caso debes usar la opcion remote del modal
<script type="text/javascript">
	$('#vehiculos').modal('remote');
</script>

<div class="modal fade" id="vehiculos" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

  <div class="modal-dialog">
    <div class="modal-content">


    </div>
  </div>
</div>

<a href="/project/controller/action/variable" data-toggle="modal" data-target="#vehiculo"><i class="fa fa-info-circle fa-fw"></i> Detalle de vehiculo</a>

En el href del boton o link que uses debes colocar la ruta de tu action y haces una vista que se incluira dendel del DIV con la class modal-content.

Saludos,

Aland Laines Calonge
programador de aplicativos web
Twitter: @lainessolutions


sandra milena mendoza

unread,
Mar 26, 2014, 3:17:43 PM3/26/14
to cakep...@googlegroups.com
Aland, ahora me sale el siguiente error:

  1. Uncaught ReferenceError: $ is not defined 7:300
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-1.10.2.js:4
1351

<script type="text/javascript"> $('#vehiculos').modal('remote');
Uncaught ReferenceError: $ is not defined </script>

Me falta algun js para el modal?

Yoel Velasquez Valencia

unread,
Mar 26, 2014, 3:20:53 PM3/26/14
to CakePHP en Español

Prueba comprobar si jquery esta correctamente instalado

Saludos

sandra milena mendoza

unread,
Mar 26, 2014, 3:34:25 PM3/26/14
to cakep...@googlegroups.com
Si, estos son mis js

 <!-- Core Scripts - Include with every page -->
        
        <script src=<?php echo $this->webroot; ?>js/jquery-1.10.2.js></script>
        <script src=<?php echo $this->webroot; ?>js/bootstrap.min.js></script>
        <script src=<?php echo $this->webroot; ?>js/plugins/metisMenu/jquery.metisMenu.js></script>

        <!-- Page-Level Plugin Scripts - Tables -->
        <script src=<?php echo $this->webroot; ?>js/plugins/dataTables/jquery.dataTables.js></script>
        <script src=<?php echo $this->webroot; ?>js/plugins/dataTables/dataTables.bootstrap.js></script>

        <!-- SB Admin Scripts - Include with every page -->
        <script src=<?php echo $this->webroot; ?>js/sb-admin.js></script>

Aland Laines

unread,
Mar 26, 2014, 3:56:16 PM3/26/14
to cakep...@googlegroups.com
eso es un error de Jquery, te dice que no encuentra el elemento $ , puede que lo hayas redifinido.

busca un linea que tenga lgo como:

var nuevoalias = jQuery.noConflict();

Saludos,

Aland Laines Calonge
programador de aplicativos web
Twitter: @lainessolutions


sandra milena mendoza

unread,
Mar 31, 2014, 4:19:02 PM3/31/14
to cakep...@googlegroups.com
Aland no encuentro el error, ni la linea que me indicas, estoy retrasada por ese código, sin poder avanzar [lloro]

Aland Laines

unread,
Apr 1, 2014, 9:58:05 AM4/1/14
to cakep...@googlegroups.com
Shana lo pudiste solucionar?, hay alguna manera de revisar tu codigo?, si quieres mandame a mi correo y lo reviso.

Saludos,

aland....@gmail.com

Aland Laines Calonge
programador de aplicativos web
Twitter: @lainessolutions


sandra milena mendoza

unread,
Apr 2, 2014, 10:36:02 AM4/2/14
to cakep...@googlegroups.com
Mil gracias, ya lo pude solucionar.

Aland Laines

unread,
Apr 2, 2014, 10:47:01 AM4/2/14
to cakep...@googlegroups.com
y que era lo que habia pasado?

Aland Laines Calonge
programador de aplicativos web
Twitter: @lainessolutions


sandra milena mendoza

unread,
Apr 2, 2014, 11:49:48 AM4/2/14
to cakep...@googlegroups.com
tuve que hacerlo por medio de elements no pude realizarlo de manera remote

Jose Gomez

unread,
Jun 18, 2014, 11:51:51 AM6/18/14
to cakep...@googlegroups.com
Hola shanita tengo el mismo problema que tu serias tan amable y me envias la solucion que implementaste, de antemano gracias
Reply all
Reply to author
Forward
0 new messages