Keskustelu: Nettisivujen teko: jQuery: oikeaan tekstikenttään arvon palautus

jQuery koodi

/**
* Main jQuery media file for the plugin.
*
* @since 1.0.0
*
* @package TGM New Media Plugin
* @author Thomas Griffin
*/
jQuery(document).ready(function($){
    // Prepare the variable that holds our custom media manager.
    var tgm_media_frame;

    // Bind to our click event in order to open up the new media experience.
    $(document.body).on('click.tgmOpenMediaManager', '.tgm-open-media', function(e){
        // Prevent the default action from occuring.
        e.preventDefault();

        // If the frame already exists, re-open it.
        if (tgm_media_frame) {
            tgm_media_frame.open();
            return;
        }

        tgm_media_frame = wp.media.frames.tgm_media_frame = wp.media({
            className: 'media-frame tgm-media-frame',
            frame: 'select',
            multiple: false,
            title: tgm_nmp_media.title,

            library: {
                type: 'image'
            },
            button: {
                text: tgm_nmp_media.button
            }
        });

        tgm_media_frame.on('select', function(){
            // Grab our attachment selection and construct a JSON representation of the model.
            var media_attachment = tgm_media_frame.state().get('selection').first().toJSON();

            // Send the attachment URL to our custom input field via jQuery.
            $('#tgm-new-media-image').val(media_attachment.url);
        });

        // Now that everything has been set, let's open up the frame.
        tgm_media_frame.open();
    });
});

<!-- alustana on siis WordPress -->
<input type="text" id="tgm-new-media-image" value="<?php echo $liikkeet[$a]->logourl; ?>" name="imglink[<?php echo $liikkeet[$a]->id; ?>][1]" />

<!-- tämä nappi avaa skriptin -->
<?php echo '<a href="#" class="tgm-open-media button button-secondary">Selaa kuvia</a>'; ?>

Tuo jQuery-sekoilu avaa siis WordPressin oman Media Managerin, josta käyttäjä hakee oikean kuvan ja jonka linkki pitäisi sitten palautua oikeaan tekstikenttään. Tuo toimii hyvin, jos kenttiä on vain yksi, mutta lisäosassani kenttiä on useita. Kuinka siis saan selvitettyä oikean tekstikentän id:n, johon palauttaa linkki?

Eipä ole ennen tullut javascriptin ja jqueryn kanssa tullut leikittyä, joten itsellä ole hajuakaan, mistä lähtä liikkeelle. :D

En jaksa testata koodiani, kun mulla ei WordPressiä ole, mutta olettaisin tällaisella tavalla toimivan. Ainoa muokkaus on siis se, että kerrotaan oikea inputti käyttäen data-attribuuttia. Inputti haetaan js:n puolella muuttujaan target_input.

<input id="foobar" name="image" type="text"/>
<a data-tgm-target="#foobar">Select image</a>

jQuery(document).ready(function($){
    // Prepare the variable that holds our custom media manager.
    var tgm_media_frame;

    // Bind to our click event in order to open up the new media experience.
    $(document.body).on('click.tgmOpenMediaManager', '.tgm-open-media', function(e){
        // Prevent the default action from occuring.
        e.preventDefault();

        var target_input = $($(this).data('tgm-target'));

        // If the frame already exists, re-open it.
        if (tgm_media_frame) {
            tgm_media_frame.open();
            return;
        }

        tgm_media_frame = wp.media.frames.tgm_media_frame = wp.media({
            className: 'media-frame tgm-media-frame',
            frame: 'select',
            multiple: false,
            title: tgm_nmp_media.title,

            library: {
                type: 'image'
            },
            button: {
                text: tgm_nmp_media.button
            }
        });

        tgm_media_frame.on('select', function(){
            // Grab our attachment selection and construct a JSON representation of the model.
            var media_attachment = tgm_media_frame.state().get('selection').first().toJSON();

            // Send the attachment URL to our custom input field via jQuery.
            target_input.val(media_attachment.url);
        });

        // Now that everything has been set, let's open up the frame.
        tgm_media_frame.open();
    });
});

Ylempi toimii, mutta vähän hassusti, ehkä kuva auttaa havainnollistamaan :)
http://imgur.com/IumUI3H

Mikäli painaa ylempää nappia, kuvan linkki palautuu aina ylempään tekstikenttään, myös alemmasta napista. Ja mikäli taas painaa alempaa nappia, kuvan linkki palautuu aina alempaan tekstikenttään, myös ylemmästä napista painettuna.
Tämän saa siis vaihtumaan lataamalla sivun uudestaan.

