1. Tudásbázis
  2. Modulok fejlesztése
  3. JQuery kezdő lépések

JQuery kezdő lépések

Beküldte nevergone - 2008. április 22. 12.50
nevergone képe

Sziasztok!

Elég jól "elvagyok" már a Drupallal, az sem feltétlenül "lök már hanyatt", ha pár kisebb dolgot fejlesztenem kell hozzá PHP -ben. Viszont a JQuery -vel még nem sikerült megismerkednem, így arra gondoltam, teszek pár bátortalan lépést abba az irányba is. Ehhez összeállítottam egy kis alap-példát, egy kérdést, annyit kérnék, hogy ezt oldjátok meg JQuery segítségével itt (lehetőleg érthetően), hogy utána a megoldást boncolgatva, bővítgetve tudjak próbálkozni önerőből.

A példa, amit összeállítottam nagyon egyszerű:

Definiáltam egy formot két elemmel, egy rádió-box, és egy kiválasztó-elem:

function jquery_teszt_form_alter (&$form, $form_state, $form_id) {
   $form['jquery_teszt'] = array(
      '#type' => 'fieldset',
      '#title' => 'JQuery teszt mező',
      '#collapsible' => TRUE,
      '#collapsed' => FALSE,
   );
   $form['jquery_teszt']['teszt_radio'] = array (
	   '#type' => 'radios',
   	'#title' => 'teszt radio doboz',
      '#default_value' => 0, //az elso elem lesz az alapertelmezett
   	'#options' => array('alma', 'banan', 'citrom'),
   );
   $form['jquery_teszt']['teszt_select'] = array (
	   '#type' => 'select',
   	'#title' => 'teszt select doboz',
      '#default_value' => 0,
   	'#options' => array('0', '1', '2'),
   );
}

Hogyan lehetne megoldani JQuery -vel, hogy ha kiválasztok egy elemet (mondjuk az elsőt) a rádiógomboknál, akkor az ugyanolyan sorszámúra álljon rá a kiválasztó-doboz, illetve ez működjön visszafelé is: a kiválasztó-doboztól a rádiógombok felé?

Elnézést a kissé szokatlan kérdést, de anno a modul-fejlesztéssel is hasonló módon ismerkedtem meg, és bevált. :)

Fórum: 
Modulok fejlesztése
Webappz képe

Beküldte Webappz - 2008. április 22. 13.32

Meg tudnád adni a html kimenetet?
Úgy talán esetleg többet tudnék segíteni, bár ez nem 100%.
Én is nem rég barátkozom a jQuery-vel, views megjelenítés kapcsán.

0
0

Páldi Zoltán

nevergone képe

Beküldte nevergone - 2008. április 22. 14.10

A HTML forrás idevágó része:

<fieldset class=" collapsible"><legend>JQuery teszt mező</legend><div class="form-item">
 <label>teszt radio doboz: </label>
 <div class="form-radios"><div class="form-item" id="edit-teszt-radio-0-wrapper">
 <label class="option"><input type="radio" name="teszt_radio" value="0"  checked="checked"  class="form-radio" /> alma</label>
</div>
<div class="form-item" id="edit-teszt-radio-1-wrapper">
 <label class="option"><input type="radio" name="teszt_radio" value="1"   class="form-radio" /> banan</label>
</div>
<div class="form-item" id="edit-teszt-radio-2-wrapper">
 <label class="option"><input type="radio" name="teszt_radio" value="2"   class="form-radio" /> citrom</label>
</div>
</div>
</div>
<div class="form-item" id="edit-teszt-select-wrapper">
 <label for="edit-teszt-select">teszt select doboz: </label>
 <select name="teszt_select" class="form-select" id="edit-teszt-select" ><option value="0" selected="selected">0</option><option value="1">1</option><option value="2">2</option></select>
</div>
</fieldset>

Bár én úgy gondolom (ebben majd erősítsen meg, vagy cáfoljon valaki), hogy ehhez nem igazán kell a HTML forrás, hiszen a Form API -nak is az az egyik lényege, hogy elfedi azt, milyen módon kellene az adott formot HTML -ben lekódolni.

0
0

Választ szeretnél? - Új kérdés, új téma - Tesztoldal - Trollkezelés - Frissítés

Webappz képe

Beküldte Webappz - 2008. április 22. 17.12 

