Tein lyhkäsen skriptin kuvatiedoston poistoa varten. Tämä poisti yhden kuvan ja sitte toppasi.
$("img").click(function(){
var str = $(this).attr('href');
var gets = str.split('&');
var idname = gets[0];
var ki_galleries = gets[1];
var gallery = gets[2];
var filename = gets[3];
var thumb = gets[4];
var param = "&ki_galleries=" + ki_galleries + "&gallery=" + gallery + "&file=" + filename + "&thumb=" + thumb;
$(".gallery").load("index.php?route=line/kigallery/deleteimage" + param,
function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert(responseTxt);
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});Tuossa näkyy viimeisin testi
lainaus:
alert(responseTxt)
. Ehkä vähä yllättäen se tulostaa admin sivun kirjautumislomakkeen html-koodin.
Pitääkö tuolle syöttää myös ne admin tunnukset?
Lisäksi tuohon pitäisi saada aikaan se, että tuo "idname" tyhjennetään, muutenhan tästä Ajaxin käytöstä ei ole hyötyä.
Ps. Ilman javascriptin käyttöä tuon poistohomman sain toimimaan mutta on turhan raskasta päivittää koko sivu uudestaan.
Miksi sä nappaat urlin, pilkot sen osiin, ja kasaat (täysin samaan muotoon?!) uudelleen? Mikset sä käytä tuota alkuperäistä hreffiä suoraan "param"-muuttujana?
Muutenkin toi on jotenkin todella sekava, eli mikä tuo sun idnamesi edes on ja missä sitä käytetään?
Itse siis usein käytän ajax-kutsuissa yleensä ihan sitä samaa hreffiä, mikä linkissäkin on, ja saatan lisätä ajax-kutsussa vain yhden ylimääräisen parametrin, josta skripti saa tiedon, että kyseessä on ajax-kutsu, tulostetaan vain minimi-määrä sisältöä.
Eli ilman javascriptiä ladataan vain sivu kokonaisuudessaan, javascriptillä taas taas ajaxilla vain tarvittava tieto.
edit:
Mun mielestä tää on kuitenkin vähän yksinkertaisemman näköinen ja aika toimiva
$("a.poistakuva").click(function(e){
e.preventDefault();
$.ajax({
type : "POST",
data : 'ajax=1',
url: $(this).attr("href"),
success: function(data) {
//this is where the magic happens
//esim. piilota "poistettava" rivi ruudulta.
}
});
});Lebe80 kirjoitti:
Muutenkin toi on jotenkin todella sekava, eli mikä tuo sun idnamesi edes on ja missä sitä käytetään?
Tuolla Get-muuttujalla syötetään myös kuvan id. Se luodaan silmukassa ja on muotoa 0_3 (neljäs kuva silmuakassa). Muuten tuota id:tä ei oikein voi selvittää.
Ja linkki on tätä tyyppiä:
&0_10&dirname&dirname2&filename&thumbfile
Käytin tuota preventDefaultia, mutta minulla JQuery (tai selain) moitti sitä.
Ps. Testaan tota "Postiasi"
joo, mä kyllä ymmärrän, mikä id on, mutta sä itse et näytä käyttävän sitä missään koodissasi.
Lebe80 kirjoitti:
joo, mä kyllä ymmärrän, mikä id on, mutta sä itse et käytä sitä missään koodissasi.
En vielä. Kun tuo ohjelman eka osa on vielä keske. Tarkoitus on sillä id-tiedolla sitte häivyttää kuva näkyvistä.
ja datassa mulla on tuossa esimerkissä ajax=1, jonka voit poistaa tai lisätä omia parametrejä. Ne siis lähetetään esimerkissä kutsun mukana post-muuttujina.
En saanut tätä vielä toimimaan.
Pystyykö tuohon viittaamaan onclick attribuutilla? Miten tuota pitäisi siinä tapauksessa muuttaa? Tuo linkki ei ole kuvan kanssa kovin hyvä vaihtoehto.
Lebe80 kirjoitti:
ja datassa mulla on tuossa esimerkissä ajax=1, jonka voit poistaa tai lisätä omia parametrejä.
Harvemmin tarvitsee tuollaista purkkaa. Asian voi tarkistaa myös http-pyynnön otsikkotiedoista. Vaikkei läpeensä standardi tapa olekaan, niin yhtenäinen käytäntö kuitenkin.
pistemies kirjoitti:
En saanut tätä vielä toimimaan.
Pystyykö tuohon viittaamaan onclick attribuutilla? Miten tuota pitäisi siinä tapauksessa muuttaa? Tuo linkki ei ole kuvan kanssa kovin hyvä vaihtoehto.
Linkki kuvan kanssa?
Laita alkuun ihan simppeliin html-tiedostoon ja tulostat linkin takana olevassa php-tiedostossa kaikki get ja post-muuttujat.
Kun saat sen toimimaan, siirrät toimivan koodin sun ylläpitosivuusi.
The Alchemist kirjoitti:
Lebe80 kirjoitti:
ja datassa mulla on tuossa esimerkissä ajax=1, jonka voit poistaa tai lisätä omia parametrejä.
Harvemmin tarvitsee tuollaista purkkaa. Asian voi tarkistaa myös http-pyynnön otsikkotiedoista. Vaikkei läpeensä standardi tapa olekaan, niin yhtenäinen käytäntö kuitenkin.
Olisiko tämän tyyppinen:
xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");Eikö tuo xmlhttprequest ole poissa jQuerysta.
Lebe80: Ei ole linkkiä, teen tätä localhostiassa :)
Mutta taitaa onnistua paremmin erillisestä pikku-php tiedostosta tuo ajax-haku kuin isosta paketista mihin se nytte on menny.
Tällä hetkellä js on tämä:
$("a.delete").click(function(e){
e.preventDefault();
$.ajax({
type : "POST",
data : $(this).attr("href"),
url: "ki_base/bi_deleteimage.php",
success: function(data) {
//this is where the magic happens
//esim. piilota "poistettava" rivi ruudulta.
}
});
}Hiukan ongelmia aiheuttaa ainakin se, että en ole mistään löytänyt esimerkkiä, millainen tuo data tulee olla ulkoasultaan silloin kun siinä on useita post muuttujia. Pitääkö ne erotella pilkulla vai ei.
pistemies kirjoitti:
Lebe80: Ei ole linkkiä, teen tätä localhostiassa :)
Mutta taitaa onnistua paremmin erillisestä pikku-php tiedostosta tuo ajax-haku
Mielestäni sanoin juuri noin, mitä totesit. Eli testaa ennen kuin yritätkään tunkea sitä järjestelmääsi.
Data-kentän parametrit eroteltiin &-merkillä, mutta niitä tuskin tarvitset. Ja jos vielä ei tullut selväksi, voit aina katsoa jQueryn sivuilta aka RTFM.
Saanko mä viel kysyä, mikset laita niitä kaikkia tarvittavia parametrejä SIIHEN VITUN LINKIN HREFFIIN SUORAAN?! Jätä data tyhjäksi.
Lebe80 kirjoitti:
Saanko mä viel kysyä, mikset laita niitä kaikkia tarvittavia parametrejä SIIHEN VITUN LINKIN HREFFIIN SUORAAN?! Jätä data tyhjäksi.
Saat veikkosella.
Kuten tässä on tullut ilmi, teen tätä admin-sivulla. Kaikisssa admin-sivuilla olevissa linkeissä pitää olla $_SESSION merkkijono get-muuttujassa &token. Muutoin koko homma siirtyy adminin kirjautumissivule. Ja linkin pitää osoittaa osoiteeseen index.php.
Osittain iitä syystä tuossa eka-viestin testissäkin meni puuhun kun ei ollut sitä tokenia.
Mutta hoksasin, että tuosta datasta pitää karsia ainakin stringi "index.php?" pois.
Koirakin on lenkitetty joten jatkan nyt näitä testejä.
Siis tee nyt se niin, että se toimii ilman ajaxia.
Niin siitähän se on helppo tehdä ajaxilla toimivaksi, kun käyttää ajax-kutsussa _täysin_ _samaa_ _urlia_ poistolinkin _hreffissä_.
Tällöin vain teet, että poistoskriptisi palauttaa ajaxia käytettäessä vaikka tekstin "kuva poistettu onnistuneesti", tai vastaavasti "Poisto epäonnistui! Sinun pitää kirjautua sisälle" riippuen mitä skriptissäsi tapahtuu.
Lebe80 kirjoitti:
Siis tee nyt se niin, että se toimii ilman ajaxia.
Niin siitähän se on helppo tehdä ajaxilla toimivaksi, kun käyttää ajax-kutsussa _täysin_ _samaa_ _urlia_ poistolinkin _hreffissä_.
Tällöin vain teet, että poistoskriptisi palauttaa ajaxia käytettäessä vaikka tekstin "kuva poistettu onnistuneesti", tai vastaavasti "Poisto epäonnistui! Sinun pitää kirjautua sisälle" riippuen mitä skriptissäsi tapahtuu.
En tiedä jaksanko vääntää uudestaan tuota, mitä minulla oli alunperin ilman javascriptiä.
Ja ei minulla ollut siinä hreffissä kovinkaan kummosia tietoja, koska se poimi ne mysl-asetuksista. Siinä oli hreffissä vain kuvatiedostojen nimi ja gallery-hakemiston nimi esim. muodossa &folder=0 (0 on arrayn arvo, josta nimi löytyy).
Mutta nyt mietin, miten pitää tuo palauttava teksti tuoda jQueryssä. Voisi sitten nähdä, mitä php-tiedosto palauttaa.
document.getElementById("delsuccess").innerHTML=responseText;Pelkkä rsponseText palauttaa "success" mutta tuohon pitäis olla jotain sen eteen...
Ps. Tässä vielä nykyinen koodi kokonaan
$("a.delete").click(function(e){
e.preventDefault();
var str = $(this).attr("href");
var gets = str.split('?');
var posts = gets[1];
var parts = posts.split('&');
var idname = parts[2];
$.ajax({
type : "POST",
data : posts,
url: "ki_base/ki_deleteimage.php",
success: function(data,responseText) {
document.getElementById("delsuccess").innerHTML=responseText;
//this is where the magic happens
//esim. piilota "poistettava" rivi ruudulta.
alert(responseText);
}
});
});pistemies kirjoitti:
Lebe80 kirjoitti:
Siis tee nyt se niin, että se toimii ilman ajaxia.
Niin siitähän se on helppo tehdä ajaxilla toimivaksi, kun käyttää ajax-kutsussa _täysin_ _samaa_ _urlia_ poistolinkin _hreffissä_.
Tällöin vain teet, että poistoskriptisi palauttaa ajaxia käytettäessä vaikka tekstin "kuva poistettu onnistuneesti", tai vastaavasti "Poisto epäonnistui! Sinun pitää kirjautua sisälle" riippuen mitä skriptissäsi tapahtuu.
En tiedä jaksanko vääntää uudestaan tuota, mitä minulla oli alunperin ilman javascriptiä.
Teet ja selität sä mitä tahansa, niin nyt vain teet sen niin, että se toimii ilman javascriptiä, ja sen jälkeen teet sen toimimaan _myös_ javascriptillä. PISTE!
Noi sun ihme parametrit data-kentässä on ihan kaameita, kun nimenomaan idea on se, että se toimii tuolloin ajaxilla ja ilman.
Eli unohdat tommoset purkkaviritykset ja teet kerralla vaan toimivan. Jos sä et saa sitä toimimaan ilman ajaxia, niin et sä saa sitä ajaxillakaan toimimaan.
Unohda siis kokonaan toi ajaxin "data"-osio ja urliin laitat ihan sen $(this).attr("href"); -arvon.
Poistolinkin hreffiin laitat vaikka koko rimpsun:
ki_base/ki_deleteimage.php?ki_galleries=foo&gallery=bar&file=foobar.jpeg&thumb=kissa2";
Tosin, tuossa ehkä kannattaisi tosiaan käyttää vaikka lomaketta, ja post-määrettä, jolloin ei vahingossakaan jäisi selaimen historiaan merkintää. Tosin, en jaksa sun kanssa taas sen toiminnasta alkaa vääntämään.
Nyt tämä toimii ilman Ajaxia. Jostakin syystä tämä toimii aika nopeasti, vaikka sivussa on päivitettävää. Sivun päivittäminen ei muuten automaattisesti poista kuvaa listalta, koska listan kuvatiedot poimitaan arraysta, ei hakemistoa selaamalla.
Sivun päivityksen yhteydessä siihen lisätään get muuttuja &response=img_13, jolla tuodaan id-tieto. Sitten vain tällainen lyhyt skripti:
<?php if(isset($_GET['response'])){ ?>
<script type="text/javascript">
<?php $idname =$_GET['response']; ?>
document.getElementById("<?php echo $idname;?>").innerHTML=' ';
</script>
<?php } ?>Vielä on kesken se, että kuvatieto täytyy poistaa tuosta mainitsemastani arraysta, jotta se ei häiritse admin-sivulla. (Se poistuu automaattisesti kun kuvagalleriaa selaa pääsivulla).
Ps. Rivi, joka sisätää yhden kuvan tiedon, on kauhean pitkä. Tässä esimerkki yhdestä rivistä lähdekoodista poimittuna:
<span id="img_1"><a class="delete" href="http://localhost/oc_155/admin/index.php?route=line/kigallery/deleteimage&token=0a2ef3d691963aa7b03baac6b9662214&id=img_1&ki_galleries=ki_galleries/&gallery=utsjoki&file=Kuva0580.jpg&thumb=1383420118Kuva0580.jpg&folder=0"><img class="gallery" src="../ki_base/ki_makepic.php?file=utsjoki/Kuva0580.jpg&width=120&height=130"></a> </span>
pistemies kirjoitti:
Nyt tämä toimii ilman Ajaxia. Jostakin syystä tämä toimii aika nopeasti, vaikka sivussa on päivitettävää. Sivun päivittäminen ei muuten automaattisesti poista kuvaa listalta, koska listan kuvatiedot poimitaan arraysta, ei hakemistoa selaamalla.
Sivun päivityksen yhteydessä siihen lisätään get muuttuja &response=img_13, jolla tuodaan id-tieto. Sitten vain tällainen lyhyt skripti:<?php if(isset($_GET['response'])){ ?> <script type="text/javascript"> <?php $idname =$_GET['response']; ?> document.getElementById("<?php echo $idname;?>").innerHTML=' '; </script> <?php } ?>Vielä on kesken se, että kuvatieto täytyy poistaa tuosta mainitsemastani arraysta, jotta se ei häiritse admin-sivulla. (Se poistuu automaattisesti kun kuvagalleriaa selaa pääsivulla).
...
Kuulostaa juuri niin purkkaviritelmältä, kuin pelkäsinkin...
Lebe80 kirjoitti:
Kuulostaa juuri niin purkkaviritelmältä, kuin pelkäsinkin...
Joo, pitää olla jotain purtavaa...
Sain tähän nyt tehtyä sen homman, että kuva-arraysta tyhjennetään poistetun kuvan tieto, niin nyt ei tartte tuo javascript-pätkääkään tähän.
Jos nyt koodi toimii ilman JavaScriptia, enää ei tarvitse kuin sitoa linkkiin tai nappiin tapahtumankäsittelijä, joka lähettää samanlaisen pyynnön (ja aiemmin mainitun AJAX-otsikon tai ajax=1-parametrin) ja saa vastaukseksi esimerkiksi CSS-valitsimen, jonka perusteella sivulta poistetaan tavaraa. Alkeellinen toteutus voisi mennä jotenkin näin:
<?php poista(kuva); if (tunnista_ajax()) { header("Content-Type: application/json"); die(json_encode(array("status" => "ok", "remove" => "img#jokin_id"))); } else { header("Location: kuvalista.php"); }
$("a.poistolinkki").click(function(e) {
e.preventDefault();
$.ajax(this.href).success(function(json) {
if (json.status == "ok" && json.remove) {
$(json.remove).remove();
}
});
});Metabolix kirjoitti:
Alkeellinen toteutus voisi mennä jotenkin näin:
Pöljyys ei tule yksin, vai miten se sanonta menikään.
En oikein pysy kärryillä mihin kohtaan tuo ylempi example pitäisi tulla? Oliko tarkoitus palauttaa nuo tiedoston poiston jälkeen... entä tuo
if (tunnista_ajax())
oliko tuo vain pelkkää teoriaa...
Ps. Olen yritellyt asentaa tätä hommaa verkkoon. Näyttäisi olevan hirvittävän hidas minun kotikoneen palvelimeen verrattuna.
Minun pitäisi varmaan kehitellä tähän jokin kohtuullinen tiedoston koon rajoitin. Tämä on aikaisemmin mainitsemani Koschtit Gallery. Siinä tiedostossa upload.php sallittiin jopa kuvakoko, jonka leveys ja korkeus on 10000 pikseliä.
Pienensin sitä 3000 pikseliin. Sekin taitaa olla liikaa... pitää muuttaa se niin että sen voi asettaa moduulin asetukisista.
Ps ps: Tuosta voi katsoa tuota gallerian esimerkkikuvien pääsivua:
http://www.pm-netti.com/point/index.php?route=line/gallery
Admin puoli ei ole vielä katselukelpoinen.
pistemies kirjoitti:
Ehdin viimein testaamaan ja tällähän se toimii.
$("a.delete").click(function(e){ e.preventDefault(); $.ajax({ type : "POST", data : , url: $(this).attr("href"), success: function(data,responseText) { alert(responseText); } }); });Tuo Metaboloixin juttu taisi olla pelkkää huumoria..... en edes moista kokeillu.
Ai sä vihdoin ja viimein päätit testasit sitä mun ehdottamaani koodia.
edit:
Sä poistitkin viestisi.
Lebe80 kirjoitti:
Sä poistitkin viestisi.
Öö, joo.
Olin illalla liian väsynyt. Hoksasin aamulla että se taitaa poistaa kuvia ilman ajaxia, kun ei tuo alert-ikkuna tule näkyviin... tuossa skriptissä minulla oli sivunvääntö. Vaikka ajax tomisikin, niin se redirect päivittää sivun. Niimpä muutin sitä niin, että kuvan poisto tapahtuu samalla sivulla ilman sivun päivitystä. Testaus on sitte helpompaa.
Lisäys:
Tällä sain nyt sitte viimein toimimaan. Monta siinä oli pikkusta oravaa päässy koodin sekaan.
$("a.deleted").click(function(e){
e.preventDefault();
$.ajax({
type : "GET",
data : "ajax=1",
url: $(this).attr("href"),
success: function(responseText) {
document.getElementById("delsuccess").innerHTML = "<?php echo $text_delete_success;?>";
}
});
});Tuo data-kenttä ei saanut olla tyhjä, ainakaan tällä GET-hommalla, en testannu moista POSTilla. Pitää vielä tuossa päivittää se span id-jossa kuva sijaitsee...
pmies kirjoitti:
Tuo data-kenttä ei saanut olla tyhjä
Sen verran tarkennusta, että toimi ilmankin mutta sivu räiskyi turhan paljon, jotenkin aktivoitui.
Tässä kun muistin, niin kiitos Lebe80, tämä on nyt saatu kaikin puolin kuntoon.
Lopullinen skripti, joka tekee kaiken on tämä:
$("a.deleted").click(function(e){
e.preventDefault();
var idname = getParam($(this).attr("href"),'id');
$.ajax({
type : "GET",
data : "ajax=1",
url: $(this).attr("href"),
success: function() {
var sbox = '<div id="ajaxsucc">';
sbox += '<?php echo $text_delete_success;?>';
sbox += '</div>';
$('#delsuccess') .html(sbox);
$('#' + idname) .html("");
}
});
});Niin siis, data kenttä pitää jättää kokonaan pois, jos sen jättää tyhjäksi.
Mutta hyvä että toimii.
Aihe on jo aika vanha, joten et voi enää vastata siihen.