# CSS style disappear when using RJS and page.replace

**URL:** <https://www.ruby-forum.com/t/css-style-disappear-when-using-rjs-and-page-replace/225970>\
**Category:** Rails\
**Created:** [October 8, 2007, 1:56pm UTC](https://www.ruby-forum.com/t/css-style-disappear-when-using-rjs-and-page-replace/225970 "2007-10-08T13:56:26Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![gustav](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/919ad9/32.png) [@gustav](https://www.ruby-forum.com/u/gustav)\
**Post date:** [October 8, 2007, 1:56pm UTC](https://www.ruby-forum.com/t/css-style-disappear-when-using-rjs-and-page-replace/225970/1 "2007-10-08T13:56:26Z")

</div>

Hi! I’m using RJS to process a form in a partial (\_newtask.rhtml) and  
replace a partial (\_tasks.rhtml) in the same view (index.rhtml):

- \_newtask.rhtml-view \*  
\<%= form\_remote\_tag :update =\> “tasks”, :url =\> { :action =\> ‘create’ }  
%\>

- task\_controller.rb \*  
def index  
@task = Task.new  
@projects = Project.find(:all)  
@tasks = Task.find(:all)  
@timeframes = Timeframe.find(:all)  
@tasks\_today = Task.find(:all, :conditions =\> “timeframe\_id = 1”)  
@tasks\_thisweek = Task.find(:all, :conditions =\> “timeframe\_id = 2”)  
@tasks\_nextweek = Task.find(:all, :conditions =\> “timeframe\_id = 3”)  
@tasks\_later = Task.find(:all, :conditions =\> “timeframe\_id = 4”)  
end

def create  
@newtask = Task.new(params[:task])  
@newtask.save  
@tasks\_today = Task.find(:all, :conditions =\> “timeframe\_id = 1”)  
@tasks\_thisweek = Task.find(:all, :conditions =\> “timeframe\_id = 2”)  
@tasks\_nextweek = Task.find(:all, :conditions =\> “timeframe\_id = 3”)  
@tasks\_later = Task.find(:all, :conditions =\> “timeframe\_id = 4”)  
end

- create.rjs-template \*  
page[:tasks].replace :partial =\> “tasks”

When submitting the form and the \_tasks-partial updates, the CSS-styling  
has disappeared. What have I missed?

Also, is there a way that I can leave out the @task\_today etc. from the  
create-method. Doesn’t seem very DRY 😉

Thanks!

---

<div class="post-metadata">

**Author:** ![gustav](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/919ad9/32.png) [@gustav](https://www.ruby-forum.com/u/gustav)\
**Post date:** [October 8, 2007, 2:27pm UTC](https://www.ruby-forum.com/t/css-style-disappear-when-using-rjs-and-page-replace/225970/2 "2007-10-08T14:27:39Z")

</div>

Why would you need

@tasks\_today = Task.find(:all, :conditions =\> “timeframe\_id = 1”)  
@tasks\_thisweek = Task.find(:all, :conditions =\> “timeframe\_id = 2”)  
@tasks\_nextweek = Task.find(:all, :conditions =\> “timeframe\_id = 3”)  
@tasks\_later = Task.find(:all, :conditions =\> “timeframe\_id = 4”)

when creating?

On 10/8/07, Gus Vs [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> ```
> @task = Task.new
> @newtask = Task.new(params[:task])
> 
> ```
> 
> When submitting the form and the \_tasks-partial updates, the CSS-styling  
> has disappeared. What have I missed?
> 
> Also, is there a way that I can leave out the @task\_today etc. from the  
> create-method. Doesn’t seem very DRY 😉
> 
> Thanks!

–  
Ramon T.

---

<div class="post-metadata">

**Author:** ![gustav](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/919ad9/32.png) [@gustav](https://www.ruby-forum.com/u/gustav)\
**Post date:** [October 8, 2007, 2:37pm UTC](https://www.ruby-forum.com/t/css-style-disappear-when-using-rjs-and-page-replace/225970/3 "2007-10-08T14:37:34Z")

</div>

> Why would you need
> 
> @tasks\_today = Task.find(:all, :conditions =\> “timeframe\_id = 1”)  
> @tasks\_thisweek = Task.find(:all, :conditions =\> “timeframe\_id = 2”)  
> @tasks\_nextweek = Task.find(:all, :conditions =\> “timeframe\_id = 3”)  
> @tasks\_later = Task.find(:all, :conditions =\> “timeframe\_id = 4”)
> 
> when creating?

It doesn’t seem very DRY does it 🙂 But if I leave them out I get “You  
have a nil object when you didn’t expect it!” error in \_tasks.rhtml.  
This probably relates to why the CSS doesn’t load, but I don’t know  
how…

---

<div class="post-metadata">

**Author:** ![gustav](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/919ad9/32.png) [@gustav](https://www.ruby-forum.com/u/gustav)\
**Post date:** [October 8, 2007, 3:12pm UTC](https://www.ruby-forum.com/t/css-style-disappear-when-using-rjs-and-page-replace/225970/4 "2007-10-08T15:12:57Z")

</div>

Ah, you might wanna paste your partial too (\_tasks). 🙂

On 10/8/07, Gustav S. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> It doesn’t seem very DRY does it 🙂 But if I leave them out I get “You  
> have a nil object when you didn’t expect it!” error in \_tasks.rhtml.  
> This probably relates to why the CSS doesn’t load, but I don’t know  
> how…

–  
Ramon T.

---

<div class="post-metadata">

**Author:** ![gustav](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/919ad9/32.png) [@gustav](https://www.ruby-forum.com/u/gustav)\
**Post date:** [October 8, 2007, 3:38pm UTC](https://www.ruby-forum.com/t/css-style-disappear-when-using-rjs-and-page-replace/225970/5 "2007-10-08T15:38:49Z")

</div>

Honestly I can’t explain why your styles are lost… but it might help  
if you paste your partial as well, since we know what your rjs does.

On 10/8/07, Gustav S. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> I use the RJS to render the partial, is there some reference that I need  
> to do in the RJS that I’m missing?

–  
Ramon T.

---

<div class="post-metadata">

**Author:** ![gustav](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/919ad9/32.png) [@gustav](https://www.ruby-forum.com/u/gustav)\
**Post date:** [October 8, 2007, 3:29pm UTC](https://www.ruby-forum.com/t/css-style-disappear-when-using-rjs-and-page-replace/225970/6 "2007-10-08T15:29:08Z")

</div>

Ramon T. wrote:

> Ah, you might wanna paste your partial too (\_tasks). 🙂

I use the RJS to render the partial, is there some reference that I need  
to do in the RJS that I’m missing?

---

<div class="post-metadata">

**Author:** ![gustav](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/919ad9/32.png) [@gustav](https://www.ruby-forum.com/u/gustav)\
**Post date:** [October 8, 2007, 3:44pm UTC](https://www.ruby-forum.com/t/css-style-disappear-when-using-rjs-and-page-replace/225970/7 "2007-10-08T15:44:46Z")

</div>

Here it goes, many thanks for any input!

index.rhtml

```
<%= render :partial => "newtask" %>

```

```
<%= render :partial => "tasks" %>

```

\_newtask.rhtml  
\<%= form\_remote\_tag :update =\> “tasks”,  
:url =\> { :action =\> ‘create’ } %\>

\<%= text\_field :task, :description %\>

\<%= collection\_select(:task, :project\_id,  
@projects, :id, :name) %\>

\<%= collection\_select(:task, :timeframe\_id,  
@timeframes, :id, :name) %\>

\<%= submit\_tag ‘Create!’, :id =\> ‘submit’ %\>

\<%= end\_form\_tag %\>

\_tasks.rhtml

## Today

 \<% @tasks\_today.each do |task| %\> - 
\<%= check\_box :task, :completed, :onchange =\> "$('task\_#{task.id}').toggleClassName('completed');" %\>

\<%= task.description %\>

\<%= link\_to\_remote 'Delete', :url =\> { :action =\> 'destroy', :id =\> task }, :update =\> :tasks %\>

\<%= task.project.name %\>
 \<% end %\>

---

<div class="post-metadata">

**Author:** ![gustav](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/919ad9/32.png) [@gustav](https://www.ruby-forum.com/u/gustav)\
**Post date:** [October 8, 2007, 8:58pm UTC](https://www.ruby-forum.com/t/css-style-disappear-when-using-rjs-and-page-replace/225970/8 "2007-10-08T20:58:42Z")

</div>

Found it! Some sort of conflict: I needed to remove ":update =\> “tasks”  
from form\_remote\_tag. Also I moved the div-declaration into the  
partials. Thanks!

---

<div class="post-metadata">

**Author:** ![gustav](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/g/919ad9/32.png) [@gustav](https://www.ruby-forum.com/u/gustav)\
**Post date:** [October 8, 2007, 4:28pm UTC](https://www.ruby-forum.com/t/css-style-disappear-when-using-rjs-and-page-replace/225970/9 "2007-10-08T16:28:16Z")

</div>

Gosh, you got me. I don’t know why your CSS wouldn’t work with this.  
My only guess is that the CSS doesn’t apply to this because the div  
names are different…? :eek:

On 10/8/07, Gustav S. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> Here it goes, many thanks for any input!

–  
Ramon T.