$(document).ready(function(){
    $("input[@type=radio]").click(function(){
      var bejelolt = $(this).val();
      $("option").filter(function (index) {
                  return index == bejelolt;
                })
                 .attr('selected', 'selected');
    });
 
    $("select").change(function(){
      var kivalasztott = $(this).val();
      $("input").filter(function (index) {
                  return index == kivalasztott;
                })
                .attr('checked', 'checked');
    });
 
});

Ebben a formában valóban nincs szükség arra, hogy tudjam, hogy hogy néz ki a HTML kimeneted, de több form elemnél már lehet, hogy nem működik. A "guruk" majd biztos tudnak egy szebbet, jobbat, de eddig ez működni látszik.
A rádió gomboknál a click eseményt, a select-nél pedig a change eseményt használtam. A kulcs momentum a filter metódus volt, mert ezzel sikerült felhasználni azt, hogy tudom, hogy hanyadik elemet választottam ki.

Remélem tudod használni.

0
0

Páldi Zoltán

snufkin képe

Beküldte snufkin - 2008. április 22. 17.47

a change eventet lehet a form-ra alkalmazni, kb ugy, ahogy a doksiban le van irva: http://docs.jquery.com/Events/change, csak ki kell cserelni a $("select option:selected").each(function () { sort radio-ra.

0
0
nevergone képe

Beküldte nevergone - 2008. április 22. 22.38

Ezt csak így dobjam bele valamilyen .js fájlba, és drupal_add_js -sel adjam hozzá a modul forrásában? Egyáltalán a modul forrásában hol adjam hozzá a JS -t?
Azért is érdekelne ez, mert ez egy "oktató" kis tesztprogram, amit majd utána nyúzok-csűrök-csavarok... :)
Köszönöm a segítséget.

Jól látom, hogy nem az adott elem "name" attributuma alapján hivatkozol az elemekre?

0
0

Választ szeretnél? - Új kérdés, új téma - Tesztoldal - Trollkezelés - Frissítés

Webappz képe

Beküldte Webappz - 2008. április 23. 09.18 

$(document).ready(function(){   
 
    $("input[@type=radio]").click(function(){
      if ($("input").attr("name") == 'teszt_radio') {	
      	var bejelolt = $(this).val();
      	$("option").filter(function (gaz) {
                  return gaz == bejelolt;
                })
                 .attr('selected', 'selected');
    }});    
 
    $("select").change(function(){
      if ($("select").attr("name") == 'teszt_select') {		
      	var kivalasztott = $(this).val();
      	$("input").filter(function (index) {
                  return index == kivalasztott;
                })
                .attr('checked', 'checked');
    }});
 
  });

Az első verzióban csak "selector" alapján hivatkoztam a form elemeire. Az újabb verzióban -
"kérésedre" - most már csak a "name" attributum meghatározott értéke (teszt_radio és teszt_select) alapjan szűkíti a kört, és csak a feltételnek megfelelő elemek esetében végzi el az attributum beállítását.
Próba képpen tedd bele egy .js fájlba és a drupal_add_js-sel hívd meg. Hogy teljesítmény szempontjából is jó legyen abban, majd a "guruk" mondják meg a tuttit. :)
0
0

Páldi Zoltán

nevergone képe

Beküldte nevergone - 2008. április 23. 09.56

Szia!

Az általad adott kódot bemásoltam egy .js fájlba, majd a form létrehozása után a jquery_teszt_form_alter függvényben behívtam a .js fájlt a drupal_add_js fügvénnyel.
Az eredmény az lett, hogy a form létrehozásakor valóban ott van a Javascript kód (leellenőriztem az útvonalat, tényleg ott van, ahol a forrásban szerepel), de az egyes form-elemekre kattintgatva nem történik semmi.
A JQuery kód pedig sajnos nem olyan, amit a Firebug -ban nyomon lehetne követni.

Köszönöm, hogy a "name" attribútumot is használtad, ugyanis az első kódban nem értettem tisztán a kiválasztást, de így már megvan, azt hiszem. :)

Ui.: Kipróbáltam, az első verzió sem megy, szóval szerintem én csinálok rosszul valamit. Meg tudnád esetleg mutatni a modulod erre vonatkozó részét?

0
0

Választ szeretnél? - Új kérdés, új téma - Tesztoldal - Trollkezelés - Frissítés

Webappz képe

Beküldte Webappz - 2008. április 23. 09.59

