Javascript

jQuery UI in core?

moshe weitzman — Sun, 28 Sep 2008 17:49:23 +0000

jquery UI has become nearly core in the jQuery project. Shall we push for it in core? Who wants to lead that effort? There is a lot of custom drupal js code that we can just use UI for (draggables, autocomplete, progress bar, spinner, ...).

Javascript

JavaScript improvements

webchick — Sat, 27 Sep 2008 00:26:26 +0000

These are core patches that provide improvements that are JavaScript-related. jQuery ninjas, we need you!

More flexible js ordering and an alter operation (needs breaking up into sub-patches)
JavaScript: Allow compatibility with other libraries
Add jQuery UI to core
Centralized jQuery plug-in manager

trying to post to a login page with jquery

procomp — Wed, 13 Aug 2008 03:22:52 +0000

I am trying to login to another site remotely through jquery. I have set up a link on my site that will run my js file. My question is how do I either redirect my page or open a new browser window that will access the remote login page? The remote login page will accept the username and password as hidden fields. The username and password are being passed into my script from my drupal page.

Would I use the $.post function as shown below (although this doesn't work) or is there another way?

if( Drupal.jsEnabled){
$(document).ready(function(){
$('a.logon_to_abc').click(function(){
var GetData = function( data ){
var result = Drupal.parseJson(data);
$.post("https://www.abc.com/Login.aspx", { UserID: result['UserID'], PWD: result['PWD']},
function (){
alert("works");
} );

  }
  $.get(this.href, null, GetData );
return false;
});

});
}

Thanks..

Javascript

unable to use the jQuery plugin imgAreaSelect 0.4.2 with Drupal 5.8

yasheshb@drupal.org — Tue, 22 Jul 2008 12:04:56 +0000

Hello,

I've been trying to use the imgAreaSelect 0.4.2 plugin (http://odyniec.net/projects/imgareaselect/)
with Drupal 5.8 but have had no luck.

Finally i removed the files from drupal framework and took it to a simple test area where i created a test file for using the
vanilla jQuery 1.2.6 and another file which uses Drupal's jquery.js file.

The test case works for vanilla 1.2.6 js file but breaks down for drupal's jquery.

I've attached the relevant 6 files

The error i get in when using Drupal's jquery is
"jQuery(this).data is not a function" - which is on line 344 of the file jquery.imgareaselect-0.4.2.js "if (jQuery(this).data('imgAreaSelect'))"

Has anyone seen this problem before ? and knows a fix or how to go about debugging this ? Also, the drupal's jquery.js is in packed format making it very hard
to debug using firebug. Any tips on how to get the unpacked jquery.js for drupal 5.8 ?

Thanks.

Yashesh Bhatia

p.s. Using the attached files
1. Download the 6 attached files into /var/www/html/testImgAreaSelect/
2. please remove the .txt from the 3 javascript files viz. jquery.drupal5.8.js.txt jquery.imgareaselect-0.4.2.js_.txt jquery-1.2.6.js_.txt
3. Click on http://localhost/testImgAreaSelect/test_vanilla.html and http://localhost/testImgAreaSelect/test_drupal.html to see the error.

Javascript

Selecting a radio button using JQuery

drob — Mon, 21 Jul 2008 18:14:36 +0000

Help appreciated -

I'm building a node form where the form will reveal/hide portions depending on the users choices. To do this I'm using jQuery to manipulate the DOM. I'm having a lot of issues with the radio buttons.

What I want to do is have a message pop up if the user selects a particular radio button (in this case a "no" choice of a "Yes/No" "set"). For this to work I need to attach an "onClick" handle to the "no" radio button and when the user clicks evaluate and display the message. Because of a series of interrelated issues I've tried a number of approaches. The one I'm working on now is:

I'm using the form APIs "radios" - an issue here is that "radios" define the actual radio buttons in an array and it doesn't look like there is a way to assign an id attribute using the forms api (as a matter of fact there is code in form.inc which explicitly strips out an ID at that level).
I assign an onClick handler to the "radios" - #attributes' => array('onClick' => 'CitizenClick()')
On form load I assign an id to the specific radio button I'm interested in - $("[name=CitizenQ][value=no]").attr('id', 'CitizenNoButton');
In CitizenClick() I check and take action depending - if ( $("#CitizenNoButton").attr('checked') ) {
Please note that although I could do all this without an "id" and by selecting the "name" instead of the "id" - it was very slow

Everything works - EXCEPT -

I am placing the radio buttons inside of a fieldset thusly -

$form['Qualifyers'] = array(
    '#type' => 'fieldset',
    '#tree' => TRUE,
    '#weight' => 1,
);
$form['Qualifyers']['CitizenQ'] = array(
    '#type' => 'radios',
    '#title' => t('Are you a U.S. Citizen?'),
    '#default_value' => 1,
    '#options' => array('yes' => t('Yes'), 'no' => t('No')),
    '#attributes' => array('onClick' => 'CitizenClick()'),
);

If I don't place it within the fieldset I can select the radio with -

$("[name=CitizenQ][value=no]")

However withing the fieldset I can't get this to work -

$("[name=Qualifyers[CitizenQ]][value=no]")

I assumed the above wouldn't work because the "[]" are special characters so I tried escaping them -

$("[name=Qualifyers\[CitizenQ\]][value=no]")

Still no joy - I have been beating my head against this for a while and would appreciate some assistance - also if I've approached this in a fundamentally wrong way please let me know.

Thanks!

Javascript

First patch for FCKeditor support hit Wysiwyg's queue

sun — Tue, 15 Jul 2008 04:06:44 +0000

I have spent the last hours to get a first draft of FCKeditor support in Wysiwyg Editor module.
http://drupal.org/node/282717

It's still very rough and dirty, but it outlines what can be done and what needs to be done for multiple editor support in Drupal via one API module.

Now I badly need some feedback from folks that are interested in centralized Wysiwyg editor support, who know jQuery + JavaScript, and who might have ideas and suggestions on how to solve the outlined design challenges. Of course, all editor module maintainers are implicitly more than welcome.

Wysiwyg

How to make a jQuery plugin work?

NonProfit@drupal.org — Tue, 24 Jun 2008 23:34:48 +0000

I begin this discussion knowing full well this is a question only a themer could ask, but how do you get a jQuery plugin to function? Seemingly all the work has been done and the whole idea of plugins is they...well...plug in. Despite this simplicity the procedure still eludes me. I'm currently struggling with jScroller2.I'm running Drupal 6.2, Apache 2.2.8, PHP 5.2.5, through WAMP 2.0 on an XP SP2 box. Don't know if this sort of thing is better placed in the forums, but I thought the JavaScript group would be more likely to understand a solution.

1) I copied and renamed Garland to sites/all/themes/scroller updated the .info file and installed the theme successfully.
2) I added jscroller2-1.0.css to the theme folder
3) To template.php I added

drupal_add_js(path_to_theme().'/jscroller2.js', 'theme');

drupal_add_css(path_to_theme().'/jscroller2-1.0.css', 'theme', 'all', TRUE);
$styles = drupal_get_css();

4) I created sites/all/scripts and added jscroller2-1.4.js to it.
5) I entered html copied from the demo site to the body of my node (input format set to 'Full HTML')

<div id="scroller_container">
 <div class="jscroller2_up">
