:llä?

wisekki [14.11.2008 13:24:57]

Miten voisi toteuttaa lisäys/muokkaus -sivun tietokantaan, joka avautuisi <div>:llä erilliseen pieneen "laatikkoon" sivuston päälle niin, että alkuperäinen sivu näkyisi taustalla?

Toivottavasti joku tajuaa mitä yritän selittää :)

- AnttiK

Metabolix [14.11.2008 13:48:22]

Jos sen on pakko olla juuri div, saat käyttää AJAXia ja säätää varsin rankasti. Jos kuitenkin iframe kelpaa, ei tarvitse kuin asetella se oikeaan kohti CSS:llä (position: absolute; left: x; top: y;), ja muokkaussivu toimii kuten mikä tahansa muukin sivu. Muokkauslinkin klikkauksen täytyy tietenkin sen verran JS:ää käyttää, että muuttaa tuon framen näkyväksi.

<script type="text/javascript">
/* <![CDATA[ */
function show(frame, addr) {
  frame = document.getElementById(frame);
  if (!frame) return;
  if (addr == null) {
    frame.style.display = "none";
  } else {
    frame.style.display = "block";
    frame.src = addr;
  }
}
function hide(frame) {
  show(frame, null);
}
/* ]]> */
</script>

<iframe
  id="popup_frame"
  style="position: absolute; top: 1em; left: 1em; display: none">
</iframe>

<a
  href="osoite"
  onclick="show('popup_frame', this.href); return false;">
    Linkki
</a>
<button
  onclick="show('popup_frame', 'osoite'); return false;">
    Nappilinkki
</button>
<button
  onclick="hide('popup_frame'); return false;">
    Piilota
</button>

wisekki [14.11.2008 14:20:23]

Itseasiassa tätä tarkoitin.. olin hieman omissa ajatuksissani kun kirjoittelin :)

Idea vaikuttaa näin äkkiseltään hyvältä, mutta onko tässä mahdollista käyttää jotenkin <form>:ia apuna, jolla siirtyisi tiedot ja onko mahdollista erillisessä muokkauslomakkeessa käyttää nappulaa, joka tallentaa tiedot tietokantaan ja sulkee ikkunan?

--edit--

Toimii kuten halusin, mutta onko mahdollista iframen avaamassa linkissä olla ns. piilota nappua, joka piilottaisi framen suoraan niin, ettei joudu klikkaamaan pääsivun piilota -nappulaa? :) Eli tarkoituksena kun on muokkaus-sivu niin tietojen tallentuessa iframe piiloutuisi automaattisesti.

Matso [17.11.2008 15:14:15]

Mitää iframeja kaivata. Ajaxilla sama melkee yhtä helposti, ku otetaan JQuery käyttöön =D

<html>
  <head>
    <title>Ajax formi by Matso</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(function(){
      //Piilotetaan popuppi
      $('#popup').hide();
      //Näytetään popuppi linkkiä klikatessa
      $('#avaa_pop').click(function(){
        $('#popup').show();
      });
      //Lähetetään data kun submittia painetaan
      $('#popup form').submit(function(){
        //Haetaan nimi kentän arvo formista
        var nimival = $('#popup #nimi').val();

        //Tehään post-kysely kasettelija.php -scriptille
        $.post('kasittelija.php', {nimi: nimival}, function(data){});

        //Piilotetaan popup kun lähetys on tehty
        $('#popup').hide();
      });
    });
    </script>
    <style type="text/css">
      body {
        font-family: Verdana;
      }
      #popup {
        width: 400px;
        height: 400px;
        margin: auto;
        background: #f0f0f0;
        padding: 7px;
        border: 1px solid #e0e0e0;
      }
      h2 {
        margin-top: 0;
      }
    </style>
  </head>
  <body>
    <a id="avaa_pop" href="#">Avaa</a>
    <div id="popup">
      <h2>Lomake</h2>
      <form action="#">
        <fieldset>
          <label for="nimi">Nimi:</label>
            <input id="nimi" type="text" />
          <input type="submit" value="Lähetä" />
        </fieldset>
      </form>
    </div>
  </body>
</html>

JQueryn lataat täältä http://jquery.com/

wisekki [18.11.2008 08:32:23]

Kiitoksia, juuri tällainen oli hakusessa.. ainoa vaan, että sen pitäisi avaa popup-ikkuna sivun päälle niin ettei jo olevat tiedot skrollautuisi alaspäin. :) Ehkäpä yksinkertainen toteuttaa, mutta ajax täysin pimennossa...

- AnttiK

Matso [18.11.2008 15:05:27]

CSS:kin näyttäs olevan pimennossa.

Muuta sitä #popup kohdan CSS-koodia vähäsen. Vaikka tällaseks:

#popup {
  width: 400px;
  height: 400px;
  left: 50%;
  right: 50%;
  margin-left: -200px;
  background: #f0f0f0;
  padding: 7px;
  border: 1px solid #e0e0e0;
  position: absolute;
}

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku

Tehtävät

Kilpailu