A jquery_update modult beállítottad?
Az igazsághoz tartozik, hogy én csak egy sima html oldalban dobtam össze a kódot és nem egy futó drupalon. Ha elküldöd a modulodat akkor megnézem drupal alatt is, hogy mi lehet a gond.
A pontosítás végett, ugye a modulod 5-ös verzióra készült?

Ui.: esetleg ha egy theme függvényben hívnád meg?

0
0

Páldi Zoltán

nevergone képe

Beküldte nevergone - 2008. április 23. 10.05

Drupal 6 alatt próbálkozom (ezt valóban nem mondtam), az eddig próbálkozás pedig itt van.

(a theme függvény jó ötlet, kipróbálom)

0
0

Választ szeretnél? - Új kérdés, új téma - Tesztoldal - Trollkezelés - Frissítés

Webappz képe

Beküldte Webappz - 2008. április 23. 12.11 

function jquery_teszt_menu($may_cache) {
  global $user;
  $items = array();
 
    $items[] = array(
      'path' => 'jquery_teszt',
      'callback' => 'jquery_teszt_page',
      'title' => 'Jquery teszt',
      'access' => user_access('access content'),
      );
  return $items;
}
 
function jquery_teszt_page(){
  drupal_add_js(drupal_get_path('module','jquery_teszt').'/jquery_teszt.js');
  return drupal_get_form('jquery_teszt_form');
}
 
 
function jquery_teszt_form() {
   $form['jquery_teszt'] = array(
      '#type' => 'fieldset',
      '#title' => 'JQuery teszt mező',
      '#collapsible' => TRUE,
      '#collapsed' => FALSE,
   );
   $form['jquery_teszt']['teszt_radio'] = array (
      '#type' => 'radios',
      '#title' => 'teszt radio doboz',
      '#default_value' => 0, //az elso elem lesz az alapertelmezett
      '#options' => array('alma', 'banan', 'citrom'),
   );
   $form['jquery_teszt']['teszt_select'] = array (
      '#type' => 'select',
      '#title' => 'teszt select doboz',
      '#default_value' => 0,
      '#options' => array('0', '1', '2'),
   );
   return $form;
}

A fenti "szösszenetet" a te modulod és pp dinamikus select témában íródott modulja alapján gyúrtam össze. A 6-os verzióban nem tudok segíteni, mert még nem próbáltam.
Update: Ez nekem csak Firefox böngészővel működik, de IE-vel nem.

0
0

Páldi Zoltán

nevergone képe

Beküldte nevergone - 2008. április 23. 12.20

Igen, nekem sem működik IE alatt, valószínűleg a JS -sel lesz a gond.
Mindenesetre ezt a változatot átültettem Drupal 6 alá, csak pár kisebb változtatásra volt szükség a továbbfejlesztett menükezelés miatt.

function jquery_teszt_menu() {
  $items['jquery_teszt'] = array
    'title' => 'Jquery teszt',
    'page callback' => 'jquery_teszt_page',
    'access arguments' => array('access content'),
  );
  return $items;
}
 
function jquery_teszt_page() {
  drupal_add_js(drupal_get_path('module', 'jquery_teszt').'/jquery_teszt.js');
  return drupal_get_form('jquery_teszt_form');
}
 
 
function jquery_teszt_form() {
   $form['jquery_teszt'] = array(
      '#type' => 'fieldset',
      '#title' => 'JQuery teszt mező',
      '#collapsible' => TRUE,
      '#collapsed' => FALSE,
   );
   $form['jquery_teszt']['teszt_radio'] = array(
      '#type' => 'radios',
      '#title' => 'teszt radio doboz',
      '#default_value' => 0, //az elso elem lesz az alapertelmezett
      '#options' => array('alma', 'banan', 'citrom'),
   );
   $form['jquery_teszt']['teszt_select'] = array(
      '#type' => 'select',
      '#title' => 'teszt select doboz',
      '#default_value' => 0,
      '#options' => array('0', '1', '2'),
   );
   return $form;
}
0
0

Választ szeretnél? - Új kérdés, új téma - Tesztoldal - Trollkezelés - Frissítés

Webappz képe

Beküldte Webappz - 2008. április 23. 13.01

Nem az IE-vel van gond, hanem a hozzáféréssel vagy a jogosultsággal.
Ha uid=1-gyel lépsz be, akkor működik IE alatt is, ha nem vagy belépve, akkor Firefox alatt sem megy, de ez már a modulfejlesztés témakörébe tartozik.

