Move JQuery input related code to

[zhil]

I installed your bundle, but its failed to work for me :) After digging a while, I founded reason - my js code are included in the bottom of the page, so at the point, when code like

inserted, JQuery lib is not loaded yet.

It can be fixed by moving JS scripts on top of the page, but its actually bad solution, because

1. If user have slow connection, html page can be loaded and build before actual included file loaded.
2. Its good idea to put JS includes on the bottom of the page, becase its speed up rendering of the page and improve user expirience.

So I have suggestion - rebuild code and add .ready() handler, so JQuery code will be exected when DOM model is loaded and all JS scripts are loaded.

I would gladly do it myself and submit pull request, but I dont know how I can do it in git - I just starting work with it (moved from subversion).

Let me know what do you think about this improvement.

[ioalessio]

i know this limitation, $(function{}); is equivalent to $(document).ready(function(){});

In my "roadmap/wishlist" there is a step about this. I wish to move all widget's javascript into a different block (stylesheets too) and render that block on the bottom of the page (after jquery library initialization)

[zhil]

hm, thats kind of strange - if $(function{}); is equivalent to $(document).ready(function(){}); it should not be important where is js includes located.

But right now it doesnt work with includes in the bottom of the code.

[ioalessio]

$(document).ready(function(){}); is a jquery function. If you haven't jquery library already loaded it doesn't work.

[zhil]

mm.. nice note, ioalessio.

not sure how it can be solved though, any ideas?

[mjhapp]

I'm interested to see this solution.

For my part, I include the jQuery core in the ..head.. and put the rest of my javascripts at the bottom of the page. jQuery is important enough that I want it loaded immediately and it's most likely cached, anyway.

[ioalessio]

I'm planning a huge refactoring of the bundle. In the new version all widgets will be rendered as "html only": using tag class for script call and attributes for script options and all scripts and stylesheets are written in a one (or more) external files.

PHP $form->add('date', 'io_widget', array('options' => 'foo', 'option2' => 'bar'); Example: Output of date widget: [ input type="date" class="io_widget" data-option="foo" data-option2="bar" ]

formbundle.js:
$(".io_widget").each(function(){ //execute js script for io_widget $(this).widget_function({ option: $(this).attr('data-option'), option2: $(this).attr('data-option2') }); //todo: need to use http://api.jquery.com/on/ for register event on ajax call }

ioformbundle.css: .io_widget { [custom rules] }

I'm also planning to include backbone.js library for this new developement.

[mjhapp]

Could you just have a single io_options attribute that contains a json-encoded options list to apply to the jQuery function, rather than iterating through a bunch of data-option(n) attributes? :

[ input type="date" class="io_widget" io_widget_options="{[ 'date-format':'Ymd', 'minDate':'2012-01-01']}" ]

$(".io_widget").each(function() { $(this).widget_function( JSON.parse( $(this).attr('io_widget_options') ) ); }

Or something similar...