HTML näyttää tällä hetkellä tältä:

<tr>
    <td>Logo</td>
    <td>
		<input type="text" id="foobar1" size="45" value="" name="imglink" />
		<?php echo '<a href="#" data-tgm-target="#foobar1" class="tgm-open-media button button-secondary">Selaa kuvia</a>'; ?>
	</td>
  </tr>

  <tr>
	<td>Iso logo</td>
	<td>
		<input type="text" id="foobar2" size="45" value="" name="bigimglink" />
		<?php echo '<a href="#" data-tgm-target="#foobar2" class="tgm-open-media button button-secondary">Selaa kuvia</a>'; ?>
	</td>
  </tr>

Mod. korjasi PHP-koodille PHP-kooditagit!

Mitä nyt pikaisesti tuota New-Media-Image-Uploader plugaria katsoin, niin tällä hetkellä ei ole tukea usealle kilkkeelle jotka on samalla sivulla. Useamman tiedoston uppaus yhdellä kontrollilla näytti kyllä olevan mahdollista jos asian voi sillä hoitaa:

/**
+             * We can determine whether or not we want to allow users to be able
+             * to upload multiple files at one time by setting this parameter to
+             * true or false. It defaults to true, but we only want the user to
+             * upload one file, so let's set it to false.
+             */
+            multiple: false,

Tietenkin voit itse muokata alkuperäistä js:ää tai tehdä widgetin, jossa itse toiminto määritettäisiin omaa attribuuttiasi (vaikka data-xxxx attribuuttia) vastaavaan elementtiin.

Ongelmasi on, että select-käsittelijään jää ensimmäisen suorituskerran target_input-muuttuja. Laita muuttujan määrittely (var target_input) funktion ulkopuolelle eli pari riviä ylemmäs, niin muuttuja pysyy samana. Arvon asetus kuuluu silti entiselle paikalleen, eli siltä riviltä pitää vain poistaa var-sana.

Itse suosin yleensä sivun rakenteen hyödyntämistä elementin etsimisessä. Tässä on muutamia vaihtoehtoja:

target_input = $(this).prevAll("input[type=text]");
target_input = $(this).closest("tr").find("input[type=text]");
target_input = $(this).closest(".tgm-row").find("input.tgm-target");

Ensimmäinen vaatii juuri tuollaisen HTML-rakenteen, toinenkin on riippuvainen taulukosta mutta kolmas käyttää class-attribuuttia ja on siten melko riippumaton rakenteesta, kunhan painike on tgm-row-luokan elementin sisällä ja sama elementti sisältää vain yhden tgm-target-tekstikentän. Tämän touhun etu edelliseen ratkaisuun nähden on, että ei tarvitse keksiä jokaiselle elementille id:tä ja siis rivien lisääminen on helpompaa. Toisaalta jos sivun rakenne on hyvin hankala, tämä tapa ei välttämättä ole käytännöllinen.

Vastaisen varalta tutustu edes vähän jQueryn tarjontaan, http://api.jquery.com/category/traversing/tree-traversal/.

tuolla plugarin dokumentoinnissa (tai itse asiassa bugiosastolla), oli että ei tue useita kilkkeitä per sivu. Ilmeisesti palauttaa kamat luokan mukaan, ja jos sama luokka on kahdella kontrollilla, palautuu $(".luokka") elementistä vain ensimmäinen löydetty kikkare jota itse plugari käyttää. Näin ainakin itse ymmärsin.

No nythän tämä lähti toimimaan, kiitos kaikille avusta jälleen kerran!
Pitää tosiaan seuraavaksi ruveta vääntämään jotain javascript ja jquery -proggista, jotta noitakin kieliä oppisi tulkitsemaan.

Metabolix kirjoitti:

Itse suosin yleensä sivun rakenteen hyödyntämistä elementin etsimisessä. Tässä on muutamia vaihtoehtoja:

target_input = $(this).prevAll("input[type=text]");
target_input = $(this).closest("tr").find("input[type=text]");
target_input = $(this).closest(".tgm-row").find("input.tgm-target");

Ensimmäinen vaatii juuri tuollaisen HTML-rakenteen, toinenkin on riippuvainen taulukosta mutta kolmas käyttää class-attribuuttia ja on siten melko riippumaton rakenteesta, kunhan painike on tgm-row-luokan elementin sisällä ja sama elementti sisältää vain yhden tgm-target-tekstikentän. Tämän touhun etu edelliseen ratkaisuun nähden on, että ei tarvitse keksiä jokaiselle elementille id:tä ja siis rivien lisääminen on helpompaa. Toisaalta jos sivun rakenne on hyvin hankala, tämä tapa ei välttämättä ole käytännöllinen.