0
0

Páldi Zoltán

nevergone képe

Beküldte nevergone - 2008. április 23. 13.52

Kipróbáltam, és tényleg igaz az, amit írtál. Mondjuk nem értem, hogy mi a gondja a jogosultság-kezeléssel hiszen pl. a teszt-környezetemben az 'access content' jogosultság mindenki számára elérhető. Talán a JS használatánál valami külön mizéria van a jogosultság-kezeléssel?

0
0

Választ szeretnél? - Új kérdés, új téma - Tesztoldal - Trollkezelés - Frissítés

nevergone képe

Beküldte nevergone - 2008. április 28. 10.47

Azóta sem sikerült rájönnöm, hogy ez milyen jogosultsághoz köthető, mármint pl. miért nem működik bejelentkezés nélküli látogatóknak a példa.
Tudna ebben valaki segíteni?

0
0

Választ szeretnél? - Új kérdés, új téma - Tesztoldal - Trollkezelés - Frissítés

Webappz képe

Beküldte Webappz - 2008. november 16. 11.19

A tegnapi konferencián bemutattam ennek a modulnak a megoldott verzióját, íme a kódok.
A jquery_teszt.module:

 <?php
/**
 *  @file jquery_teszt.module
 *  @desc Pelda modul 
 *  @author Webappz
 * /
 
 
/** hook_menu implementálása **/
function jquery_teszt_menu() {
  $items['jquery_teszt'] = array (
    'title' => 'Jquery teszt',
    'page callback' => 'jquery_teszt_page',
    'access arguments' => array('access content'),
  );
  return $items;
}
 
/** hook_menu implementálása **/
function jquery_teszt_page() {
 
  /** A JS fájl hozzáadása **/  
  drupal_add_js(drupal_get_path('module', 'jquery_teszt').'/jquery_teszt.js');
  /** Az űrlap generálása és megjeleníthetővé tétele  **/
  return drupal_get_form('jquery_teszt_form');
 
}
 
/** Űrlap beállítása **/
function jquery_teszt_form() {
   $form['jquery_teszt'] = array(
      '#type' => 'fieldset',
      '#title' => 'JQuery teszt mező',
      '#collapsible' => TRUE,
      '#collapsed' => FALSE,
   );
   $form['jquery_teszt']['teszt_radio'] = array(
      '#type' => 'radios',
      '#title' => 'teszt radio doboz',
      '#default_value' => 0, //az elso elem lesz az alapertelmezett
      '#options' => array('alma', 'banan', 'citrom'),
   );
   $form['jquery_teszt']['teszt_select'] = array(
      '#type' => 'select',
      '#title' => 'teszt select doboz',
      '#default_value' => 0,
      '#options' => array('0', '1', '2'),
   );
   return $form;
}
?>

A jquery_teszt.info

 ; $Id$
name = jQuery Teszt
description = jQuery példa modul.
core = 6.x
 
version = "6.x-0.1"
core = "6.x"
project = "jquery_teszt"

A jquery_teszt.js a jQuery kód

 $(document).ready(function(){  
 
    $(":radio").click(function(){      
      if ($("input:radio").attr("name") == 'teszt_radio') {
      var radioindex = $(this).val();
 
      $("option").filter(function (selectindex) {
                  return selectindex == radioindex;
                })
                 .attr('selected', 'selected');
 
    }});   
 
    $("select").change(function(){
      if ($("select").attr("name") == 'teszt_select') {
      var selectindex = $(this).val();	  
 
	  $("input:radio").filter(function (radioindex) {
                  return radioindex == selectindex;				  
                })
                .attr('checked', 'checked');	  			
    }});
 
  });
0
0

Páldi Zoltán

ggabor képe

Beküldte ggabor - 2009. január 18. 04.27

Bocs hogy beleszólok. Felraktam ezt a kis modult és szépen működik is, de mind FF3 mind Opera9.63 alatt a jQuery tesztmező ő betűje helyén egy kérdőjel áll. A sminkem egyébként mindenütt helyesen jeleníti meg az ékezetes betűket, bár az egész kis példamodulban egyedül az ő betű szerepel ékezetes betűként.

0
0

ggabor

pp képe

Beküldte pp - 2009. január 18. 09.00