<ul><li>123</li>
<li>123</li>
<li>123</li></ul>
 </div>
</div>

6) The Browser recognizes the .css

<link href="/drupal-6.2/sites/all/themes/scroller/jscroller2-1.0.css?8" media="all" rel="stylesheet" type="text/css">

and .js

<script src="/drupal-6.2/sites/all/themes/scroller/jscroller2.js?8" type="text/javascript">

7) Firebug tells me the div has the correct .css applied.

UL list appears...no scrolling. What did I do wrong?

Thanks!

-NP

PS: I think the best thing for Drupal is to get us artsy-fartsy access to jQuery. Seriously, I've easily put 10+ hours into this and just can't figure it out.

Javascript

Looking for Szeged co-presenters for jQuery Tutorial

katbailey — Fri, 13 Jun 2008 21:57:24 +0000

[Cross-posting from the Raincity blog]

I've submitted a proposal to the DrupalCon Szeged site for a tutorial session on jQuery in Drupal. I'd reallly like to get two co-presenters on board to structure it into three 30-minute tutorials, each covering two or three of the following suggested topics:

how jQuery and Drupal relate to each other
keeping up with jQuery versions
the Drupal js object
how behaviors are handled in Drupal 6
AJAXifying Drupal with jQuery
debugging JavaScript with Firebug
AHAH and Drag&Drop

The topics I'd personally like to cover are i) keeping up with jQuery versions and ii) the Drupal js object. Maybe debugging as well. I'm totally open to suggestions regarding specific topics; the aim is that we will provide a really well-rounded, instructive and comprehensive session on using jQuery in Drupal in 90 minutes.

So, if you are heading to DrupalCon Szeged, haven't decided on what, if any, sessions to present, and feel comfortable with and interested in the above topics, please get in touch with me via my contact form.

Alternatively, if you're not planning on presenting but would be interested in attending such a session, I'd love to hear your feedback as to the content so please leave your comments.

Javascript

Hopefully helpful ramblings about jQuery in Drupal

katbailey — Wed, 28 May 2008 17:35:42 +0000