Minä taas en jaksa olla koko ajan purkkailemassa koodiani, vaan tykkään käyttää vanhoja palikoita uudestaan, koska teen ne alun pitäenkin hyvin. Tarpeetonta sitoa javascriptiä css-luokkanimiin ja html:n rakenteeseen, kun juuri tuohon tarkoitukseen data-attribuutit ovat parempia. Sen näkee jo esimerkkejämme vertailemallakin.

Minun esimerkkini ei edes vaatinut elementeille id:itä, ihan sama olisi vaikka ollut käyttää name-attribuuttia, joka on yksilöivä tunniste sekin. Myös jonkin parent-elementin id:llä selviäisi. En ymmärrä valitusta id-attribuuteista millään muotoa, kun väistämättäkin hyvälaatuisessa html-dokumentissa niitä on riittävässä määrin.

The Alchemist kirjoitti:

Minun esimerkkini ei edes vaatinut elementeille id:itä,

Ymmärsit varmasti aivan hyvin, ettei kommenttini kannalta ole mitään väliä, onko se yksilöivä tunniste nimeltään id, name vai data-yuccan-roskat-the-alchemistin-housuissa.

Jos koko blokkia halutaan monistaa, sinun tavallasi pitää generoida lisää näitä yksilöiviä tunnisteita. Minusta on silloin käytännöllisempää tehdä koodi alusta asti niin, että yksilöiviä tunnisteita ei tarvita. Tilanne on tietysti toinen, jos blokkia ei koskaan haluta monistaa, mutta hauskasti tämä koko keskustelu lähti juuri monistuksesta.

The Alchemist kirjoitti:

Minä taas en jaksa olla koko ajan purkkailemassa koodiani, vaan tykkään käyttää vanhoja palikoita uudestaan, koska teen ne alun pitäenkin hyvin.

Paisuttelet ilmeisesti taas jotain omatekoista ongelmaasi. Kerro lisää, niin nauretaan yhdessä.

The Alchemist kirjoitti:

Tarpeetonta sitoa javascriptiä css-luokkanimiin

HTML:n class-attribuutti ei ole mitenkään pelkästään CSS:ää varten, vaan sitä voi hyvin käyttää myös tagin nimen täydennyksenä elementin merkityksen kuvaamiseen.

Metabolix kirjoitti:

The Alchemist kirjoitti:

Minun esimerkkini ei edes vaatinut elementeille id:itä,

Ymmärsit varmasti aivan hyvin, ettei kommenttini kannalta ole mitään väliä, onko se yksilöivä tunniste nimeltään id, name vai data-yuccan-roskat-the-alchemistin-housuissa.

Jos koko blokkia halutaan monistaa, sinun tavallasi pitää generoida lisää näitä yksilöiviä tunnisteita.

Mahdoitkohan sinä ymmärtää, kun pilkoit tuon yhden lauseen kontekstista irti ja samalla hävitit kaiken logiikan sanomisistani? Hyvin laaditussa html-dokumentissa on luultavasti riittävästi id-attribuutteja joko itse kohde-elementillä tai sitten jollain sen parentilla. Yleensä tällaiset toistuvat konstruktiot sitä paitsi tuotetaan ajonaikaisesti koodissa, joten yksilötunnisteiden lisääminen ei olisi hankalaakaan.

Metabolix kirjoitti:

The Alchemist kirjoitti:

Minä taas en jaksa olla koko ajan purkkailemassa koodiani, vaan tykkään käyttää vanhoja palikoita uudestaan, koska teen ne alun pitäenkin hyvin.

Paisuttelet ilmeisesti taas jotain omatekoista ongelmaasi. Kerro lisää, niin nauretaan yhdessä.

Minusta tarpeeton "kovakoodaaminen" on aina väärin. Ihan vaikka sitten siksi, että se on tarpeetonta. Tämä ei ole kehäpäätelmä. Esimerkkejämme vertailemalla huomaa, ettei geneerisyydellä ole käytännössä haittoja tälläkään kertaa, joten sitä pitäisi suosia automaattisesti. Vähemmän tulee revittyä hiuksia, kun koodia ei tarvinnutkaan lähteä korjailemaan, jos sitä halusi soveltaa hieman eri tilanteeseen kuin edellisellä kerralla.