utf8 kódolással mentsd el BOM nélkül!

pp

0
0

Palócz István
https://palocz.hu | https://tanarurkerem.hu

ggabor képe

Beküldte ggabor - 2009. január 18. 12.32

Futtatáskor hibaüzenetet is kapok: warning: warning: Cannot modify header information - headers already sent by (output started at /mnt/storage/www/virtual/example.hu/htdocs/sites/all/modules/jquery_teszt/jquery_teszt.module:1) in /mnt/storage/www/virtual/example.hu/htdocs/includes/common.inc on line 141.

megnéztem a common.inc bejegyzését:

/**
 * Set an HTTP response header for the current page.
 *
 * Note: When sending a Content-Type header, always include a 'charset' type,
 * too. This is necessary to avoid security bugs (e.g. UTF-7 XSS).
 */
function drupal_set_header($header = NULL) {
  // We use an array to guarantee there are no leading or trailing delimiters.
  // Otherwise, header('') could get called when serving the page later, which
  // ends HTTP headers prematurely on some PHP versions.
  static $stored_headers = array();
 
  if (strlen($header)) {
    header($header);
    $stored_headers[] = $header;
  }
  return implode("\n", $stored_headers);
}
 
/**
 * Get the HTTP response headers for the current page.
 */
function drupal_get_headers() {
  return drupal_set_header();
}
0
0

ggabor

lili_ képe

Beküldte lili_ - 2009. január 18. 22.22

üríts cache-t, D6 alatt:
teljesítmény menü-->cache ürítése
utána be kell frissíteni persze az oldalt

vagy lehet van egy felesleges sorod a modulodban!!

ezt a kettőt nézd meg nekem ezzel működött!!

írd már meg ha valamelyik megoldotta?

0
0

mini

medwex képe

Beküldte medwex - 2009. január 19. 10.36

... a "print_r" kifejezést keresném és törölném.

0
0
ggabor képe

Beküldte ggabor - 2009. január 20. 05.52

A következőt csináltam: - végül is amit pp javasolt - Notepad++ letöltöttem, (előtte ConText-tel szerkesztettem), a Formátum beállításnál az Átalakítás Utf8 kódolásra (BOM nélkül)-t választottam elmentettem, feltöltöttem és működik.
Köszönöm a segítséget!

0
0

ggabor

fgabor képe

Beküldte fgabor - 2009. október 4. 18.22

Nekem is ilyesmi hibaüzenetet ad vissza. Amikor törlöm a cache-t akkor is és a modulaktiválás után is + a ki és belépéseknél is. Ezen kívül megjelenik és tökéletesen müködik a jquery, de az elöbb említett szituációkba elszáll a drupal.

Mi okozhatja ezt? Sztem a hook_menu részbe nem jó vm, mert ha kikommentezem a javascript hívást akkor is fennáll a probléma.

0
0
gyuxton képe

Beküldte gyuxton - 2009. március 20. 15.33

Köszi a kódot.
A kérdésem az lenne, hogy ezt fel lehetne tölteni a saját tartalom típus lebomló listájával?

0
0
Webappz képe

Beküldte Webappz - 2009. március 21. 21.46

Ha jól gondolom, akkor neked szükséged lenne egy olyan listára, amelyben a tartalom típusok szerepelnek.
Ebben az esetben az options értékét lecseréled a node_get_types függvény visszatérési értékére:
 '#options' => node_get_types($op = 'types', $node = NULL, $reset = FALSE);

Ha nem az összes tartalom típusra van szükséged, akkor nézd meg a node_get_types függvényt az API oldalán, vagy ha tudod, hogy mi alapján ismered fel a saját tartalom típusaidat akkor az alapján szűröd a tömbödet.

0
0

Páldi Zoltán

lovranits képe

Beküldte lovranits - 2009. március 1. 23.49

Sziasztok!

Az lenne a kérdésem, hogy ha van egy tartalmam és lefordítom más nyelvre annak programozásilag, hogy lehet lekérdezni az azonosítóját. Node táblából az idjét kiszedni, hogy felhasználhassam, mielőtt megtörténik az új azonosító beszúrása a fordított tartalomhoz.

Előre is köszönöm a segítséget!

0
0
Pasqualle képe

Beküldte Pasqualle - 2009. március 21. 23.55

de uj kerdes uj tema
http://drupal.hu/node/add/forum

0
0