Hi All,
I already included a link to Part One of this post in a thread below but I've just written Part Two and would love to get some feedback from other jQuery-loving Drupal developers. It gives a brief overview of the history of jQuery in Drupal, discusses jQuery Update module and the difficulty of bridging separate release cycles, looks at best practices for writing jQuery and provides a brief overview of AHAH and Drag & Drop in Drupal 6.
If nothing else, you'll probably at least want to make sure I didn't completely misrepresent your efforts (I certainly hope I didn't!) if I mentioned them in the discussion ;-)

Katherine

Javascript

.form-select has no properties. jQuery problem.

ptomasiewicz — Sat, 10 May 2008 18:56:28 +0000

Hi all.
I try to add some functionality to ''Multiselect'' module.

I`ve wrote simple jQuery script which fills unselected box with title of nodes from selected vocabulary.

Here is the code:

 $('select.multiselect_taxonomy_vids').change(
        function() {
       base_path = "/inspirander";
           fieldid=this.id;
           vid=$('.multiselect_taxonomy_vids').filter('[@id='+fieldid+']').val();
  seloptions='';
   $('.multiselect_taxonomy_sel').filter('[@id='+fieldid+']').each(
        function(){
            for (var i=this.options.length-1;i>=0;i--)
               {
                 
               seloptions+= this.options[i].value +'/';
             }
      }
      )
        $('.multiselect_taxonomy_unsel').filter('[@id*='+fieldid+']').removeOption(/./).ajaxAddOption(base_path+"/multiselect_taxonomy/autocomplete/"+vid+"/"+seloptions,false,false);
     
});

Rest of JS code is in "multiselect_taxonomy.js_.txt".

On new nodes it works perfect.
But with html from "form.html" attachment I get:

$(".multiselect_taxonomy_unsel").filter("[@id*=" + fieldid + "]").removeOption(/./) has no properties

.form-select html:

<fieldset class="group-inspiracje-na-dzi">
<legend>Inspiracje na dziś</legend><div class="form-item">
 <label for="edit-field-strona-glowna-insp-linki-ts-vids">Działy: </label>
 <select name="field_strona_glowna_insp_linki[ts_vids]" class="form-select multiselect_taxonomy_vids" id="field_strona_glowna_insp_linki"><option value="0" selected="selected">WSZYSTKIE</option><option value="5">Inspiracje</option><option value="7">Przyjęcie</option><option value="8">Gry</option><option value="3">Gotowanie</option><option value="9">Zdrowie</option><option value="10">Wychowanie</option><option value="11">Podróże</option><option value="12">Kobieta</option><option value="13">Kultura</option></select>
</div>
<div class="form-item"><label for="edit-title">Inspiracje na dziś - linki:</label>
<div class="container-inline"><div class="form-item"><select name="field_strona_glowna_insp_linki_unsel" multiple="multiple" class="form-select field_strona_glowna_insp_linki_unsel multiselect_taxonomy_unsel" id="field_strona_glowna_insp_linki" size="10">
<option value="54">Wiatraczek - 54</option>
<option value="55">Zdrowe kanapki - 55</option>
<option value="56">Pączki - 56</option>
<option value="57">Tort bałwanek - 57</option>
<option value="58">Tort Zamek - 58</option>
<option value="59">Świecące serduszka - 59</option>
<option value="60">Owocowe ptasie mleczko - 60</option>
<option value="61">Zabawne kanapki na dziecięce przyjęcie. - 61</option>
<option value="67">Ciasteczka - 67</option>
<option value="68">Roboty - 68</option>
<option value="111">Barszcz Ukraiński - 111</option>
<option value="88">Suchy - 88</option>
<option value="89">Kaszel - 89</option>
<option value="73">Urodziny1 - 73</option>
<option value="115">Ciuciubabka - 115</option>
<option value="98">Dzieci - 98</option>
<option value="100">Przepis na grzeczne dziecko ;) - 100</option>
<option value="103">Wyprawa na Krym - 103</option>
<option value="108">Win-tsun - 108</option>
<option value="109">Kung-fu - 109</option>
<option value="113">Młoda polska proza - 113</option>
</select>
</div>
<span class="multiselect_taxonomy_add" id="field_strona_glowna_insp_linki">
<img src="/inspirander/sites/all/modules/multiselect_taxonomy/images/add.png" alt="add selection" align="top">
</span><span class="multiselect_taxonomy_remove" id="field_strona_glowna_insp_linki">
<img src="/inspirander/sites/all/modules/multiselect_taxonomy/images/remove.png" alt="remove selection" align="bottom">
</span><div class="form-item">
 <select name="field_strona_glowna_insp_linki[nids][]" multiple="multiple" class="form-select field_strona_glowna_insp_linki_sel multiselect_taxonomy_sel" id="field_strona_glowna_insp_linki" size="10"><option value="54">Wiatraczek - 54</option><option value="55">Zdrowe kanapki - 55</option><option value="56">Pączki - 56</option><option value="57">Tort bałwanek - 57</option><option value="58">Tort Zamek - 58</option><option value="59">Świecące serduszka - 59</option><option value="60">Owocowe ptasie mleczko - 60</option><option value="61">Zabawne kanapki na dziecięce przyjęcie. - 61</option><option value="67">Ciasteczka - 67</option><option value="68">Roboty - 68</option><option value="84" selected="selected">Barszcz Biały - 84</option><option value="111">Barszcz Ukraiński - 111</option><option value="120" selected="selected">Grochówka - 120</option><option value="88">Suchy - 88</option><option value="89">Kaszel - 89</option><option value="73">Urodziny1 - 73</option><option value="115">Ciuciubabka - 115</option><option value="98">Dzieci - 98</option><option value="100">Przepis na grzeczne dziecko ;) - 100</option><option value="102" selected="selected">Herodot - 102</option><option value="103">Wyprawa na Krym - 103</option><option value="108">Win-tsun - 108</option><option value="109">Kung-fu - 109</option><option value="113">Młoda polska proza - 113</option></select>
</div>

</div></div>
<div id="field-strona-glowna-insp-tlo-attach-wrapper"><fieldset class="collapsible"><legend>Inspiracje na dziś - tło</legend><div class="description">Changes made to the attachments are not permanent until you save this post.</div><div class="imagefield-edit-image-row clear-block"><div class="imagefield-edit-preview"><img src="http://10.10.1.2/inspirander/files/strona_glowna/inspiracje_na_dzis.png" alt="inspiracje_na_dzis.png" title="inspiracje_na_dzis.png" width="150"></div><div class="imagefield-edit-image-detail"><div class="imagefield-edit-image-flags"><div class="form-item">
 <label class="option"><input name="field_strona_glowna_insp_tlo[0][flags][delete]" id="edit-field-strona-glowna-insp-tlo-0-flags-delete" value="1" class="form-checkbox" type="checkbox"> Usuń</label>
</div>
</div><div class="imagefield-edit-image-description"><strong>Filename: </strong>inspiracje_na_dzis.png</div><input name="field_strona_glowna_insp_tlo[0][alt]" id="edit-field-strona-glowna-insp-tlo-0-alt" value="inspiracje_na_dzis.png" type="hidden">
<input name="field_strona_glowna_insp_tlo[0][title]" id="edit-field-strona-glowna-insp-tlo-0-title" value="inspiracje_na_dzis.png" type="hidden">
</div></div><div class="imagefield-edit-image-replace">If a new image is chosen, the current image will be replaced upon submitting the form.</div><div id="field-strona-glowna-insp-tlo-attach-hide"><div class="form-item">
 <label for="edit-field-strona-glowna-insp-tlo-upload">Upload a new image: </label>
 <input name="files[field_strona_glowna_insp_tlo_upload]" class="form-file imagefield imagefield-field_strona_glowna_insp_tlo" accept="jpg|jpeg|png|gif" id="edit-field-strona-glowna-insp-tlo-upload" size="60" type="file">

 <div class="description"><br>Allowed extensions: <em>jpg jpeg png gif</em></div>
</div>
<input name="cck_imagefield_field_strona_glowna_insp_tlo_op" id="field-strona-glowna-insp-tlo-attach-button" value="Transfery plików" class="form-submit" type="submit">
</div></fieldset>
</div>

Where Is a problem?

Javascript

jQuery UI in Drupal 5

katbailey — Tue, 29 Apr 2008 19:38:54 +0000

I'm trying to put together a sort of roadmap relating jQuery (and jQuery UI) at its different stages to Drupal 5 and 6 so that people can get an overview of the jQuery functionalities that are available to them. I will eventually post it to this group and if there's a suitable place in the handbook for such a thing.

One of the big questions I'm grappling with at the moment is "what about jQuery UI in Drupal 5?" I read the discussion at http://groups.drupal.org/node/4997 and the answer is still unclear. The jQuery UI Backport module is no longer recommended by its author, saying that people should "use jQuery Update and jQuery UI 1.5 instead". However, jQuery Update only gives you jQuery 1.1.2, whereas UI requires 1.2.1 (and that's UI 1.0 so 1.5 might require an even later version). Am I missing something here?

Also, if people were to use jQuery UI 1.5 directly, for want of a supported contrib module providing the js files, what kind of conflicts would arise from the same js file being pulled by two different modules and are there recommended ways to get around this, such as jQ module or the jQuery plugins module?

If anyone has some further insight into this issue, beyond what was discussed in the thread mentioned above, it would help me a lot and when I'm finished piecing the whole jigsaw puzzle together it will hopefully help a lot of other Drupal/jQuery enthusiasts ;-)

Javascript

Drop Down List again

molcom — Tue, 22 Apr 2008 16:05:18 +0000

Sorry that I post this discussion again but I've see that it is private and I want it public.

I have a module and for a menu link will be displayed a form.
1. In this form I have 2 select element. First element is populated with some authors name. The second select element must be populated with the books for the selected author from the first select element.
2. For each selection in first select element, the option array for the second element must change.
3. I must have a second submit button, or a button and have option to call a function when I press on it.

If anybody could help me with any idea, suggestion, documentation.

Thank's!

SoC 2006: AJAX Form Builder

Ingredients for an Album/Track page

gusaus — Tue, 22 Apr 2008 01:48:30 +0000

This wiki is an attempt to explore the various options we have to build an album page with the ability to play individual tracks as well as the complete album/playlist. Ideally we'll get input/advice from some of those who have built and/or implemented this type of solution.

Examples

Drupal site examples

Drupal driven sites with album/tracklist players.

Daughtry - http://www.daughtryofficial.com/music/album/daughtry
The Four of Us - http://www.the4ofus.com/classified_personal
Sony MyPlay - http://myplay.com/music/foo-fighters/echoes-silence-patience-and-grace

Non-Drupal examples

For inspiration and ideas,

Jackson Browne - http://www.jacksonbrowne.com/discography/albums/5250.aspx
LAST.FM - http://www.last.fm
Muxtape - http://muxtape.com
Peter Gabriel - http://www.petergabriel.com/discography/release/Birdy/188/
play.com - http://www.play.com/Music/MP3-Download-Album/4-/5379713/The-Age-Of-The-U...
Preview all on Amazon - http://www.amazon.com/R-E-M-Live/dp/B00122FW4E/ref=dm_ap_alb4

Key functionality

Allows you to "preview/listen all"
Allows the user to click to play another song and automatically stops playing the previous song, if another one is clicked.
When a song finishes playing it automatically moves to the next song.
Volume, pause and play control
Option to 'pop-up' player

Options/Ingredients

Attaching audio

Audio module - http://drupal.org/project/audio
- allows users with proper permissions to upload audio files into drupal.
- Each audio item is created as its own individual audio node.
- uses the getID3 library to read and write ID3 meta-tag information to and from the audio file.
Media Field - http://drupal.org/project/mediafield
- CCK fields for storing audio
Embedded Media Field (http://drupal.org/project/emfield)
- This extensible module will create fields for node content types that can be used to display video, image, and audio files from various third party providers.

External audio

Sony BMG - http://drupal.org/node/241344#comment-795344
- Tracks are their own nodes with a node reference to the album and a cck field for the track url which is then served up through a custom player.
- The actual track is hosted on a third party server so we just reference the location within the node and let the player deal with serving up the actual track itself.
- Node creation of Albums and Tracks is automated through a custom module that uses the Amazon API to generate the nodes. You could use the Amazon services module for something like this.
Embedded Media Field and XSPF playlist? - http://groups.drupal.org/node/8757#comment-32596
- Per athurf (http://groups.drupal.org/user/630) - XSPF Playlist is just building playlists off data that is defined from nodes. It shouldn't be hard for me to create an option to save an XSPF file in the db for retrieval- potentially, I see a mapper for FeedAPI that takes XSPF playlists and then saves them.

Creating playlists

XSPF Playlist - http://drupal.org/project/xspf_playlist
- generates a XSPF playlist from files that are attached to a node.
- It was designed for Jeroen Wijering's flash player, though it should work with other flash players.
- The admin interface allows the administrator to select what node types it works on, choose a default thumbnail file to use, and forthcoming support for CCK fields.
- It also supports multiple file types (audio, video, flash) that are supported by the flash player.
Media Mover - http://drupal.org/project/media_mover
- a suite of modules which can convert content to FLV and then can be integrated with XSPF Playlist

Flash Media Players

XSPF Web Music Player - http://musicplayer.sourceforge.net/
JW FLV MEDIA PLAYER - http://www.jeroenwijering.com/?item=JW_FLV_Player
- plays audio, video, and even images.
- Media Player Wizard - http://www.jeroenwijering.com/?page=wizard&example=22 -
- Media Player Demos - http://home5.inet.tele.dk/nyboe/flash/mediaplayer/
FLV Media Player - http://drupal.org/project/flvmediaplayer
- This is a helper/configuration module to work with JW media player FLV flash player.

Controlling the player

The Four of Us (example by dublin drupaller here - http://groups.drupal.org/node/10869) - The audio player is controlled using a mix of mainly prototype and soundmanager2. It's a fairly heavy set of js at the moment but the plan is to trim it down and either create an add-on .inc for the audio.module (if there is enough interest) or integrate it into views, so it can be used for any drupal playlist.
FLV MediaPlayer Demos - http://home5.inet.tele.dk/nyboe/flash/mediaplayer/index.htm - provides discussion of different scripting methods including cross frame scripting which may provide a good solution for controlling the popup player from the main window .
- FLV MediaPlayer - http://www.jeroenwijering.com/?item=Javascript_interaction
- FLV MediaPlayer Javascript Control Examples - http://home5.inet.tele.dk/nyboe/flash/mediaplayer/javascript.htm

Javascript

Packing Javascript, Dean-Edwards-style?

jjeff — Mon, 21 Apr 2008 12:44:26 +0000

I've been looking at the results of Javascript optimization in Drupal 6 and it appears to me to be not all that optimized. It should really just be called Javascript "concatenation" as it doesn't appear that comments or white space is removed.

I'm guessing that there were problems with double-packing of jquery.js.. Can anyone point me to the thread where this was discussed?

I'm thinking about creating a Packer module to implement Dean Edwards' Packer to try to tweak this process and experiment with ways to solve this problem for Drupal 7.

Anyone have any tips for me before I start wasting time on this? :-)

Javascript

Drop down list problem

molcom — Mon, 21 Apr 2008 07:06:29 +0000

Hi!

If anybody could help me with any idea, suggestion, documentation.

Thank's!

Javascript

jQuery plugin manager

tjholowaychuk — Sun, 20 Apr 2008 01:19:25 +0000

Hello,

I would like some community feedback on IMO a great need for a jQuery plugin manager. I have seen many jQuery plugin 'wrapper' modules flowing through the feeds, and I think this is something that we should address. I am certainly willing to expand on my prototype which can be found at http://drupal.org/project/plugins

Any feedback or suggestions would be great.

Javascript

Edit in place

KarenS@drupal.org — Wed, 19 Mar 2008 15:27:16 +0000

It would be great to develop edit-in-place capability where you can be viewing a page and click on the content and have it turn into an editable text area without going to a separate edit form, or be viewing a Views list and click on a field in the list and have it turn into an editable field that you can use to update the value. When using this with Views, it could almost be like having spreadsheet capabilities. This would be a killer feature.

There were people talking about this at one time, but I don't think anything ever got done. Anyone interested in this should do some research to see what, if any, work has happened in the past that you could maybe build on. There was a jQuery edit-in-place plugin somewhere that I thought might be useful for this, but I can't find it now.

Unfortunately, I don't have time to flesh this idea out more, but would love to see something happen here, so if there's interest, maybe others can jump in.

Javascript

Latest Ajax Popup News

starbow — Sat, 15 Mar 2008 00:37:46 +0000

Trying to edit the Ajax Popup wiki is just getting me the white screen of death, which is bad since it is all painfully out of date.
The big news is that all three patches have been rolled back into one. And it is prettier. More info at:
http://drupal.org/node/193311#comment-770004

I have integrated all the feedback I got at DrupalCon Boston, so I see it at the end of it's second phase of development. Now it is ready for some serious tire kicking from the rest of the world.

Javascript

AJAX & Drupal: Post/Response Times

jmmec — Thu, 13 Mar 2008 15:50:33 +0000

Hi,

I posted a message over at the Drupal Forum's asking about excessive post/reply times that I see on Drupal 5 using AJAX. With a simple change to bootstrap only the Drupal database, my AJAX post/response times decreased from 900-1000ms to 94-120ms per AJAX query. Instead of copying my post here, the link is below:

http://drupal.org/node/233608

I have a few questions at the bottom of my post and maybe some of the guru's in this group can shed some light in case there are alternative solutions for Drupal 5?

I've done some googling and will do more in case my questions are already answered and I have missed the answers.

Regards,
J

Javascript

Developing AHAH Submit Functionality

joshk — Wed, 12 Mar 2008 20:15:22 +0000

This post is intended to pull together my thinking and some of the discussions that took place in Boston around how to get a solid framework in place for real next-generation javascript into core for Drupal 7. My specific interest is in taking the promise of Nedjo Rodgers ajaxsubmit.module (part of the jstools project) and overhaul it to work in harmony with the amazing new AHAH features in Drupal 6.

My objective is to release a solid contrib module for Druapl 6.0 which provides a good framework for developers interested in this functionality, and implements some useful default behavior that will give it some purpose and life "out of the box." Assuming I can make decent progress on this in the next six weeks, this is a good way to figure out what's needed, and define functionality and code which can be engineered into Drupal core for the 7.0 release.

The full post here contains my initial spec, thinking on how to accomplish all this, and first experiments with extending the existing ajaxsubmit module.

Overall Objective

The overall objective here is to create a module called ahahsubmit, which makes it nearly as easy to add AHAH/AJAX form submissions to your drupal site (or module) as the core AHAH drag'n'drop and #ahah FormAPI enhancements have implemented in core. Additionally, I would like to propose extensions to those existing features which make them more "hookable" for developers.

The basic theory is that forms which ahahsubmit will recieve a JSON array back with a few common elements, such as status, update data, etc, following the model of the core ahah functionality. They will ideally submit using the same form action, with the different return value prompted by there being a #ahahsubmit element in the $form (maybe do this w/request headers?).

Here's the core functionality I want to develop:

Allow developers to add a #ahahsubmit to any $form array, and have useful default functionality kick in.
Useful default options: hide the form on successful submission, update a specific div with returned data (follow ahah framework model)
An AHAHsubmit API:
- Allow developers to specify an additional drupal callback to add/alter data in the JSON array before it is returned to the browser
- Allow developers to additionally specify alternate/custom javascript handlers for returned JSON array
- All useful default functions implemented via API, providing examples for community to generate additional contributed behaviors

There are also some really interesting potentials along the same lines with regard to client-side form validation. For instance, I feel it's a no-brainer to actually check that all required fields have values before a form submit is attempted. There could also be an FormAPI/javascript architecture which allowed other field-types to specify more advanced validation (e.g. email address verification). This is cool stuff, but I'm feeling more like it's out of scope for what I want to attempt in the near term.

Initial Progress

Currently I have a hacked-up version of the old ajaxsubmit module which implements some of the functionality I want, but not very cleanly. What I am doing is the following:

Using a $_SESSION variable to store the $form array for use by the JSON-returning ajaxsubmit_dispatch() function. That shouldn't really be necessary.
Looking in $form['#ajaxsubmit_callback'] for a javascript function name and if present adding that as the value to "callback" in the returned JSON array.
In ajaxsubmit.js, the Drupal.ajaxsubmit.prototype.oncomplete() function has been altered to look for this "callback" value, and if present invoke that function, passing the whole JSON array as well as the JS this object to whatever function was specified.
In my example implementation, I have a JS function which accepts two vars, data and that, and which performs some custom action with the results of a form submit. I have successfully used these methods to give different form-submits different behaviors.

Obviously there's a lot of room for improvement. The use of a $_SESSION variable should really not be necessary, and I also think my current means of routing to the custom JS function to handle the returned JSON data is kludgy. I'm literally saying:

Drupal.ajaxsubmit.prototype.oncomplete = function (data) {
  if (data['callback']) {
    eval(data['callback'] + '(data, this)');
  }
  else {
  // useful default behavior
  ...
  }
}

Next Steps

I'm going to continue working on this to build out the Drupal callback part, which should be as simple as looking for another specified element in the $form array, and letting it alter the array which will be returned as JSON. I would also like to improve my handling of callbacks on the JS side, but I'm still learning there and since I have something that works (if inelegantly) I'm inclined to not focus on that initially.

I will then begin working this towards 6.0 so that I can take advantage of the improvements to FormAPI and more closely follow the core AHAH examples. This should let me remove the use of a $_SESSION variable.

Finally, I will need to build out some useful default behaviors, following again on the core AHAH examples and adding the "hide submitting form" option.

Any suggestions or contributions are most welcome. I will also start a d.o project for this in the next week or so just in case I'm super-lucky any anyone wants to submit some code. :)

Javascript

Web Services in Drupal 7

Rob Loach — Wed, 27 Feb 2008 00:34:39 +0000

Just a quick note that nedjo posted a note about Services module going into core. This would allow use of XML-RPC, JSON, RSS, REST, SOAP and more to be loaded through a common Services API.

A Code Sprint will take place in Boston this coming Friday that will focus on the inclusion of this new Services API.

Things to consider with Drupal 7:

Data API: A common interface for providing a way of communication with external services will require a common method of representing data. The Data API will help this.
Registry: The Registry might allow us to specify how much of the Drupal bootstrap we need when creating/using services.
PHP 5: Drupal 7 will target PHP 5, so this means we can take advantage of the libraries that gives us SOAP, SimpleXML, and many others

Again, the URL for the issue is: http://drupal.org/node/145551

Services

Getting Modal Dialogs in Drupal 7 - the wiki

starbow — Mon, 25 Feb 2008 21:53:07 +0000

Update: This all needs to be updated with all the BostonCon information and changes. In the mean time, the best place to catch up is: http://drupal.org/node/218830#comment-764167

Since my drupalcon session did not make the cut, I am putting my notes here. Hopefully we still can get some momentum building for the code sprint (maybe a BOF?). I would be thrilled if anyone wants to jump in a review these patches, advise on the overall direction, or jump in on the TODO items.

Popups: Adding the core modal dialog API (http://drupal.org/node/218820)

This patch provides a minimal API for including modal dialogs in the core. It has the javascript and css necessary to generate simple popups. Most of the brains of this patch could easily be scooped out and replaced with a 3rd party library like jQueryUI Dialogs or Improptu or jqModal

Popups: Adding Modal Dialogs to Admin Pages (http://drupal.org/node/193311)

This is the most interesting one. It is a use case/poster child for modal dialogs. It provides the infrastructure for opening a drupal page inside a popup without needing to modify the original drupal page or form flowing any way. It provides a hook for defining rule for what links on a page want (configurable) popup behavior, and gets the ball rolling with rules for about three dozen links on 12 admin pages and forms.
This page-in-a-popup behavior is what is shown in the various screencasts I have released. One cool feature that has not been shown yet, is that it automatically handles multistep forms/wizards.

Popups in Drupal 7: Retheme page contents (http://drupal.org/node/218830)

This patch provides a way to control the page theme using a url parameter. This makes it easy to for the page-in-a-popup behavior to just get the content that it will display, significantly speeding up the display. There are several interesting proposals in this space, and this patch will most likely be refactored to use one of them:

http://drupal.org/node/134478 - Refactor node rendering (eaton)
http://drupal.org/node/218770 - Drupal Pipes (chx)
http://drupal.org/node/145551 - Enable dynamic page loading and rendering into different formats (JSON, XML) (nedjo)

TODO List (love to get some help here):

Fix the edge cases where js behaviors are not working inside dialog.
- One solution is to make the raw callback always return JSON that includes the Drupal JS settings for the page returned, which are then used to populate behaviors within the scope of the popup.
Make the default theme more attractive.
Explore non-modal messaging/alert options.
- If we get this into core, it is best to make it as widely useful as possible.
- I worry about accessibility with non-modal alert messages
Accessibility issue - get the tab ordering to wrap from last element in dialog back to the first.
Cache the results of hook_popups
Find out what Panels 2 is using
- Internal scrollbar - this can be accomplished with an iFrame or simply clever use of the CSS "overflow: auto" property.
- Nice close window icon.
- Closer to garland colors.
Figure out what to call this effort :)
- Popups, modals, dialogs, modal dialogs, popup modal dialogs, PMDs?
Have muti-popup flow not close popup, instead just replace the contents.

Thoughts on other existing javascript modal dialog projects (Incomplete!):

jQuery UI (1.5 beta)
- Movable & re-sizable (with other jUI bits).
- Themable - but default look is ugly.
- Unimpressive demos
jQuery Improptu (http://trentrichardson.com/Impromptu/, http://drupal.org/project/jquery_impromptu)
- Attractive and Nice overlay effects.
- Simple buttons and single callback (maybe too simple?).
- Themeable
jqModal
- Multiple dialogs at once.
Lightbox/thickbox/craqbox
- All seem too heavy and image specific.

Javascript

Are you interested in learning or using Flex?

Chris Charlton — Mon, 25 Feb 2008 19:41:33 +0000

Theme development

sun's vision for handling embedded/inline content and Wysiwyg in Drupal

sun — Wed, 06 Feb 2008 20:59:46 +0000

As some of you know, I've recently taken over maintenance of Inline and Image Assist, and initiated the Wysiwyg project. That was not only caused by personal interest, but also to take the necessary steps to realize the long awaited Inline API. You might ask yourself, what those three modules have in common or to do with each other at all: They deal with user input, allow to embed complex contents into a content, and provide an interactive GUI for that. If you already had the chance to work with them, you already know that there is a rather hidden, non-obvious hard-dependency between them.

Although I'd really like to discuss both topics (Inline and Wysiwyg support) separately, the gained experience on these topics enforces us to discuss them concurrently. The following mockup hopefully explains why: (see attachment to view in full size)

This draft already incorporates Gabor's battle plan for Wysiwyg support in Drupal.

1. Inline API macro management

configurable per input format
automatically forces/ensures that required HTML tags for macro rendering are in the set of allowed HTML tags.

2. Inline API macro processing

available/required arguments supplied through hook_inline()
support for default values and multiple values
parameter validation
CCK support
stores references of inlined contents in the database to track where else a content (f.e. an image) is in use
very easy to implement for any contrib module
centralizes required code for macro processing into one module
goal: standardized way for macro processing in Drupal

3. Inline API macro rendering

allows to display any contents inline
cached output via Drupal's filter system
provides previews for Wysiwyg editors

4. Inline/Wysiwyg API plugin framework

exposes an Inline API plugin widget to textarea buttons and Wysiwyg editor buttons
invokes a widget in a popup, modal dialog (you name it...)
returns user supplied data from the widget as a macro into the content (textarea/editor)
allows to edit existent tags in contents (tags shouldn't be written manually)

5. Inline API widget

each hook_inline() implementation automatically provides a default/basic widget
supports extended widgets (f.e. Image Assist)
returns user supplied data (macro parameters) to the framework

6. Inline API plugin button

controlled by Inline API macro management
displayed below a textarea
only displayed if no Wysiwyg editor is enabled for a field

7. Inline API instant plugin button

inserts an Inline tag based on an already displayed widget (f.e. node attachments)

8. Wysiwyg API (editor) controller

configurable per input format (in D5/6 also per content-type, page url, and field name).
automatically forces/ensures that required HTML tags for all editor plugins are in the set of allowed HTML tags.
allows editor and editor plugin configuration per editor
may allow to assign an editor or editor profiles to user roles
supports loading of different editors on the same page

9. Wysiwyg API plugin button

controlled by Inline API macro management
displayed in an editor's toolbar
invokes a widget via the Inline/Wysiwyg API plugin framework

10. Wysiwyg API editor plugin hook

allows to add external editor plugins via hook_wysiwyg_plugin() (f.e. Link to node)

As a result of having both APIs working, a module like Image Assist would not have to deal with macro processing at all. Image Assist would only provide a extended widget (for selecting images), some rendering-related settings, and a button for Inline/Wysiwyg API. The framework takes care of user access, user input validation, generating and parsing of macros, aso.
As an (almost working) example, the former Inline v1 module (which allowed to embed uploaded attachments into a content) has been ported to implement hook_inline(). Many feature requests of Inline's issue queue are actually resolved due to that.

While Inline API is already under heavy development and plenty of above features are already implemented, Wysiwyg API only gained interested developers so far. From my personal experience, I can understand that not many Drupal developers have studied and dealt with the code and issue queues of available macro-based, Wysiwyg editor and editor plugin modules for Drupal - which is badly required to bring both APIs into shape. However, if you would like to contribute to these efforts, please let me know.

Wysiwyg

Popup Dialogs and CCK

starbow — Thu, 31 Jan 2008 01:04:37 +0000

I have been playing with the CCK head and my modal dialogs, and you can see the result at:

http://www.citris-uc.org/blog/tao/drupal_modal_dialogs_and_cck (2 minute loop)

I am particularly happy with the new ability to detect if the drag-and-drop table has been modified, and to offer to save the current progress.

Aside: Those of you paying close attention might have noticed me cheating. The /admin/content/types page doesn't actually have "fields" links. But it should (http://drupal.org/node/215623)

Usability

jQuery / JS ninja wanted for collaboration

agentrickard@drupal.org — Mon, 28 Jan 2008 15:11:56 +0000

It's that time. Time to start porting MySite to Drupal 6. It will take some effort, since I will be refactoring some code and doing an API cleanup to more closely integrate with Panels.

One of the coolest features in MySite is the ability to drag-and-drop elements around the page. Problem is, the feature is a little buggy and relies on the jQuery Interface project. Based on some recent discussion, I think a Drupal-specific solution might be best.

But I'm not a jQuery ninja. So I'm looking for one. I'm already hoping to leverage starbow's AJAX popup modals to make for cooler interfaces.

If you're a jQuery ninja looking to contribute to a Drupal project, just let me know.

MySite

Ajax Modal Dialogs (Popup Module)

starbow — Sat, 26 Jan 2008 01:27:59 +0000

I have a new Drupal 6 module that brings modal dialog to the admin interface. You can check out a screencast at:
http://www.citris-uc.org/drupal_modal_dialogs

The project itself is at:
http://drupal.org/project/popups

Some things of note:
* The project currently includes rules for about 10 admin pages.
* It includes a hook_popups so other modules can define rules for their pages or forms.
* It also includes a simple generic API for creating popup dialogs (ie: other modules can call Drupal.popups.message( 'Hello World' ) ).
* I have figured out how to get Drupal to serve any page without the applying the page theme, which really cuts down on the traffic and Ajax parsing.
* The appearance of the popups can be modified by rules in your theme's style.css.
* I'd love help testing and polishing. I really want to get functionality like this built into Drupal 7.

The announcement on my site didn't seem to get picked up by Drupal Planet, and it is already a little out of date (most of the limitations listed have been fixed in the latest beta).

Usability

jQ Module

aaron — Thu, 24 Jan 2008 19:38:20 +0000

I just created the jQ module. This attempts to centralize jQuery plugins (from an administration view-point), and somewhat simplify jQuery development. As an example, I also created the hoverIntent wrapper module.

Currently, jQuery plugin support in Drupal is spotty. There are a few modules creating wrappers willy-nilly, some with little or no documentation about how to use them. Based on how Drupal evolves, I imagine that will continue to happen, and is not necessarily a bad thing (except the documentation part).

This initial jQ release creates two things to help out. First, it creates an admin screen to see all registered plugins, with descriptions, versions, and home pages. It uses hook_jq to do this, so that any module may define a plugin, passing along any js or css files that need to be loaded when invoked. This information is cached, so we don't have to poll every single module every page load. Additionally, the administrator may disable plugins globally from this screen.

Secondly, it allows modules or themes to invoke a plugin with a simple jq_add('plugin-name') call. That function will take care of ensuring the plugin is enabled (which is TRUE by default), loading any required files (once), and allowing the plugin wrapper module to do any fancy processing it might want to do.

I believe this will help standardize how plugins are invoked and used, and will help make things a little simpler when developing. I encourage maintainers of other jQuery plugin wrapper modules to support jQ, even optionally. I can help with that if you're interested.

I'd love any feedback, comments, questions, criticisms.

Thanks,
Aaron Winborn
Advomatic

Javascript

Moving JS to the Bottom of the Page

greggles — Wed, 23 Jan 2008 18:13:37 +0000

I've been using yslow to review a few sites and always leave one last step out: move javascript to the bottom of the page

So, on a test site I just moved my

<?php
 print $scripts 
?>

to the bottom of the page.tpl.php right before the print $closure.

Of the two benefits (progressive rendering and better download parallelization) the progressive rendering makes a big differences for certain pages. For example, the admin/build/menu page problem is reduced - users see the page content and then the interface freezes while the JS loads/modifies the page. This makes it seem like "oh, js is working" as opposed to "woah, white screen of death!"

They mention that not all scripts can support this, such as document.write. AFAIK we don't use that much (at all?) so I feel like this is a good improvement. Has anyone else done this? Any advice you can share? Any reason not to do this for all themes in Drupal7?

EDIT: adding in the Javascript group so they can share their knowledge

Javascript

Weird Javascript syntax..

tjholowaychuk — Sat, 01 Dec 2007 02:04:03 +0000

Other than this there isnt really much that strikes me as being overly weird about javascript but I cannot find any good documentation on this syntax that I have seen around because I dont know what it does! Any suggestions or documentation would be great thanks, its just been bugging me...

(function() {
    // ...
})();

(function() {
    // ...
})(var);

function() {
    // ...
})();

Javascript

Aptana / Eclipse Drupal profile

tjholowaychuk — Tue, 27 Nov 2007 18:16:29 +0000

has anyone documented the drupal js functionality for use with Aptana ?

Javascript

I really need some help with ajax and jquery

twooten — Sat, 24 Nov 2007 12:59:37 +0000

Hello everybody,

I'm sure this is not the right place to post this. It's just that I'm not sure where to post it and I'm about to pull whats left of my hair out messing with this ajax stuff. I have an idea for a niche website and am working to develop it. I want to throw in some ajax and jquery in order to enhance the user experience. So I'm trying to learn how to do things with ajax.

What I am trying to learn is how to allow the user to click on a link or button that will make a database call and get some information to display in a div on the page. Eventually this data will be called from a table that is created by my customized module.

After reading Pro Drupal Development and trying out various code I have been able to write the module and it creates the table. But for testing purposes with this ajax code I have just been using the node table and grabbing the nid and title for the data to display.

Can someone please look at my code and tell me what I need to do to make this work. I want the user to click on a link 'Show Titles', and a list of all node titles will be called from the database and display inside a div. Then every click after that will just call the ajax functions and refresh without a full page reload.

I will attach the code I have so far. The node titles do display on the page inside the div but when I click the link to refresh the page I get some stuff that looks like this:

{ "nodeList": "Site Content Type Setup\x3cbr\x3eRegency Hotel\x3cbr\x3eFirst Shift\x3cbr\x3eHilltop\x3cbr\x3eFirst Shift\x3cbr\x3eSecond Shift\x3cbr\x3eSecond Shift - Regency\x3cbr\x3eWendys\x3cbr\x3eFirst Shift\x3cbr\x3eFirst Shift\x3cbr\x3eHilton Hotel\x3cbr\x3eFirst Shift\x3cbr\x3eJQuery Test\x3cbr\x3eTabs Test\x3cbr\x3etest post\x3cbr\x3edrury\x3cbr\x3efirst shift drury\x3cbr\x3emcdonalds\x3cbr\x3efirst shift - mcdonalds\x3cbr\x3eMirandas Place\x3cbr\x3eFirst shift - Mirandas\x3cbr\x3eTim Wooten\x3cbr\x3eJimmie Officer\x3cbr\x3etest shift\x3cbr\x3eAjax Image Loader\x3cbr\x3eSecond Shift - Mirandas\x3cbr\x3eajax test\x3cbr\x3elist test\x3cbr\x3e" }

Thanks for any help.

Tim

Javascript

Inline search

tjholowaychuk — Thu, 15 Nov 2007 01:40:23 +0000

I plan to make an inline search module for D6. Basically it would provide a UI for various pages such as permissions, modules, menu, and other core ( and well supported module pages ) to provide a very fast way to narrow down the page content to find what you want.

For example on the permissions page if you are searching for "edit page content" rather than scrolling down and finding the permissions amoung many other modules simply type "page" and all other table rows that do not contain this text will simply be hidden. This is the base idea, very simple, but I can see this being handy at times.

Also rather than simply having a textfield to search, portions of the module may provide specialized options for specific pages again such as access controls allowing "quick links" of modules which would simply hide all permission sections that are not relevant to the module you selected. Or perhaps on the menu page choosing "show only disabled items" etc.

Javascript

JavaScript errors with Google Gadgets

agentrickard@drupal.org — Wed, 24 Oct 2007 01:54:49 +0000

Over on the MySite project we're having a recurring issue with handling the JavaScript for Google Gadgets on our pages. It looks as though there is a problem with the order in which the JS are executed -- but that's really a guess on my part.

Sometimes, Flash embeds don't fully load: http://drupal.org/files/issues/gadgets.png

Sometimes, the JS loads the same element repeatedly: http://drupal.org/files/issues/GoogleWidgetScreenshot.png

Expert 'scripters exploring the issue would be much appreciated.

http://drupal.org/node/170660

You can see the MySite pages in action on the demo site:

http://therickards.com/mysite/demo

http://therickards.com/mysite/agentrickard

For reference, MySite uses the jQuery Update and jQuery Interface modules to provide drag-and-drop functionality.

MySite

Make iframe resizable (like textarea) with JQuery

svendecabooter@drupal.org — Mon, 01 Oct 2007 13:37:53 +0000

Hi,

I wonder how hard it would be to make an iframe resizable, much like textareas are resizable in Drupal (with the textarea.js).
The reason i ask this, is because i have created a module to integrate the "Whizzywig" WYSIWYG editor into Drupal (see http://drupal.org/project/whizzywig).
This editor replaces the textarea with an iframe to allow WYSIWYG editing.

Now some people already asked me if it would be possible to have a 'grippie' like textareas have, so the editor can be resized.
I have roughly gotten this to work, by making a copy of textarea.js and replacing

$('textarea.resizable:not(.processed)').each(function() {

with

$('iframe:not(.processed)').each(function() {

This shows the 'grippie' under the iframe and lets it resize, but now i cannot input any more text, which kinda sucks :)
There seem to be some other things not working exactly, such as the editor width.

In short: i'm looking for someone with decent JS/JQuery skills that is able to get this functionality working, or at least have a look at it :)
Many people will be very happy with this, and you will ofcourse get proper credit for the work.

I'm a JS/JQuery newbie, so i have no clue how to get this working like it should.

Please reply to this thread or contact me directly if you wanna help me out on this.

Much appreciated

Sven

Javascript

Views Slideshow

aaron — Sun, 23 Sep 2007 22:18:20 +0000

I just added a new slideshow mode to the Views Slideshow module. You can see a demo at Drupal Hub. It uses JQuery and views, so any type of view could be made into a slideshow. The current modes are single frame, as seen in the left sidebar of the demo page, and with 'thumbnails' as shown on the content of that page.

I also revamped the themes for it, making it easier to theme specific elements of the slideshow.

Note that until Views 2 comes out, you either have to set global options (fade, timer, etc) or use the arg php code to add individual view options. Instructions are available at /admin/build/views/views_slideshow once you have the module installed.

Still todo: add slideshow controls. Easy to do; all the hooks are there. I just need to find a couple of hours of my "copious amounts" of free time to do it... :/

Aaron Winborn
Advomatic

Views Developers

jQueryCamp '07 (Boston)

John Resig — Fri, 07 Sep 2007 12:45:48 +0000

We're going to be having the first all-day jQuery mini-conference October 27th, here in Boston, MA. Already, a large portion of the jQuery team will be attending and giving talks - so if you're interested in meeting some of the people who've helped to make jQuery possible and chatting with fellow developers, then this is a fantastic place to do it! (Note: jQuery is the JavaScript library that's used to power Drupal.)

This event will be immediately following the Ajax Experience conference. A number of people are coming to both events, generally sponsored as business travel by their employer. If you need any more details about the events in order to coordinate that, please let me know.

Be sure to add yourself to the registration list so that we know how large of a venue to get. Hope to see everyone there!

If you, or your company, is interested in sponsoring this event, please contact John Resig. We're generally looking for a couple hundred dollars to help defray the cost of food - and if we get enough, t-shirts for those who attend.

Javascript

Software Engineer | Getty Images

chilli42 — Mon, 20 Aug 2007 14:04:10 +0000

Who we are:

Getty Images is the world’s leading creator and distributor of visual content and the first place creative professionals turn to discover, purchase and manage imagery. The company’s award winning photographers and imagery help customers create inspiring work which appears every day in the world’s most influential newspapers, magazines, advertising campaigns, films, television programs, books and Web sites. Headquartered in Seattle, WA and serving customers in more than 100 countries, Getty Images believes in the power of imagery to drive positive change, educate, inform, and entertain. Visit Getty Images at http://gettyimages.com.

Mission:

This position is responsible for leading front end UI strategies and implementation. The candidate is responsible for all client side/front end development of dynamic web content. This position also involves creating user interface components and designing Web 2.0 features. The candidate should have expert knowledge of HTML, CSS, and JavaScript. Must understand Ajax, HTTP, and DOM manipulation. Should have experience in various Javascript UI frameworks such as script.aculo.us, Yahoo! UI library, prototype.js and others. Must have an expert knowledge of cross browser compatibility and strategies for cross browser UI development and support. Knowledge of Flash, Actionscript, and Ajax/Flash interaction are also very important.

Responsibilities:

Researches new UI technologies, creates proof of concepts and prototypes dynamic web functionality.

Responsible for defining all HTML/CSS/Javascript standards.

Participates in code development by actively writing code, testing completed code, and working with software engineers to create reusable web components.

Responsible for ensuring cross browser compatibility.

Responsible for creating Ajax components and user interfaces.

Collaborating with designers and implementing design mock ups.

Works with Flash developers to create fluid designs and user interaction between Flash/dynamic content.

Testing UI components.

Qualifications:

BS Degree.

5+ years developing user interface components using HTML, Javascript, and CSS.

Solid understanding of web usability and creativity for implementing dynamic web experiences.

Expert knowledge of HTML, CSS, Javascript and Ajax.

Must know about cross browser compatibility, DOM manipulation, and user interface design.

Solid understanding of CSS and table based layouts.

Knowledgeable about Web 2.0 and mash ups.

Experience in ASP.NET or JSP a plus.

Behaviors:

Work from verbal and written instructions of varying levels of detail.

Ability to take direction from a tech lead and Director.

Exhibits a high level of individual initiative and creativity.

Please visit our website at www.gettyimagesjobs.com and review our Compelling Offer and Leadership Principles.

Getty Images, Inc. is an equal opportunity employer and strongly supports diversity in the workplace.

Javascript

Dynamic Views module (AHAH page loads)

ChrisB — Sat, 28 Jul 2007 20:06:47 +0000

Hi Everyone,
I just wanted to let you know about a new views related module, Dynamic Views. (http://drupal.org/project/dynamic_views) It allows you to dynamically update the main content area (no page reload) when you click a node link in a view block. It also allows you to change dynamically update a view using a filter at the top. You can combine it with some elements of the jquery interface library for some pretty cool effects. (see http://warnerbrosrecords.com/artists)

I've pasted in the description from the README.txt file here. The module is in early stages, but works well. See at the bottom of the readme for some planned enhancements/todos.

Any feedback, comments, suggestions and criticisms are welcome!

-Chris

Description

Dynamic Views allows users to create dynamically updated content areas using
views. It provides the ability to combine block and page views along with
exposed filters to create dynamic pages that update without a page refresh.

Dependencies

Views

Installation

Add to your modules directory and enable

Configuration

First you need to just setup a standard view

Use Case #1:
A teaser list of nodes in a pager-enabled-block showing up on the page view
with 1 Full Node setup

Enable the page-type for your view
Set the type of view to Dynamic Full Node
Set the # of Nodes Per Page to 1
Enable the block-type for the view
Set the type of view to Dynamic Teaser List
Set the # of Nodes Per Block to 3-4
Enable "[More] Link?"
Save view and go to admin/build/blocks
Enable Dynamic: your_view in a region of your choice and make sure its viewable on your view page
Go to your pages url and click on a node title in the block and watch it get updated in the main
content area. You can also click your page #'s in the blocks pager and watch the block get updated
with the new page.

Use Case #2:
Use an exposed filter in your view to dynamically update your content.

Enable the page-type for your view
Set the type of view to Dynamic Filter: Teaser/Full/List/Table
Expose a filter that will create a select list. (eg. Taxonomy terms, Content types)
Check "Force Single" and "Lock Operator"
Save view
Visit your view's url and click on a link in the newly created list of items that replaced your
filter and watch the content update in response.

Future Enhancements

Easily turn on/off fancy jQuery effects

Cool Effects

In order to achieve similar functionality to http://warnerbrosrecords.com/artists you can
combine this module with the jQuery interface slider plugin from http://interface.eyecon.ro/download.

Some extra javascript + styles will need to be used in order to set it up.

Todo

Write up a howto to create a nice slider using jQuery interface slider
Rewrite the exposed filters code so that it works with any type of exposed filter
Allow dynamic blocks on their own without requiring a dynamic page as well.
Instead of using extra view types to setup the dynamic functionality, add checkboxes to "make view dynamic"

Bugs/Features/Patches:

If you want to report bugs, feature requests, or submit a patch, please do so
at the project page on the Drupal web site.
http://drupal.org/project/issues/dynamic_views

Views Developers

Spry AJAX Framework

Rob Loach — Mon, 23 Jul 2007 20:37:41 +0000

I just created the Spry Framework Module to facilitate the implementation of some Spry Goodness into Drupal.

The Spry framework for Ajax is a JavaScript library for web designers that provides functionality that allows designers to build pages that provide a richer experience for their users. It is designed to bring Ajax to the web design community who can benefit from Ajax, but are not well served by other frameworks.

So far the only module that uses it is the Spry Validation Text Field, which uses CCK to add a text widget to nodes. You give it a validation type, as well as some formatting options, and you have real time text validation that looks pretty. Since Spry is so powerful, there are bound to be more addon modules in the future.

What I'm looking for are other ideas on how Spry could be used within Drupal. Maybe a replacement of the image_gallery.module with the Spry Image Gallery Example?

Tell me what you think!

Javascript

JQuery UI

starbow — Thu, 05 Jul 2007 18:19:48 +0000

Has anyone had a chance to check out the new JQuery UI? I think it is what people have been referring to as Interface2.

Update: It looks like Dimitri has created the UI project to deal with jQuery UI in D6. I have just created the jQuery UI Backport project to allow the library to be used in D5 without breaking anything.

Javascript