What I am about to explain is a bit '
a hack, but it is very nice and comfortable.
<form action="/" accept-charset="UTF-8" method="post" id="search-block-form">
Drupal CMS
is my favorite today, even if the relationship is a kind of
love / hate
. For example, since the mask is looking for a
block, by default one can not have more than one instance per page.
Now, this limit is not generally a big problem. But I wanted to
Gothic Network
an entry in the main menu allowing you to search without having to go to another page, and that did not alter the existing layout. A search box was already further down the page, shaking, in the right column.
One solution was to use the function
module_invoke
to insert "by hand" locking the search form on the page, inserting a minimum of php in templates. See for example
this post (or
this) to understand how to use this simple method.
I wanted to use my favorite jQuery, as I had in mind to make the mask "hidden", that is to appear only the activation of a link.
The idea then is this: have a voice in the primary links
called "research" that acts as a switch for the appearance / disappearance of a search box (rather than pointing to the page "search").
order will set out what functions it is necessary that the block "Search" has been activated somewhere on the page.
This script was developed on an installation of Drupal version 5.
1. Creating the Link
Add an entry to the primary links
is simple, you go to
admin / build / menu
and click "add item": I called my "research," making the case that was the last the list (by placing a "burden" high). Remember to specify how to address the link "search", so that if JavaScript is not enabled, the user is properly redirected to the advanced search page. This is called
"Gracefully degrading"
.
2. Studio HTML
Before build our searchbox with jQuery, let's look at the structure of the search mask is created dal modulo "Search" di Drupal.
<div class="block block-search" id="block-search-0">
<h2 class="title">Ricerca</h2>
<div class="content">
<div><div class="container-inline"> <div class="form-item" id="edit-search-block-form-keys-wrapper"> <input type="text" maxlength="128" name="search_block_form_keys" id="edit-search-block-form-keys" size = "15" value = "" title = "Enter your search terms." class = "form-text" /> \u0026lt;/ div> \u0026lt;input type = "submit" name = "op" id = "edit-submit" value = "Search" class = "form-submit" / >
\u0026lt;input type="hidden" name="form_token" id="edit-search-block-form-form-token" value="ae2b5565789a051ff48bb23e0eac3970"
/> \u0026lt;input type = "hidden" name = "form_id" id = "edit-search-block-form" value = "search_block_form" />
\u0026lt;/ div> \u0026lt;/ div>
\u0026lt;/ form> \u0026lt;/ div> \u0026lt;/ div>
The search is obviously a Drupal form, with a set of tags \u0026lt;input> that we will fully and faithfully reproduce
in our script, if we want to work. Particular attention should be given to the tag
form_token
(line 11), which contains a unique ID from which depends the smooth running of research: the data binding is the value of "value". 
3. JQuery Code Here's what we do: hang on the link created in step 1, a new form of research and hide, then we will create a switch to activate it at will.
3.1 Identification of form_token First thing to do: get the value
of
form_token simply by going fishing with the method
attr (name)
:
$ (document). Ready (function () {
/ * get token form * / var token = $ ('# sidebar_right # edit-search-block-form-form-token'). attr ("value");} )
This value should be taken every time you load the page, and this is the first statement that we have the script. is important to specify the section of the page that contains the original searchbox
, and not one created by jQuery. In my case it is in the right column.
3.2 Creation of the searchbox You find the link "search" (in which case the last of the
navlist
primary links) and there you create an item below
\u0026lt;form>
by ID # jquerysearch, in which we insert all the input elements as above:
$ (document). ready (function () { / * build search box * / $ ("# navlist li: last a"). after ("\u0026lt;form action='#' method='post' id='jquerysearch'>"); $ ("# jquerysearch). append (" \u0026lt;input type = 'text' maxlength = '128 'size = '15' name = 'search_block_form_keys' id = 'edit-search-block-form-keys' value =''title = 'Please enter the search terms'. /> ") . Append (" \u0026lt;input type='submit' name='op' id='edit-submit' value='Cerca' />) . Append ("\u0026lt;input type = 'hidden' name = 'form_token' id = 'edit-search-block-form-form-token' value =''/> ") . append (" \u0026lt;input type = 'hidden' name = 'form_id' id = 'edit-search-block-form' value = 'search_block_form' /> ")
. append (" \u0026lt;br /> \u0026lt;a id = 'AdvancedSearch' href = 'http://www.gothicnetwork .org / search '> Research Advanced \u0026lt;/ a> ")
. append (" \u0026lt;/ form> ") . hide ();} )
First, using the methodone you selected.
after (content) is created
element
\u0026lt;form>
and is attributed to its ID:
after () creates an element
below the selected one, while
append (content)
(which we use immediately) inserts element within
In general, therefore, is used after
() to create the block, and append () to fill it with two different instructions. Each tag is hung with a new feature append ()
, education and ends with a
hide ()
to hide the mask you just created (
hide () in jQuery
corresponds to a display: none; in CSS), since it must only be activated with the click on the link. Note that the attribute value
of form_token (line 7) is intentionally blank, since that parameter will be passed later. I am also a direct link to advanced search page, specifying the ID (which we will use shortly). Now we have a searchbox hidden, requiring a switch to appear.
3.3 Creating the switch
Affniché clicking on "search" our searchbox to appear and has not addressed the advanced search page, use the method
toggle ()
:
/ * search box switch * /
$ ("# navlist them: at last: not ('# AdvancedSearch')"). click (function () {
$ (" # jquerysearch). toggle (' normal '); $ ("# jquerysearch # edit-search-block-form-form-token "). attr ('value', token); return false;}
)
This time the switch not () is essential to make sure you do not also select the link for the advanced search, created earlier. Line 4 is used to pass the value of
form_token
took over with 3.1 in the corresponding element of our box.
token = $ ('# sidebar_right # edit-search-block-form-form- token '). attr ("value");
Education
return false;
is fundamental: to prevent the browser to load the page specified by the tag
\u0026lt;a>
selected - in essence, disables the link.
is finally complete script:
$ (document). Ready (function () {
/ * get token form * / var
/ * build search box * /
$ ("# navlist li: last a"). After ("\u0026lt;form action='#' method='post' id='jquerysearch'>"); $ ( "# jquerysearch). append (" \u0026lt;input type = 'text' maxlength = '128 'size = '15' name = 'search_block_form_keys' id = 'edit-search-block-form-keys' value =''title = 'Enter your search terms.' /> ") . append (" \u0026lt;input type='submit' name='op' id='edit-submit' value='Cerca' />) . append ("\u0026lt;input type='hidden' name='form_token' id='edit-search-block-form-form-token' value='' />") .append("<input type='hidden' name='form_id' id='edit-search-block-form' value='search_block_form' />") .append("<br /><a id='advancedsearch' href='http://www.gothicnetwork.org/search'>ricerca avanzata</a>") .append("</form>") .hide(); /* search box switch */ $("#navlist li:last a:not('#advancedsearch')").click(function() { $("#jquerysearch").toggle('normal'); $("#jquerysearch #edit-search-block-form-form-token").attr('value' , token); return false;} ) });
Now you're all set: just plug in page.tpl.php (or his) a link to the script you just created, and that's it.
You should enter some CSS to draw the searchbox on pages where you entered: you can enter directly from jQuery, as inline style of the various tags. I followed this path.
The end result can be seen in any of the pages of Gothic Network. Caveat: I said that this script is a bit ' a hack because we're going to create pairs of elements with the same ID, and this would hardly be proper behavior at the level of XHTML. However, the page passes validation, because the elements are created only charged when activating the switch, and the script is working fine.
Appendix
Select a menu item that is not the last in the list: use the method
[attribute = value]
specifying
to: href = search .
Documentation on customizing the searchbox in Drupal: http://drupal.org/node/45295 If you do not want to be tied to the use searchbox here
built only as a second mask
research is necessary to generate a unique
form_token
. As shown in
link
proposed in the previous paragraph, you must create a tag
\u0026lt;input>
like this:
\u0026lt;input type = "hidden" name = "form_token" id = "a-unique -id "value =" \u0026lt;? drupal_get_token php print ('search_theme_form');?> "/>
0 comments:
Post a Comment