[Javascript] Selezione dinamica

Discussione in 'Javascript' iniziata da anto4392, 22 Maggio 2017.

  1. anto4392

    anto4392 Nuovo Utente

    Registrato:
    22 Maggio 2017
    Messaggi:
    25
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Femmina
    Salve a tutti, avrei bisogno di cambiare dinamicamente i contenuti di una pagina in base alla selezione di un menù a tendina. Ad esempio, selezionando la voce tutorial, voglio che appaiano solo i video tutorial, e così via per le interviste e i video degli spettacoli.
    Non so proprio da dove cominciare con il codice js.

    Grazie a chiunque vorrà aiutarmi
     
  2. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    Ciao,
    HTML:
    <select name="categoria" onchange="location.href=this.value">
        <option value="?id=1">cat 1</option>
        <option value="?id=2">cat 2</option>   
        <option value="?id=3">cat 3</option>   
        <option value="?id=4">cat 4</option>     
    </select>
    nel value puoi mettere il link della pagina che dovrà caricarsi
     
  3. anto4392

    anto4392 Nuovo Utente

    Registrato:
    22 Maggio 2017
    Messaggi:
    25
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Femmina
    Innanzitutto grazie per la risposta.

    Vorrei comunque che i video apparissero nella medesima pagina (ad esempio in un div) e non che fossero delle pagine a parte
     
  4. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
  5. anto4392

    anto4392 Nuovo Utente

    Registrato:
    22 Maggio 2017
    Messaggi:
    25
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Femmina
    Si è simile grazie ! Darò un'occhiata ed eventualmente chiederò altri chiarimenti.
     
    A criric piace questo elemento.
  6. anto4392

    anto4392 Nuovo Utente

    Registrato:
    22 Maggio 2017
    Messaggi:
    25
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Femmina
    Ho provato a seguire l'esempio, tuttavia nella mia pagina i link li del menù non diventano cliccabili
     
  7. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    lo hai online ? in realtà anche se non sembra puoi cliccare. Per vederlo come link devi aggiungere il tag <a>
     
  8. anto4392

    anto4392 Nuovo Utente

    Registrato:
    22 Maggio 2017
    Messaggi:
    25
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Femmina
    Codice:
    <div id="content">
            
    <div id="menu">
                    <ul>
                        <li id="pagina1">Pagina 1</li>
                        <li id="pagina2">Pagina 2</li>
                        <li id="pagina3">Pagina 3</li>
                    </ul>
                </div>         
    
    
            
    
    <script  type="text/javascript">
                    $("#menu ul li").click(function() {
                        var param =  $(this).attr("id");
                        $.ajax({ 
                            type: "GET",
                            url: param + ".html",
                            success: function(response) {
                                $("#content").html(response);               
                            }
                        });
                    })
                </script>
    
    
    
    
    
    
    
                    </div>
     
  9. anto4392

    anto4392 Nuovo Utente

    Registrato:
    22 Maggio 2017
    Messaggi:
    25
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Femmina
    Con questo codice non succede proprio nulla nella pagina
     
  10. anto4392

    anto4392 Nuovo Utente

    Registrato:
    22 Maggio 2017
    Messaggi:
    25
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Femmina
    mando il codice completo
     
  11. anto4392

    anto4392 Nuovo Utente

    Registrato:
    22 Maggio 2017
    Messaggi:
    25
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Femmina
    Codice:
    <!DOCTYPE html>
      <html lang="it">
        <head>
        <title>Foto</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
        <link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' /> 
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <![endif]-->
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    
        
        </head>
        
            <body>
    
          
            <!--Header-->
            
            <header>
            
            
            <nav class="social">
                        <ul>
                            <li><a href="#"class="fa fa-facebook"></a></li>
                            <li><a href="#" class="fa fa-twitter"></a></li>
                            <li><a href="#" class="fa fa-instagram"></a></li>
                            <li><a href="#" class="fa fa-youtube"></a></li>
    
                        </ul>
            </nav>
            
            <div class="form-top">
            <form>Registrati alla Newsletter
                <input type="email">
                <input type="submit" id="submit">
                </form>
            </div>
            
            <img src="image/banner.jpg" class="small" alt="logo"/>
                
                
            <!--Menu di navigazione-->
            <div class="topnav" id="myTopnav">
            <a href="index.html">Home</a>
            <a href="#">Progetto</a>
            <a href="iniziative.html">Iniziative</a>
            <a href="#">News</a>
            <a href="#">Foto e video</a>
            <a href="#">Come partecipare</a>
            <a href="#">Registrati</a>
            <a href="#">Contatti</a>
            <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
            </div>
            
            
            </header>
            
            <div id="content">
            
    <div id="menu">
                    <ul>
                        <li id="pagina1">Pagina 1</li>
                        <li id="pagina2">Pagina 2</li>
                        <li id="pagina3">Pagina 3</li>
                    </ul>
                </div>         
    
    
            
    
    <script  type="text/javascript">
                    $("#menu ul li").click(function() {
                        var param =  $(this).attr("id");
                        $.ajax({ 
                            type: "GET",
                            url: param + ".html",
                            success: function(response) {
                                $("#content").html(response);               
                            }
                        });
                    })
                </script>
    
    
    
    
    
    
    
                    </div>
            
    
            <!--Footer-->
            <footer>
            <p>FNAS - federazione nazionale arti in strada | sede legale: Via di Villa Patrizi 10, 00161 Roma - C.F. 96395280587 - P.Iva 07510401008</p>
            </footer>
            
            <script>
    <!--Rende la topnav responsive-->
    function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
    }
    </script>
    </body>
      </html>
    
    
     
  12. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    cambia il richiamo della libreria jquery cosi
    HTML:
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    le pagine 1 2 3 etc le hai gia create ?
     
  13. anto4392

    anto4392 Nuovo Utente

    Registrato:
    22 Maggio 2017
    Messaggi:
    25
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Femmina
    lo script, almeno nel mio caso, non rende i link cliccabili.
    Inoltre vorrei cambiare dinamicamente la pagina, cambiando il div a seconda della selezione e non aprire una nuova finestra
     
  14. anto4392

    anto4392 Nuovo Utente

    Registrato:
    22 Maggio 2017
    Messaggi:
    25
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Femmina
    Ho creato già le pagine
     
  15. anto4392

    anto4392 Nuovo Utente

    Registrato:
    22 Maggio 2017
    Messaggi:
    25
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Femmina
    Ho creato una nuova discussione per spiegare meglio cosa voglio ottenere.
     
  16. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    io concludo questa, può essere utile a qualcuno., visto che l'ho fatto posto il codice e il link all'esempio funzionante utilizzando parte del tuo codice.
    HTML:
    <!DOCTYPE html>
    <html lang="it">
        <head>
            <title>Foto</title>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#myTopnav a.link").click(function (e) {
                        e.preventDefault();
                        var param = $(this).attr("id");
                        $.ajax({
                            type: "GET",
                            url: param + ".html",
                            success: function (response) {
                                $("#content").html(response);
                            }
                        });
                    })
                });
            </script>
        </head>
        <body>
            <!--Header-->
            <header>
                <!--Menu di navigazione-->
                <div class="topnav" id="myTopnav">
                    <a id="pagina0" class="link" href="#">Home</a>
                    <a id="pagina1" class="link" href="#">Progetto</a>
                    <a id="pagina2" class="link" href="#">Iniziative</a>
                    <a id="pagina3" class="link" href="#">News</a>
                    <a id="pagina4" class="link" href="#">Foto e video</a>
                    <a id="pagina5" class="link" href="#">Come partecipare</a>
                    <a id="pagina6" class="link" href="#">Registrati</a>
                    <a id="pagina7" class="link" href="#">Contatti</a>
                </div>
            </header>
            <div id="content">
                <?php
                include 'pagina0.html';
                ?>
            </div>
            <!--Footer-->
            <footer>
                <p>:: 23 maggio 2017</p>
            </footer>
        </body>
    </html>
    
     
  17. anto4392

    anto4392 Nuovo Utente

    Registrato:
    22 Maggio 2017
    Messaggi:
    25
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Femmina
    Ti ringrazio molto
     
  18. anto4392

    anto4392 Nuovo Utente

    Registrato:
    22 Maggio 2017
    Messaggi:
    25
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Femmina
    Mi dà questo tipo di errore

    XMLHttpRequest cannot load file:///C:/Users/Antonella/Dropbox/TESI/Sito%20Web/Sito_buona_strada/pagina0.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
     
  19. criric

    criric Super Moderatore Membro dello Staff SUPER MOD MOD

    Registrato:
    21 Agosto 2010
    Messaggi:
    5.607
    Mi Piace Ricevuti:
    54
    Punteggio:
    48
    Sesso:
    Maschio
    Località:
    TN
    Per funzionare AJAX ha bisogno di un web server che gestisce le richieste. Non puoi farlo girare su una cartella locale del pc.
    Puoi utilizzarlo direttamente su un host online o al massimo di puoi scaricare un web server locale tipo WAMP se usi windows.
     
  20. anto4392

    anto4392 Nuovo Utente

    Registrato:
    22 Maggio 2017
    Messaggi:
    25
    Mi Piace Ricevuti:
    1
    Punteggio:
    3
    Sesso:
    Femmina
    Ho provato questa soluzione e ora lo script funziona, tuttavia, nonostante io abbia messo i link a tutte le pagine, mi ripropone sempre pagina0.html
     
Sto caricando...

Condividi questa Pagina