[SOLUCIONADO] Usar funcion PHP en HTML a través de js

[agusax]

Muy buenas chic@s,

Me estoy metiendo en un pequeño fregao, ya que no sé como puede funcionar esto.

Dispongo de un documento PHP que contiene una función para listar imágenes de una carpeta y formatearlo (una galería de to la vida).

La cosa es no sé a incluir esta galería en un proyecto mayor que está realizado en HTML.

Ejemplo de php:

Código PHP:

<?php
    function listar_fotos($carpeta){
        //Lo que sea
        echo '<img class="img_demo" src="'.$carpeta."/".$archivo.'" >';
        //Lo que sea
    }
?>
 

ejemplo HTML:

Código HTML:

<!--Galeria-->
    <div class="row">
        <div class="col-md-12">
            <!-- no sabría completarlo para llamar esa funcion-->
        </div>
    </div>
 

Dejando a un lado que no sabría como completar esa entrada de html, he realizado una primera versión de la función de js, pero no sabría como llamarlo y no sé si este funciona correctamente. He tocado muy pocas veces el js y ando bastante perdido.

Código Javascript:

//Listar fotos(cuando cumple la funcion, load llama a esta funcion)
function fotos_lista(){
    $.ajax({
        url: 'fotos_lista.php',
        type: 'post',
        dataType: 'html',
        data: { condicion: "ejecutarFuncion"},
        success:function(resultado){
            alert(resultado);
        }
    }
}
 

¿Álguien podría remitirme a algún ejemplo o similar para poder realizar esto?
Intento que no tenga que cambiar el otro fichero a extensión .php

Muchas gracias de antemano

[agusax]

¿Alguien podría orientarme un poco? ando bastante perdido, y sino, tengo que hacer la galería estática

[mpozo]

Se supone que la función php es un ciclo. Con nowdoc o heredoc puedes crear un string. Este string sera la respuesta ajax. Y esa respuesta la añades al elemento html, en tu caso a class="col-md-12" con alguno de los métodos que existen text(), html(), append(), etc

[agusax]

El caso es que no sé como hacerlo, ya que no domino JS. De ahí que ando buscando un tutorial, no sé como hacer que la petición AJAX funcione correctamente.

[agusax]

He probado a realizar lo siguiente:

Código HTML:

...
<div class="row">
    <div id="contenidoGaleria" class="col-md-12"></div>
</div>
...
 

Código Javascript:

$(document).ready(function(){
    $("#contenidoGaleria").load("fotos_lista.php");
});
 

Pero no me llega a mostrar nada, además que tendría que pasarle a fotos_lista.php una variable, que es carpeta.
¿me podrían orientar un poco? Esta idea la he sacado de aqui: https://www.w3schools.com/jquery/jquery_ajax_intro.asp

[ArturoGallegos]

Te soy franco y no entiendo tu confucion y problema

si ya tienes

Código Javascript:

//Listar fotos(cuando cumple la funcion, load llama a esta funcion)
    function fotos_lista(){
        $.ajax({
            url: 'fotos_lista.php',
            type: 'post',
            dataType: 'html',
            data: { condicion: "ejecutarFuncion"},
            success:function(resultado){
                alert(resultado);
            }
        }
    }
 
 
// cambia el evento success
 
function fotos_lista(){
        $.ajax({
            url: 'fotos_lista.php',
            type: 'post',
            dataType: 'html',
            data: { condicion: "ejecutarFuncion"},
            success:function(resultado){
                $('#elemento').html(resultado);
            }
        }
    }
 

Porque no haces uso de esto mismo para cargar el contendio

[agusax]

Iniciado por ArturoGallegos

Te soy franco y no entiendo tu confucion y problema

si ya tienes

Código Javascript:

//Listar fotos(cuando cumple la funcion, load llama a esta funcion)
    function fotos_lista(){
        $.ajax({
            url: 'fotos_lista.php',
            type: 'post',
            dataType: 'html',
            data: { condicion: "ejecutarFuncion"},
            success:function(resultado){
                alert(resultado);
            }
        }
    }
 
 
// cambia el evento success
 
function fotos_lista(){
        $.ajax({
            url: 'fotos_lista.php',
            type: 'post',
            dataType: 'html',
            data: { condicion: "ejecutarFuncion"},
            success:function(resultado){
                $('#elemento').html(resultado);
            }
        }
    }
 

Porque no haces uso de esto mismo para cargar el contendio

Muchas gracias por tu ayuda, acabo de fijarme que no me funcionaba, porque me faltaba un ); para terminar el ajax....

Dejo abajo como solucioné, por si en un futuro lo necesita algún compañero y como tomo el valor en el php.

Funcion php:

Código Javascript:

function fotos_lista(){
    var cImg= 'G1';//Uso G1 como ejemplo
    $.ajax({
        url: 'listar_fotos.php',
        type: 'post',
        dataType: 'html',
        data: {carpeta: cImg},
         success:function(data){
            $('div#div1').html(data);
        }
    });//Este cierre me faltó, cuando uno se ofusca...
}
 

Código PHP:

$carpeta = $_POST['carpeta'];
function listar_fotos($carpeta){...}
listar_fotos($carpeta); //para cargar la funcion
 

Un saludo a todos y cierro el post como solucionado