Topic: Update div with rjs problem

Firebug is giving this "element undefined" error.

show: function(){
for (var i = 0; i < arguments.length; i++) {
var element = $(arguments[i]);
element.style.display = '';
}
},

Here is the link I'm trying to use
<%= link_to_remote ("quick info", 
                            :url => { :action => 'list_desc.rjs',
                            :id => company},
                            :loading => "Element.show('loading')") %>
        <div id="short_desc<%= company.id %>" style="display:none;">Loading...</div>

Here's the list_desc.rjs
page.hide 'loading'
page.replace_html "short_desc#{@company.id}", 'test'
page.visual_effect :toggle_slide, "short_desc#{@company.id}", :duration => 2

and finally the controller
  def list
    @page_title = "Your Listing"
    @company_pages, @companies = paginate :companies, :per_page => 10
    return if request.xhr?
  end
 
  def list_desc
    @company = Company.find(params[:id])
  end

Thanks for everything.

Re: Update div with rjs problem

Hey,

Try calling it without the .rjs format extention like so...

<%= link_to_remote ("quick info",
                          :url => { :action => 'list_desc',
                          :id => company},
                          :loading => "Element.show('loading')") %>
        <div id="short_desc<%= company.id %>" style="display:none;">Loading...</div>

Let me know if it works

Re: Update div with rjs problem

I made a few changes.  Noticed I was trying to show and hide the same element.  Removing rjs got the error to show up as a popup though so at least that's different.

Here's what I have now.

my link

<%= link_to_remote ("quick info", 
                            :url => { :action => 'list_desc',
                            :id => company,
                            :loading => "Element.show('loading')"}) %>
        <div id="loading" style="display:none;">Loading...</div>
        <div id="short_desc<%= company.id %>"></div>
    </div>

list_desc.rjs
page.hide "loading"
page.replace_html "short_desc#{@company.id}", :partial => 'detail'
page.visual_effect :toggle_slide, "short_desc#{@company.id}", :duration => 2

controller
  def list
    @page_title = "Your Listing"
    @company_pages, @companies = paginate :companies, :per_page => 10
    return if request.xhr?
  end
 
  def list_desc
    @company = Company.find(params[:id])
  end

  def detail
    @company = Company.find(params[:id])
  end


I get no errors now....actually I get nothing.  No errors or results and nothing in Firebug.  I don't think it's passing the link and id right though cause when I hover over the link it shows in the bottom "http://localhost:3002/biz/list#" so is there a problem with the link maybe or is that jsut cause it's passing javascript. 

Thanks

Re: Update div with rjs problem

Yep sorry missed that one, try this...

 <%= link_to_remote ("quick info",
                             :url => { :action => 'list_desc',
                                       :id => company.id },
                             :update => { :complete => "div-to-update",
                                          :loading => "Element.show('loading')"}) %>
         <div id="loading" style="display:none;">Loading...</div>
         <div id="short_desc<%= company.id %>"></div>
     </div>

let me know how ouy get on

Last edited by anti-culture (2007-01-12 12:31:28)

Re: Update div with rjs problem

erikb wrote:

my link

<%= link_to_remote ("quick info", 
                            :url => { :action => 'list_desc',
                            :id => company,
                            :loading => "Element.show('loading')"}) %>
        <div id="loading" style="display:none;">Loading...</div>
        <div id="short_desc<%= company.id %>"></div>
    </div>

the problem that u were encountering before was becoz - you did not created the element with id "loading" - thats why whenever the script would try to find the element, u got an error - the addition of

 <div id="loading" ... > ... </div>

did the job.

erikb wrote:

I get no errors now....actually I get nothing.  No errors or results and nothing in Firebug.  I don't think it's passing the link and id right though cause when I hover over the link it shows in the bottom "http://localhost:3002/biz/list#" so is there a problem with the link maybe or is that jsut cause it's passing javascript. 
Thanks

The link is being shown that way coz the 'href' attribute of anchor tag is set to "#" and a javascript is being triggered on 'onclick' event of the anchor tag.
e.g.

<a onclick="javascript:function" href="#">guick info</a>

radical vision fuels disruptive technologies

Re: Update div with rjs problem

Well it slides down now but doesn't slide back up.  Firebug gives me an error on line 736

