Visualizzazione dei risultati da 1 a 8 su 8

Discussione: Foundation reveal ajax

  1. #1

    Foundation reveal ajax

    Come da titolo sto cercando di far apparire tramite ajax una finestra modale del framework reveal, ma nulla. Aiuto

    Codice PHP:
    <!doctype html>
    <
    html class="no-js" lang="en">
    <
    head>
    <
    meta charset="utf-8" />
    <
    meta http-equiv="x-ua-compatible" content="ie=edge">
    <
    meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <
    link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
    <
    title>Reveal</title>
    <
    link href="http://ci.dev/assets/css/foundation.min.css" rel="stylesheet" type="text/css" />
    <
    link href="http://ci.dev/assets/css/motion-ui.css" rel="stylesheet" type="text/css" />
    <
    script src="http://ci.dev/assets/js/vendor/jquery.min.js" type="text/javascript"></script>
    <script src="http://ci.dev/assets/js/foundation.min.js" type="text/javascript"></script>
    <script src="http://ci.dev/assets/js/vendor/what-input.min.js" type="text/javascript"></script>
    <script src="http://ci.dev/assets/js/vendor/motion-ui.js" type="text/javascript"></script>
    <script src="http://ci.dev/assets/js/jquery.reveal.js" type="text/javascript"></script>
    </head>
    <body>
    ...
    ...
    ...
    <span id='File_id><a class='ajax_reveal' href='#' >Reveal</a></span>
    <script type="text/javascript">jQuery(document).ready(function() {
      jQuery('.ajax_edit').click(function(){
        var dati = jQuery(this).parent().attr('id');
        alert(dati);
        $.ajax({
          type: 'POST',
          url: 'http://ci.dev/upload/edit',
          data: 'edit='+dati,
          dataType: 'html',
          success: function(result)
          {
              alert(result);
        jQuery('.body').after(result);
            jQuery('.reveal').show();
               jQuery('#myModal_modifica').reveal({
        animation: 'fade', // Animazioni disponibili: fade, fadeAndPop, none
        animationspeed: 150, // Velocità animazione
        closeonbackgroundclick: true, // Attivazione della chiusura sul click del background
        //dismissmodalclass: 'close-reveal-modal' // La classe del pulsante di chiusura
        });
          },
          error: function()
          {
            alert('Chiamata fallita, si prega di riprovare...');
          }
        });
      });
    });
    </script><script src="http://ci.dev/assets/js/app.js" type="text/javascript"></script>
    </html> 

    FILE http://ci.dev/upload/edit
    Codice PHP:
    public function edit(){
    $reveal['id_class']='class="reveal" id="reveal_modal"';    
    $reveal['animation_in']='slide-in-down'$reveal['animtation_out']='slide-out-up';
    $reveal['title']='Modificare il file <strong>'.$dati['file'].'</strong>';
    $fin='<div '.$reveal['id_class'].' data-reveal data-close-on-click=\'true\' data-animation-in="'.$reveal['animation_in'].'" data-animation-out=\''
    .$reveal['animtation_out'].'\'>
    <h2>'
    .$reveal['title'].'</h2>
    <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">×</span></button>
    <input  class=\'float-right button\' data-close aria-label=\'Close reveal\' type=\'button\' value=\'Esci\'/>
    </div>'
    ;
     echo 
    $fin;

    Non so se puo servire, ma il tutto lo sto gestendo con Codeigniter.

    Grazie

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,131
    Il link non funziona, spero tu non voglia richiamare una funzione server con ajax
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Il link non funziona, spero tu non voglia richiamare una funzione server con ajax
    Quale link?

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,131
    Quote Originariamente inviata da lucavalentino Visualizza il messaggio
    Quale link?
    Questo ci.dev/upload/edit, nel caso non fosse appunto il link alla pagina pubblica meglio riportarlo dubito che qualcuno faccia test in locale. Inoltre non ho ancora capito se cerchi di richiamare una funzione server edit()?
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Sto simulando tramite wamp un indirizzo del tipo http://ci.dev

    Upload è il controlloer mentre edit è la funzione del controller

    Vorrei che al click su un link mi comparisse una finestra modale che richiamo tramiite ajax

    la creazione del div della funzione edit
    Codice PHP:
    public function edit(){
    $reveal['id_class']='class="reveal" id="reveal_modal"';    
    $reveal['animation_in']='slide-in-down'$reveal['animtation_out']='slide-out-up';
    $reveal['title']='Modificare il file <strong>'.$dati['file'].'</strong>';
    $fin='<div '.$reveal['id_class'].' data-reveal data-close-on-click=\'true\' data-animation-in="'.$reveal['animation_in'].'" data-animation-out=\''
    .$reveal['animtation_out'].'\'>
    <h2>'
    .$reveal['title'].'</h2>
    <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">×</span></button>
    <input  class=\'float-right button\' data-close aria-label=\'Close reveal\' type=\'button\' value=\'Esci\'/>
    </div>'
    ;
     echo 
    $fin;

    codice HTML:
    ....
    ....
    <script type="text/javascript">jQuery(document).ready(function() {
      jQuery('.ajax_edit').click(function(){
        var dati = jQuery(this).parent().attr('id');
        alert(dati);
        $.ajax({
          type: 'POST',
          url: 'http://ci.dev/upload/edit',
          data: 'edit='+dati,
          dataType: 'html',
          success: function(result)
          {
              alert(result);
        jQuery('.body').after(result);
            jQuery('.reveal').show();
          },
          error: function()
          {
            alert('Chiamata fallita, si prega di riprovare...');
          }
        });
      });
    });
    </script>

    In alert(result); vedo il codice html del div quindi mi chiedo come farlo apparire nella pagin.?

  6. #6
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,131
    Devi appenderlo al body oppure ad oggetto.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  7. #7
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Devi appenderlo al body oppure ad oggetto.
    Con paapen funziona.
    Ora vorrei utilizzare il reveal del framework fondation http://foundation.zurb.com/sites/doc...ts/reveal.html

    Non ho idea di comne fare

    Grazie
    Ultima modifica di lucavalentino; 13-06-2016 a 08:36

  8. #8
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,131
    Quote Originariamente inviata da lucavalentino Visualizza il messaggio
    In alert(result); vedo il codice html del div quindi mi chiedo come farlo apparire nella pagin.?
    Quote Originariamente inviata da cavicchiandrea Visualizza il messaggio
    Devi appenderlo al body oppure ad oggetto.
    Quote Originariamente inviata da lucavalentino Visualizza il messaggio
    Con paapen funziona.
    Ora vorrei utilizzare il reveal del framework fondation

    Non ho idea di comne fare

    Grazie
    Se nel alert vedi l'html come dici appendendolo al body dovrebbe funzionare, io non ho tempo e voglia di studiarmi un framework che non uso attendi altri consigli

    P.S. Nel caso trovassi la soluzione postalo per aiutare altri in futuro con lo stesso problema nello spirito del forum
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.