Question

I currently have a Rails website that has some Prototype scripting in it. My boss however wants me to to convert the page so that it uses the JQUERY library instead. I don’t have too much experience in programming in Javascript so I am a bit confused. I basically downloaded a plugin called ‘jrails’ that helps move over the helpers that are need from Prototype’s ‘script.aculo.us’ and translates them into something JQUERY can understand

Here are two codes:

Prototype:

new Form.Element.Observer('new_member_search', 0.5, function(element, value){
    new Ajax.Updater('ProjectMemberNew', '/of/user/search', {
        asynchronous:true,
        evalScripts:true,
        parameters:'username=' + encodeURIComponent(value)
    }); 
});

Jquery:

$('#new_member_search').delayedObserver(0.5, function(element, value){
    $.ajax({
        data:'username=' + value,
        success:function(request){
            $('#ProjectMemberNew').html(request);
        },
        type:'post', 
        url:'/of/user/search'
    });
});

The prototype code works fine, but the Jquery doesn’t seem to run for some reason. I haven’t changed anything in the View by the way, just included ‘jrails’ in the page. Any idea why this isn’t working?
Thanks,

EDIT 1:

So I ran some tests in Firebug and I’m thinking maybe I should have posted the original rails code:

 <%= drop_receiving_element drop_id,
  :onDrop => "function(drag_element, drop_element, event){
if (confirm(\"#{escape_javascript(_('This will remove User from this Group, are you sure?'))}\"))
{#{remote_function(:update => 'module_content',
:url => {:controller => :projects,
:action => :member_delete,
:id => @project.id},
:with => "'u=' + encodeURIComponent(drag_element.id)"
)};}
}",
  :accept => 'RolesUsersSelection',
  :hoverclass => "#{drop_class}_active"

%>

When I run the webpage on firebug, the jquery version is giving me a couple errors:

Prototype is not defined
[Break On This Error] linear: Prototype.K,
effect...2478493 (line 71)
$.effects is undefined
[Break On This Error] $.effects.drop = function(o) {
jquery...4111587 (line 15)
$("#RemoveThisMember").droppable is not a function
[Break On This Error] }, hoverClass:'ProjectRoleDropDelete_active'})
member_edit (line 323)
$("#role_15_user_4").draggable is not a function
[Break On This Error] $("#role_15_user_4").draggable({revert:true}) 

Something tells me I cant just transfer over to the jquery library without making any changes to the rails code..

Answer 1

You had to initialize jquery first, then jquery-ui and then jrails. if its not in that order delayedObserver or any of the other helpers won’t initialize. Strange indeed. https://github.com/aaronchi/jrails/issues#issue/6