Effect.SlideUp = function(element) {
734 element = $(element);
735 element.cleanWhitespace();
736 var oldInnerBottom = $(element.firstChild).getStyle('bottom');
737 return new Effect.Scale(element, 0,
738 Object.extend({ scaleContent: false,
739 scaleX: false,
740 scaleMode: 'box',
741 scaleFrom: 100,
742 restoreAfterFinish: true,
743 beforeStartInternal: function(effect) {
744 effect.element.makePositioned();
745 effect.element.firstChild.makePositioned();
746 if(window.opera) effect.element.setStyle({top: ''});
747 effect.element.makeClipping();
748 effect.element.show(); },
749 afterUpdateInternal: function(effect) {
750 effect.element.firstChild.setStyle({bottom:
751 (effect.dims[0] - effect.element.clientHeight) + 'px' }); },
752 afterFinishInternal: function(effect) {
753 effect.element.hide();
754 effect.element.undoClipping();
755 effect.element.firstChild.undoPositioned();
756 effect.element.undoPositioned();
757 effect.element.setStyle({bottom: oldInnerBottom}); }
758 }, arguments[1] || {})
759 );
760}

Here's the only changes I made to the link
<%= link_to_remote ("quick info", 
                            :url => { :action => 'list_desc',
                                      :id => company.id},
                            :update => { :complete => 'short_desc' + company.id.to_s,
                                         :loading => "Element.show('loading')"}) %>
        <div id="loading" style="display:none;">Loading...</div>
        <div id="short_desc<%= company.id %>"></div>
    </div>

Thanks for all the help

Re: Update div with rjs problem

I think you'll need an Element.hide('loading') action on complete/success

Re: Update div with rjs problem

Alright screw the loading at this point all i'm loading is text so it's not really needed.  I had this in my list_desc.rjs file "page.hide "loading"" but maybe that wasn't working. 

So I took that out but i'm still getting the same error?  Any other ideas to check?  Thanks

Last edited by erikb (2007-01-12 15:01:45)

Re: Update div with rjs problem

I am not sure how would the code behave under the given situation - but i suggest to try this

<%= link_to_remote ("quick info", :update => "short_descID",
         :url => { :action => 'short_desc', :id => company.id},
         :loading => "Element.show('loading')",
         :loaded => "Element.hide('loading')") %>
         
<div id="loading">Loading...</div>
<div id="short_derciID"></div>

it worked for me on IE (latest version).

I was also rumbling with a similar kind of problem - the visual_effect. Since the problem i am facing is also - with div and rjs update - I will post it here.

I want to create comments for different posts such as this forum post (but in a different context offcourse), where when a user click on a link e.g. "Add comment" - a form is loaded (by ajax call) and when the user clicks on the submit button on the form, that text box should fade in to the comment as text (by ajax call).

Now i can load the form the data goes back to the server and the newly created comment is displayed. but the problem is that - the visual_effect that i want to put does not work - 2 effects - 1) appear/fade the form 2) highlight the new comment div - with div id = "comment_<%=new_comment.id">"

the first effect code is given below.

    <div id='post_comments_link2' class="post-comments-link">
        <%= link_to_remote "drop a line", :update => "new_comment_#{posts.id}",
                    :url => { :controller => 'comments', :action => "new", :id => posts.id, :object_type => 'posts' },
                    :loading => "Element.show('post_loading')",
                    :loaded => "Element.hide('post_loading')",
                    :success => "Element.show('new_comment_#{posts.id}')",
                    :complete => visual_effect(:appear, "new_comment_#{posts.id}", :duration => 3, :delay => 3.0) %>
        </div>
        <div class="post-comments">
            <div id="post_loading" style="Display:none;">Loading...</div>
            <div id="new_comment_<%=posts.id%>" style="display:none;"></div>
            <div id="comments_list_<%=posts.id%>" class="comments_list"></div>

there is no appear visual_effect on the form loaded - any ideas ?

for the second visual_effect "to highlight the newly created comment" i am using RJS - but the solution to this problem would also solve the other - i think.
thanks

radical vision fuels disruptive technologies

Re: Update div with rjs problem

Well it pretty much works now.  I get no errors, but after the page loads the very first time you push the button it toggles down then back up.  After that  it works normally, you push the button once and it goes down.  Push it again and it goes up. 

Is there any way to fix it so the first time just goes down and not down then immediately up?