Nettisivullani on div, jonka sisään lataan k2.php -tiedoston php:n includella. Tässä k2.php -tiedostossa on form, jonka onnistun lähettämään divin sisään itseensä k1.php sivulle joss div sijaitsee.
Ongelma tulee kun käytänkin k2.php -tiedoston lataamisen k1.php:n divin sisään ajaxia (nappula että saman divin sisään voisi ladata eri php -tiedostoja), jolloin homma loppuu toimimasta. Tiedosto kyllä latautuu hienosti divin sisään mutta kun yrittää lähettää formin se lähtee mutta ei päädy mihinkään ts k2.php häviää ruudulta. k1.php on tiedosto, jossa on "main" div, johon k2.php ladataan.
Formin lähetys k2.php:
$('#sendis').submit(function() { // catch the form's submit event
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('#main').html(response); // update the DIV
}
});
return false; // cancel original event to prevent form submitting
});Formi k2.php:
<form id="sendi" name="sendi" action="k1.php" method="post" > // Tässä ei toiminut k2.php vaan k1.php vaikka kaikki latautuu hienosti divissä olevan k2.php:n sisään. <input name="koe" type="text" value="<?php echo $koe; ?>"/> <input type="submit" name="sendis" value="testaa" /> </form>
Kilke joka lataa php tiedoston diviin k1.php sivulla:
$(document).ready(function() {
$("#Button").click(function(evt) {
$("#main").load("k2.php")
evt.preventDefault();
})
})Tämä form submit siis toimii mikäli lataan k2.php:n k1.php:n main divin sisään includella.
Mod. lisäsi kooditagit!
tuossahan sä lataat document ready:ssä k2.php:n #mainin sisään, ja ajaxissa korvaat #mainin sisällön (eli sen siellä sillä hetkellä olevan k2.php:n) ajaxista palautuvalla datalla (joka ilmeisesti ei sisällä mitään?). kokeile ladata ajaxista palautuva data johonkin toiseen diviin, niin näät mitä ylipäätään sieltä tulee (tai katso vaikka fiddlerillä). Onko ylipäätään tarkoitus korvata formi ajaxin datalla?
Eli in general, formiasi ei ladata ajaxilla, vaan rendaat sen document.ready -funktiossa #main -diviin. kun taas lähetät formisi k2.php:sessa, ajaxin palautuva data ylikirjoittaa formin, koska ylikirjoitat ajaxin responsessa #main divin, jossa itse formikin sijaitsee.
Tarkoitus on että kun k2.php lähetetään niin ajaxin data tulee samaan k2.php:n (main diviin), jossa oleva php koodi tallentaa datan kantaan. Näin siis tapahtuukin ainakin visuualisesti ja kantaan tulee täytettä jos k2.php:tä ei ole alunperin ladattu ruudulle divin sisään tuolla document.ready:llä vaan PHP:n includella.
Eli kun haluan formin diviin, klikkaan nappulaa, jolloin document.ready nappaa sen ruudulle näkyviin. Tämän jälkeen formi täytetään ja lähetetään itseensä takaisin divin sisällä. Tämän pitäisi olla lopputulos. Eli document.ready pitäisi muuttaa sellaiseksi että se oikeasti lataa k2.php:n divin sisään..?
Missä sulla noi javascriptit on? Molemmat pätkät samassa javascript-tiedostossa, vaiko noissa ajaxilla ladattavissa php-skripteissä?
Tuo document.ready on k1.php ja muut on k2.php. scriptit itsessään ovat samassa tiedostossa kuin php:tä. Koko höskä on siis kaksi tiedostoa.
Sinulla on submit-käsittelijä #sendis-elementillä, jollaista ei edes ole. Käsittelijän pitäisi olla #sendi-lomakkeella. Mielestäni kannattaisi laittaa yhtenäisyyden nimissä myös tuohon käsittelijään evt-parametri ja evt.preventDefault()-kutsu eikä käyttää return false -riviä. Lisäksi voisit alert-riveillä tarkistaa, että käsittelijä ylipäänsä ajetaan.
Kysymys kuuluu, miksei Toitsu ole mitenkään debugannu, et mitä skriptejä ajetaan ja mitä ei?
Tämän vaihdoin mutta ei muuttanut toimintaa mikä toisaalta ihmetyttää... Edelleen toimii samoin kuin aiemmin.
^^ Debuggausta olen nyt tässä kokeillut (chromen oma javascript konsoli) mutta se ei ainakaan mitään tuo esiin mikä herätäisi jotenkin huomioin. Onko suosituksia millä debuggerilla tuota kannattaisi katsoa? Chromen debuggeri vetää tyhjäksi siinä vaiheessa kun lähettää formin.
Laita nyt vaikka edes alert-rivi ennen submit-riviä, niin näet, asetetaanko käsittelijä, ja toinen alert-rivi käsittelijän sisään, niin näet, suoritetaanko käsittelijä. Konsolin tyhjeneminen johtuu siitä, että et onnistu lähettämään lomaketta AJAXilla vaan päädyt lähettämään sen normaalisti, jolloin sivu latautuu uudestaan.
Edellisestä viestistäsi en tiedä, minkä kohdan olet vaihtanut: elementin id:n vai sen preventDefault-kutsun?
Tämä oli jostain todella pienestä kiinni mutta en enää muista mistä. Sain kuitenkin toimimaan. Tähän liittyen on toinen ongelma, nimittäin takaisin päin tuleva data. Haluan palauttaa html:ää mutta aina tulee plain textinä takaisin eli koodi tulostuu ruutuun.
$.ajax({
data: {},
success: function(data, textStatus) {
try {
var errorObj = HTML.parse(data);
handleError(errorObj);
} catch(ex) {
$('#main').html(data);
}
},
dataType: 'text',
url: 'k2.php',
type: 'POST'
});Onko nyt niin että html tyyppi nimenomaan palauttaa pelkkää tekstiä eli koodi tulostuu koodina? Kokeilin text ja script samalla tuloksella. Arvatenkin asia menee taas enemmän väärin kuin ymmärrän mutta mistä kohtaa?
Toitsu kirjoitti:
Onko nyt niin että html tyyppi nimenomaan palauttaa pelkkää tekstiä eli koodi tulostuu koodina?
Opettele debuggaamaan, niin ei tarvitse kysellä.
Toitsu kirjoitti:
Haluan palauttaa html:ää – – Kokeilin text ja script
Mitä ihmettä sinä sähellät? Jos haluat html-tyyppistä dataa, niin miksi käytät plaintext- tai js-parseria? Ihan hullua taas.
Jos palvelimelta todella tulisi HTML-koodia ja se vain laitettaisiin dokumenttiin kutsulla $("#x").html(data), kaikki toimisi oikein. Selvästi koodissa siis tapahtuu jotain aivan muuta.
Itse en ainakaan ymmärrä, miksi try-lohkossa on jokin HTML.parse ja virheenkäsittely ja vasta catch-lohkossa se html:n näyttäminen. Pitäisikö lohkojen olla eri päin?
Lebe80, kehittävää. Nimenomaan opettelen samalla debuggaamaan mutta jos hakkaa siitä huolimatta päätä seinään, eikö tämä palsta ole kysymistä varten?
Alkemisti kyllä kokeilin tietenkin myös html tyyppiä ja olisi pitänyt se erikseen varmaan mainita, silti ruudulle tuli pelkkä html koodi.
En tietenkään ole mikää superultra-hyvä-koodari, jos olisin tuskin kyselisin tyhmiä täällä tai missään. Jostain on kuitenkin lähdettävä liikkeelle tässäkin asiassa.
Api.Jquery.comissa lukee datatyypeistä "The $.ajax() function relies on the server to provide information about the retrieved data. If the server reports the return data as XML, the result can be traversed using normal XML methods or jQuery's selectors. If another type is detected, such as HTML in the example above, the data is treated as text."
Tämän vuoksi kokeilin muitakin kuin html datatyyppiä, joskin lopputulos oli kaikilla sama. No, aina voi hakata päätä lsiää seinään.. :D
Toitsu kirjoitti:
Lebe80, kehittävää. Nimenomaan opettelen samalla debuggaamaan mutta jos hakkaa siitä huolimatta päätä seinään, eikö tämä palsta ole kysymistä varten?
No mikä sitten on ollut debuggauksen tulos?
1) Palvelimelta tuleva data (näkyy esim. kehittäjäkonsolin network lehdellä) on html-muotoista vai tekstimuotoista?
2) JQuery Post-komennon palauttama data on html-muotoista vai tekstimuotoista?
Jos jommassa kummassa vaiheessa data ei ole html-muotoa, niin tiedä että edellisen vaiheen koodia pitää korjata.
Jos kehittäjäkonsolin käyttäminen tuntuu ylivoimaiselta, ongelmaa voi lähteä tutkimaan yksinkertaisesti niin, että tekee palvelimelle tekstitiedoston (debug.txt), jossa lukee vaikka "<b>moi</b>", ja vaihtaa AJAX-pyynnön osoitteeksi tuon tiedoston. Jos tämä tekstitiedostoon laitettu HTML-koodi tuottaa sivulle lihavoidun tekstin moi, vika on tiedostosta k2.php tulevan datan muodossa. Jos taas tämäkin koodi ilmestyy tageineen näkyville, vika on JavaScript-koodissa – mahdollisesti juuri niissä kohdissa, joita äsken jo ihmettelin mutta joihin Toitsu ei vielä suvainnut ottaa kantaa.
Mielestäni tässä on sekavaa puhua "html-muodosta" ja "tekstimuodosta", koska HTML-koodikin on tässä tapauksessa tekstiä.
Aihe on jo aika vanha, joten et voi enää vastata siihen.