Saludos y problemas con .load()

[tito87]

Hola a todos,
primero me presento, me llamo Alberto y soy nuevo en el foro.
Llevo mucho tiempo consultando el foro pero hasta hoy no había tenido ninguna duda que no hubiera podido resolver aquí.

Mi problema es el siguiente:
No me funciona el comando .load() con jquery.
Tengo una página basada en Codeigniter y uso HMVC.
la cosa es que quiero que al pulsar un boton me carge el contenido que hay en un .html y me lo muestre debajo del botón. para ello uso el siguiente código:

Código:

<button type="button" id="mostrar" class="large green">
    <img src="<?=base_url()?>image/icon-new.png" /> Mostrar Pestaña
</button>
<div id="caja"> </div>

<script language="javascript" type="text/javascript">
$(document).ready(function() {	
                $('#mostrar').click(function(){$('div#caja').load('application/modules/projects/views/cuadrado.html');
                });
                

	});
</sript>

el archivo cuadrado.html es:
<div style="border: 5px #0064ea solid ">
    <p> Hola esto es una prueba </p>
</div>

Las librerias de jquery están bien incluidas, porque si uso otros comandos como append() o html() me funciona a la perfección.
El problema lo tengo con el comando load.

Espero que me podáis ayudar.
Muchas gracias.

[maycolalvarez]

application/modules/projects/views/cuadrado.html

No puedes llamar a una vista directamente para eso existen los controladores, necesitas un controlador que renderize la vista, estás intentando saltar el flujo del modelo MVC, el controlador se encarga de llamar al modelo y pasar los datos a la vista, y devolver la respuesta HTML, la vista NO se encarga de eso.

utiliza una consola como firebug para verificar el estado de la petición AJAX y la respuesta que envía el servidor

[tito87]

Iniciado por maycolalvarez

application/modules/projects/views/cuadrado.html

No puedes llamar a una vista directamente para eso existen los controladores, necesitas un controlador que renderize la vista, estás intentando saltar el flujo del modelo MVC, el controlador se encarga de llamar al modelo y pasar los datos a la vista, y devolver la respuesta HTML, la vista NO se encarga de eso.

utiliza una consola como firebug para verificar el estado de la petición AJAX y la respuesta que envía el servidor

Muchas gracias por la respuesta.

Pero entonces si yo tengo un botón que quiero que al pulsarlo me agregue un código html, este botón lo tengo en la vista, tengo que llamar en la función que ejecuta el botón al controlador y allí cargar la vista que tiene el código html y volver a la vista donde está el botón?¿?
Como puedo llamar a un controlador desde jquery?

[YYs86]

Únicamente lo tienes que llamar y el mismo te devolverá lo que tienes programado:

Código Javascript:

$.post('/url/controlador', { js: true }, function(data) {
            $('div#caja').append(data);
});
 

[tito87]

Iniciado por YYs86

Únicamente lo tienes que llamar y el mismo te devolverá lo que tienes programado:

Código Javascript:

$.post('/url/controlador', { js: true }, function(data) {
            $('div#caja').append(data);
});
 

No me funciona, lo que he hecho a sido lo siguiente:

Código Javascript:

<button type="button" id="mostrar" class="large green" onclick="dibujarCuadrado()">
    <img src="<?=base_url()?>image/icon-new.png" /> Mostrar Pestaña
</button>
 
<script>
function dibujarCuadrado()
{
    $.post(base_url+ 'projects/project/dibujar_cuadrado',{js:true}, function(data) {
                        $('div#caja').append(data);});
}
</script>
 

y la función a la que llamo para que me carge la vista se llama: dibujar_cuadrado
y es:

Código:

$this->load->view('projects/cuadrado.html')

la consola me dice 500 Internal server error.
Qué estoy haciendo mal??

gracias

[tito87]

Solucionado:
lo que he hecho ha sido cambiar la llamada de ajax y hacerlo así:

Código PHP:

function dibujarCuadrado()
{
    var data=$.ajax({   url : base_url + 'projects/project/dibujar_cuadrado',
            type : 'POST',
                        async : false
                });
    return(data.responseText);
   
}
 

y después el botón lo defino así:

Código HTML:

<button type="button" id="mostrar" class="large green" onclick="$('div#caja').append(dibujarCuadrado())">
    <img src="<?=base_url()?>image/icon-new.png" /> Mostrar Pestaña
</button>
 

Y ya consigo añadir una página html al código.

Muchas gracias a los dos por vuestra ayuda.

Que algún admin ponga el post como solucionado, gracias.