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
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>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.
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/
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
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;
}Aihe on jo aika vanha, joten et voi enää vastata siihen.