1

Lo que quiero lograr es mediante js - jquery y/o ajax generar un switch parecido al de PHP mediante botones en <nav.

Es decir:

     $(document).ready(function(){
        $(".click").click(function(){
        $("#box").load("/file.php");
     });
    });

<div id="box">

</div>
<a href="#" class="click">Cargar</a>

Esto cargaría file.php en elemento con id #box al hacer click en elemento con clase .click

Lo que quiero lograr:

<a href="#" onclick="loadFiles()" id="1"></a>
<a href="#" onclick="loadFiles()" id="2"></a>
<a href="#" onclick="loadFiles()" id="3"></a>
<div id="contenido-dinamico"></div>

Cuando onclick="loadFiles" se ejecute, cargue X archivo según el id="file(numero)" Pero con la condición de que cuando se cargue 1, el 2 y el 3 no se muestren.

¿Es esto posible?

2
  • A ver si entendi, quieres que se cargue el archivo segun el id del elemento al cual se le da clic?
    – Einer
    Commented el 3 feb. 2018 a las 1:55
  • Si. Se va utilizar en un menu para cargar los files.
    – Juan
    Commented el 3 feb. 2018 a las 2:16

3 respuestas 3

1

Podrías pasar los "id" como parametro de la función javascript loadFiles() que definiste en el código de la descripción de tu pregunta.

Para garantizar que el div dinámico sólo muestre la información que deseas es necesario usar .empty() para "limpiar" el contenido anterior del div y colocar la nueva información que mostrará el div.

Por último pasas el "id" por post o get al archivo que deseas cargar dentro del div (en tu caso "file.php") para que cuando cargues el archivo selecciones según el "id" la información que mostrarás en tu div dinámico.

He aquí el código que contempla toda la explicación anterior:

<div id="box"></div> 

<a href="#" name="dinamico" id="1">menu 1</a> 
<a href="#" name="dinamico" id="2">menu 2</a> 
<a href="#" name="dinamico" id="3">menu 3</a> 

<script> 
$(document).ready(function(){ 
$('a[name="dinamico"]').click(function(){ 
id=$(this).prop('id'); 
$("#box").empty(); 
$("#box").load("/file.php", {id:id}); 
}); 
}); 
</script>

Para file.php

<?php
$id=$_POST['id'];

if($id=="1"){
// Aquí va información 1 para div dinámico
}
elseif($id=="2"){
// Aquí va información 2 para div dinámico que es distinta a 1
}
else{
// Aquí va información 3 para div dinámico distinta a 1 y 2
}

?>
0

Con jquery te podria proponer lo siguiente:

 $(document).ready(function(){
    $(".click").click(function(){
        var id = $(this).data("id")
        $("#box").load("/"+id+".php");
    });
});

El html :

<a href="#" class="click" id="1">Archivo 1</a>
<a href="#" class="click" id="2">Archivo 2</a>
<a href="#" class="click" id="3">Archivo 3</a>
<div id="box">
</div>

Si quieres usar una funcion puedes hacerlo igual asi:

function loadfile(el){
     var id = $(el).data("id")
     $("#box").load("/"+id+".php");
 }

El html :

<a href="#" onclick="loadfile(this)" id="1">Archivo 1</a>
<a href="#" onclick="loadfile(this)" id="2">Archivo 2</a>
<a href="#" onclick="loadfile(this)" id="3">Archivo 3</a>
<div id="box">
</div>

Espero te funcione.

0

Si, esto es posible, puedes llamar la función loadFile con el parámetro id de manera que quede algo así:

<a href="#" onclick="loadFiles(1)" id="1"></a>

De forma que cuando des click se cargue solo el archivo al id que quieres:

function loadFiles(id){
    $("#box").load("/file.php?id="+id);
}

Entonces en el archivo file.php debes mostrar la información que quieres según el valor de la variable id

Esta es una manera de hacerlo para mostrar el archivo file.php en el elemento div box

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.