Minulla on koodi, jossa on tarkoitus tulostaa tietoa sivulle valitusta radio-buttonista. Tämä nyt aina tulostaa arraysta sen mukaan, mikä radionappula on listassa ensimmäisenä. Miten voisi tunnistaa tuon valinnan?
Koodi on nyt tämän tapainen:
$(".size0").click(function(e){
e.preventDefault();
var array0 = [];
array0[845f] = 'jotaki';
array0[y67s] = 'jotaki2';
array0[90s2] = 'jotaki3';
var size = $("input[name='lista[0][size]']").val();
var str = array0[size];
$("#style0").html(str);
});Oisko jotain tähän suuntaan?
<input type="radio" name="lista[0]" value="asdsad" class="klikkaa" />asdsad <input type="radio" name="lista[0]" value="wererwe" class="klikkaa" />wererwe <div id="out"></div>
var out = $ ( "div#out" );
var radioInfo = {
asdsad : "Eka valinta",
wererwe : "Toka valinta"
};
$ ( "input.klikkaa" ).click (
function ( e ) {
e.preventDefault ();
out.html ( radioInfo [ $ ( this ).val () ] );
}
);Edit: lisäsin inputin selectoriin "input".
Kiitos.
Tuolla tosiaan valitsee oikeat tiedot sivulle. Yksi pulma kuitenkin on. Kun klikkaa radionappulaa, valinta siinä ei vaihdu. Radionappula pitäisi tulla valituksi eikä toimia pelkkänä linkkinä tähän html:ään. Sille pitäisi kai tehdä oma toimintonsa, onnistuuko jotenkin add-komennolla?
pistemies kirjoitti:
Radionappula pitäisi tulla valituksi eikä toimia pelkkänä linkkinä tähän html:ään.
Se, että radionappi ei tule valituksi, johtuu rivistä
e.preventDefault ();
Laitoin sen mukaan, koska se oli sinunkin koodissasi. Ota se pois, niin homma toimii kuten toivot.
Lisäys: event.preventDefault-funktio siis estää sen toiminnon, jonka kyseinen eventti oletuksena laukaisee. Tässä tapauksessa tuo estetty toiminto on napin valitseminen.
Kiitos. Tässä oppii aina uutta :)
Tosin tämä on melkoinen viritys. Javascript-koodin luon suurelta osin php-silmukassa, koska noita radiobuttonin tietoja voi muuttaa vapaasti.
Jees :)
Tuohon löytyy varmasti joku kätevämpikin ratkaisu. Harvemmin sitä joutuu tulostelemaan vastaavanlaista javascriptiä loopissa.
Toisaalta, kun nuo arrayn tiedot joka tapauksessa haetaan tietokannasta ja tulostetaan php:llä, ei tuo haittaa tässä mitään.
Älä räpellä. Tee staattista javascriptiä ja hae tarvittavat tiedot ajaxilla palvelimelta erikseen. Koodin generointi ohjelmallisesti on joskus ihan ok mutta tällaisissa tilanteissa se on hirvittävää purkkaa. Tai jos ajax tuntuu tarpeettoman monimutkaiselta ratkaisulta, niin elementteihin voi tulostella data-attribuutteja, joista voi hakea tietoa js:llä.
The Alchemist kirjoitti:
Älä räpellä. Tee staattista javascriptiä ja hae tarvittavat tiedot ajaxilla palvelimelta erikseen. Koodin generointi ohjelmallisesti on joskus ihan ok mutta tällaisissa tilanteissa se on hirvittävää purkkaa. Tai jos ajax tuntuu tarpeettoman monimutkaiselta ratkaisulta, niin elementteihin voi tulostella data-attribuutteja, joista voi hakea tietoa js:llä.
Joskus se purkka saattaa olla kätevämpi vaihtoehto.
Kyseessä on php:n foreach-silmukka, jossa jokaiseen silmukkaan pitää saada javascriptiä mukaan. Ja sen javascriptin pitää tietää kuuluvansa juuri tiettyyn php-silmukkaan. Olisihan se varmaan kohtalaisen suuri jQuery skripti, jossa ei käytettäisi lainkaan php:n valmista foreach silmukkaa apuna.
pistemies kirjoitti:
Olisihan se varmaan kohtalaisen suuri jQuery skripti, jossa ei käytettäisi lainkaan php:n valmista foreach silmukkaa apuna.
Ei todellakaan olisi.
The Alchemist kirjoitti:
Ei todellakaan olisi.
Riippuu aika paljon siitä mitä ollaan tekemässä.
Minä olen tehnyt tässä tekemääni verkkokaupan moduulin admin-puolelle esikatselun sekä css-tyylen muokkauksen. Tosin tässä silmukassa voi olla kaksi tai ehkä enintään kolme moduulia.
pistemies kirjoitti:
Joskus se purkka saattaa olla kätevämpi vaihtoehto.
Hyvin hyvin hyvin hyvin harvoin. Ja muiden haittojen takia järkevämpi vaihtoehto tuskin koskaan.
pistemies kirjoitti:
Riippuu aika paljon siitä mitä ollaan tekemässä.
Riippuu kylläkin lähinnä taidoista. Jos et osaa tehdä niitä oikeita ratkaisuja mutta osaat tehdä purkkaa, tietenkin silloin purkka tuntuu helpolta ja muut vaihtoehdot vaikeilta. Kannattaa silti opetella lisää, ettei jää ikuisesti purkkatasolle.
Jo perustelustasi näkee, että metsään mennään: JavaScriptissa on for-silmukka ja jQueryssa each-funktio, joten ei varmasti ole tilannetta, jossa PHP:n foreach-silmukka antaisi jonkin ylivertaisen edun.
Toisaalta tähän ongelmaan ei tarvita omaa silmukkaa lainkaan. Jotain likimain aloitusviestiin sopivaa voi tehdä esimerkiksi näin:
<script>
$(function() {
$("#info-radio input[type=radio]").click(function() {
$("#info").text($(this).data("info"));
});
});
</script>
<fieldset id="info-radio">
<label><input name="x" type="radio" data-info="Apina" /> a</label>
<label><input name="x" type="radio" data-info="Banaani" /> b</label>
<label><input name="x" type="radio" data-info="Cembalo" /> c</label>
</fieldset>
<div id="info"></div>Oho, JS-osuudestahan tuli vain entistä lyhyempi!
Metabolix kirjoitti:
<script> $(function() { $("#info-radio input[type=radio]").click(function() { $("#info").text($(this).data("info")); }); }); </script>
Kiinnostavaa.
Mietinkin juuri ajax juttelua tuolle hommalle. Admin puolella on se pakollinen session, mutta sen voinee tarkistaa myös jQuerylla ja lisätä linkkiin.
Lisäys:
Ei tuo MB:n esimerkki löytänyt tuulta alle. Minusta tämä on vielä lyhyempi:
$(".size0").click(function(){
var up = $(this).val();
});Tämä olisi niin pikku homma että onnistuisi kai getilläki.
Tuossa tulostuu tuohon alertiin, mutta en ole ole saanut purettua sitä siitä.
var open = $.get('index.php?jotaki'+up, function(data) {
alert(data);
});Varmaankin. Oliko tuossa joku kysymys vai totesitko vaan?
Totesin että meinaa tökkiä :)
Sain nyt toimimaan. Laitoin kunnon tekstikoon jotta hoksaa....
var open = $.get('index.php?jotaki'+up).success(function(data) {
var out = $("#out0");
out.html('<h1>'+data+'</h1>');
});Pitää tuota yrittää parsia json encode muodosta ja lisätä siihen muotoilu-tageja lisää tuolla alkupäässä
pistemies kirjoitti:
Ei tuo MB:n esimerkki löytänyt tuulta alle.
Millähän tavalla? Taas kerran aloit räplätä jotain omiasi edes selvittämättä kunnolla, miten koodini toimii – ilmeisesti et vain onnistunut kopioimaan koodia suoraan omasi sekaan. Jos et osaa, selitä ongelmasi ja kysy neuvoa!
Tein nyt ihan live-esimerkin [linkki poistettu myöhemmin, koodi alla], jotta näet, että koodini todella toimii. Askartelin siihen myös versiot ilman jQuerya ihan vain näyttääkseni, että edes jQuery ei ole tässä välttämätön.
<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lisätiedon hakeminen data-attribuutista JavaScriptilla</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript">
// jQuery:
$(function() {
$("#jquery-info-radio input[type=radio]").click(function() {
$("#info").text($(this).data("info"));
});
});
// Vanhat DOM-rajapinnat:
window.onload = function() {
var f = function() {
document.getElementById("info").innerHTML = this.getAttribute("data-info").replace(/</g, "<").replace(/>/g, ">");
};
var a = document.getElementById("js-vanha-info-radio").getElementsByTagName("input");
for (var i = 0; i < a.length; ++i) {
if (a[i].type == "radio") {
a[i].onclick = f;
}
}
};
// Uudemmat DOM-rajapinnat:
document.addEventListener("DOMContentLoaded", function() {
var f = function() {
document.getElementById("info").textContent = this.dataset["info"];
};
var a = document.querySelectorAll("#js-uusi-info-radio input[type=radio]");
for (var i = 0; i < a.length; ++i) {
a[i].addEventListener("click", f);
}
});
</script>
</head>
<body>
<p>Seuraavilla radiopainikkeilla on attribuutti data-info, jonka sisältämä teksti näytetään viimeisessä laatikossa, kun elementti valitaan.</p>
<p>Ensimmäinen joukko toimii jQuery-kirjastolla, toinen on tehty vanhoilla DOM-rajapinnoilla ja kolmas nykyaikaisilla DOM-rajapinnoilla. JS-koodi sisältyy tämän sivun lähdekoodiin.</p>
<fieldset id="jquery-info-radio">
<legend>jQuery</legend>
<label><input name="x" type="radio" data-info="Apina" /> a</label>
<label><input name="x" type="radio" data-info="Banaani" /> b</label>
<label><input name="x" type="radio" data-info="Cembalo" /> c</label>
</fieldset>
<fieldset id="js-vanha-info-radio">
<legend>Vanhat DOM-rajapinnat</legend>
<label><input name="x" type="radio" data-info="Delfiini" /> d</label>
<label><input name="x" type="radio" data-info="Elefantti" /> e</label>
<label><input name="x" type="radio" data-info="Fagotti" /> f</label>
</fieldset>
<fieldset id="js-uusi-info-radio">
<legend>Uudet DOM-rajapinnat</legend>
<label><input name="x" type="radio" data-info="Gongi" /> g</label>
<label><input name="x" type="radio" data-info="Haitari" /> h</label>
<label><input name="x" type="radio" data-info="Isorumpu" /> i</label>
</fieldset>
<fieldset>
<legend>Info</legend>
<div id="info">Valitse jotain</div>
</fieldset>
<p>Esimerkin on tehnyt Lauri Kenttä (nimimerkki Metabolix). Älä kopioi, jos et ymmärrä koodia!</p>
</body>
</html>Mikä tuossa vielä on ongelmana? Jos haluat HTML-koodia, vaihda vain text-funktion tilalle html-funktio ja laita data-attribuuttiin HTML-koodia (htmlspecialchars-koodattuna).
pistemies kirjoitti:
Minusta tämä on vielä lyhyempi:
$(".size0").click(function(){ var up = $(this).val(); });
Nyt mitä ihmettä? Minusta tämä on vielä lyhyempi: {}. Erona kuitenkin on, että aiemmin antamani koodi toimii täysin (näyttää infotekstit), kun taas sinun koodisi ei tee mitään. Aika turha siis vertailla näiden pituuksia.
Metabolix kirjoitti:
Millähän tavalla?
Minulla se moitti "object Object" ikään kuin kyseessä olisi ollut array ja tarvinnut vielä lisää tulostettavaa.
Toisaalta tuo radiobuttonin value sisältää vain 8 merkkiä, jotka viittaa mysql-taulun sarakkeessa olevaan merkintään ja näin haetaan tieto oikealta riviltä.
Kiitos kuitenkin, katson sinun esimerkkiäsi lähemmin.
pistemies kirjoitti:
Metabolix kirjoitti:
Millähän tavalla?
Minulla se moitti "object Object" ikään kuin kyseessä olisi ollut array ja tarvinnut vielä lisää tulostettavaa.
Toisaalta tuo radiobuttonin value sisältää vain 8 merkkiä, jotka viittaa mysql-taulun sarakkeessa olevaan merkintään ja näin haetaan tieto oikealta riviltä.
Kiitos kuitenkin, katson sinun esimerkkiäsi lähemmin.
...
Niin onkos sulla se ajaxilla ladattava tiedosto kunnossa? Eli toimiikos se halutulla tavalla? Viittaisi, että se on sulla täysin vaiheessa.
pistemies kirjoitti:
Metabolix kirjoitti:
Millähän tavalla?
Minulla se moitti "object Object" ikään kuin kyseessä olisi ollut array ja tarvinnut vielä lisää tulostettavaa.
En ymmärrä, millä ihmeen tavalla minun koodistani voisi tulla tuollainen teksti. Mihin se teksti edes tuli? Selvästi et ole testannut minun koodiani vaan jotain koodia, jota olet jo itse yrittänyt muokata (väärin). Minun koodissani ei käytetä lainkaan radiopainikkeiden arvoja eikä AJAXia eikä haeta MySQL:stä mitään, joten selityksesi ei oikein liity asiaan.
Lebe80 kirjoitti:
Niin onkos sulla se ajaxilla ladattava tiedosto kunnossa? Eli toimiikos se halutulla tavalla? Viittaisi, että se on sulla täysin vaiheessa.
Kunnossa on. Kun avaa tuon sivun osoitteeen selaimessa tulostaa json_enkoodatut tekstit. Sivullekkin ne tulostuu nyt haluttuun kohtaan. Tosin nyt siinä on pulma noiden tagien kanssa, </td> tulostuu <\/td> jne. Tuotakin vois tietty muuttaa labeliksi, mutta siis se ongelma säilyy...
Metabolix kirjoitti:
joten selityksesi ei oikein liity asiaan.
Selitykseni liittyy siihen mitä olen tekemässä.
pistemies kirjoitti:
Lebe80 kirjoitti:
Niin onkos sulla se ajaxilla ladattava tiedosto kunnossa? Eli toimiikos se halutulla tavalla? Viittaisi, että se on sulla täysin vaiheessa.
Kunnossa on. Kun avaa tuon sivun osoitteeen selaimessa tulostaa json_enkoodatut tekstit. Sivullekkin ne tulostuu nyt haluttuun kohtaan. Tosin nyt siinä on pulma noiden tagien kanssa, </td> tulostuu <\/td> jne. Tuotakin vois tietty muuttaa labeliksi, mutta siis se ongelma säilyy...
Kauheeta säätöä. Veikkaan, että sun auttaminen olisi paljon helpompaa, jos sulla olisi tarjota valmis urli. Nythän sua joutuu neuvomaan silmät sidottuina ja arvailemaan ongelmia puutteellisten tietojen pohjalta.
Sä siis muutat html-sisällön json-muotoon (taulukoksi) ja teet sillä sen jälkeen: mitä? Tulostat suoraan html-sisällön joukkoon, ja ihmettelet miksei json-muoto näy html-muodossa?
pistemies kirjoitti:
Selitykseni liittyy siihen mitä olen tekemässä.
Voisitko sitten kertoa, mitä olet tekemässä? Aluksi kerroit näin:
pistemies kirjoitti:
Minulla on koodi, jossa on tarkoitus tulostaa tietoa sivulle valitusta radio-buttonista.
Antamani koodi tekee ihan täsmälleen juuri tämän asian, eikä siihen tarvita AJAXia tai taulukoita.
Toisaalta jos välttämättä haluat käyttää AJAXia, voit muuttaa koodia näin:
$("...").click(function() {
// Käytetään data-info-attribuuttia URLina ja ladataan AJAXilla:
$("#info").load($(this).data("info"));
});Radionappulan valinta ei ole pitkään aikaan ollut ongelma. En ole viitsinyt aloittaa uutta aihetta.
Ehkä auttaa jos luet tätä ketjua hiukka.
Eilen 10:13:32:
pistemies kirjoitti:
Kiitos.
Tuolla tosiaan valitsee oikeat tiedot sivulle.
Päätin muuttaa tietojen hakua (en radionappulan valintaa) hiukan. Tänään 8:44.03:
pistemies kirjoitti:
Mietinkin juuri ajax juttelua tuolle hommalle.
Tänään 12:57:53:
pistemies kirjoitti:
Sain nyt toimimaan. Laitoin kunnon tekstikoon jotta hoksaa....
var open = $.get('index.php?jotaki'+up).success(function(data) { var out = $("#out0"); out.html('<h1>'+data+'</h1>'); });Pitää tuota yrittää parsia json encode muodosta ja lisätä siihen muotoilu-tageja lisää tuolla alkupäässä
Lopuksi nykyinen JS-koodi, joka hoitaa kaiken tarvittavan:
$(".size0").click(function(){
var up = $(this).val();
var row = 0;
var open = $.get('index.php?route=module/offer/ajax&size='+up+'&row='+row). success(function(data) {
var out = $("#out0");
out.html(data);
});
});Minusta se, että olet "miettinyt juuri ajax juttelua", ei mitenkään kerro, että yrität täysin tarpeettomasti kaikkia – myös aiemmin annettuja – koodeja puukottaa väkisin käyttämään AJAXia. Mutta hienoa, että sait koodisi toimimaan. Tuossa on kyllä järjettömästi turhia muuttujia ja jälleen ihan ihmeellinen sisennys.
Jos valintoja ei ole kerralla näkyvillä kovin monta (esim. vain parikymmentä) ja info tulee tietokannasta helposti samalla kertaa kuin muut valinnan tiedot (esim. tuo value) ja tiedetään, että käyttäjä luultavasti klikkaa ainakin jotain valintaa, olisi varmaan tehokkaampaa käyttää data-attribuutteja, kuten esimerkissäni tehdään. Ylimääräiset pyynnöt ovat käyttäjän kannalta hidaste ja kuormittavat palvelinta.
Metabolix kirjoitti:
Tuossa on kyllä järjettömästi turhia muuttujia ja jälleen ihan ihmeellinen sisennys.
Kyllä nuo muuttujat osaltaa selventävät hommaa.
Tuo ajax on minusta tähän ihan kätevä, tuohan se tietokannasta tavaraa sivulle muutaman kilotavun verran.
Metabolix kirjoitti:
Jos valintoja ei ole kerralla näkyvillä kovin monta (esim. vain parikymmentä) ja info tulee tietokannasta helposti samalla kertaa kuin muut valinnan tiedot (esim. tuo value) ja tiedetään, että käyttäjä luultavasti klikkaa ainakin jotain valintaa, olisi varmaan tehokkaampaa käyttää data-attribuutteja, kuten esimerkissäni tehdään. Ylimääräiset pyynnöt ovat käyttäjän kannalta hidaste ja kuormittavat palvelinta.
Valintoja on tällä hetkellä vain viisi. Tuotteen käyttäjä voi toki lisätä valintoja kätevästi siten, että lisää image/style hakemistoon kuvatiedoston, jonka nimen loppuosa on muotoa "-600x456.png". Tällöin "s600x456" tulee automaattisesti yhdeksi radiobuttonin valinnaksi. Etukäteen ei ole valittu mitään nappia, jotta käyttäjän sitten on pakko klikata sitä ja avata tietokannasta Css:n default-asetukset valitulle boxin koolle.
On vaan tuo pikku ongelma että sotkeutuu tagit, kuten aiemmin mainitsin.
No millä tavalla se on sitten väärin, jos tuotetta klikatessa tuotteen tiedot tulostuvat hallitusti oikeaan tagiin? Tämähän olisi minusta kaikkein loogisinta toimintaa koodilta. Tagien sekoaminen ja holtiton hakeminen ja tulostaminen ehkä sitten vähän vähemmän loogista.
Toisaalta voisit aivan hyvin hakea ja tulostaa kaikkien tuotteiden tiedot ja sitten jqueryllä (javascriptillä tai css:ä) piilotat ne pois. Tällöin ei javascriptiä käyttävät saisivat tiedot ja javascript asiakkaat saisivat tarpeettomat datat piiloon.
Sain tämän laiteltua, siinä kummitteli mokoma tuo vanha json_encode-tulostus:)
Aihe on jo aika vanha, joten et voi enää vastata siihen.