simple ajax/jquery - trying to replace number

Question

I am trying to replace content inside a span class with jquery. I know my jquery file is being read because the first line works. Essentially, the first line of jquery adds a new notification to a list of notifications. The second line of query should replace the existing number on the site with the new @unseen_notifications.count. The second line of the jquery file is not working. How do I fix it?

jquery:

$('#user_notifications').prepend("<%= j render(@user_notifications) %>");
$('#red-count').html.replaceWith("<%= @unseen_notifications.count %>");

html:

<span class="red-count">
    <%= @unseen_notifications.count %>
</span>

Do <% %> do something special in jQuery? Do you have references to examples? — Logan Murphy, Dec 12 '13 at 20:46
It looks like you're trying to mix server-side code with javascript in a way that won't work... How are you expecting the server-side value of `@unseen_notifications.count` to change between the script and the html? — Jason P, Dec 12 '13 at 20:48
looks like ruby tags in there, but once the page is rendered, it should appear as normal text — Terry Kernan, Dec 12 '13 at 20:48
I was sure that was the issue, glad I am not missing out on special features of jQuery :P — Logan Murphy, Dec 12 '13 at 20:49
I was wondering what they meant by "not working". But they claimed the first one works — Logan Murphy, Dec 12 '13 at 20:50
Krishna's answer worked, it just won't let me mark it as correct for several more minutes. I am confused as well. I don't understand how the ruby code could work since it is being executed after the page has loaded. Anyone have any ideas? — Philip7899, Dec 12 '13 at 20:56
The ruby executes before the page is loaded, and the javascript executes after. If you view the source of the page, you will see how the ruby was rendered. — Jason P, Dec 12 '13 at 20:58
But the javascript is fetching ruby code after the page has loaded. How does that work? — Philip7899, Dec 12 '13 at 21:11
It doesn't. The ruby renders values on the page, and the javascript uses the value that the ruby variable held when the page loaded. — Jason P, Dec 12 '13 at 21:13

Bhadra · Answer 1 · 2013-12-12T20:53:46.940

2

<span class="red-count">
    <%= @unseen_notifications.count %>
</span>

$('.red-count').html("<%= @unseen_notifications.count %>");

if you are using class use . instead of #

if you want to change html/content of a particular element, you can use

$('YOUR ELEMENT SELECTOR').html('YOUR CONTENT')

if you are just adding text, you can use .text() also

 $('YOUR ELEMENT SELECTOR').text('YOUR TEXT')

edited Dec 12 '13 at 20:53

answered Dec 12 '13 at 20:47

Bhadra

2,121
1
13
19

score 1 · Accepted Answer · answered Dec 12 '13 at 20:46

1

You cannot write html.replaceWith. Set the html like below

$('.red-count').html("<%= @unseen_notifications.count %>");

Also, red-count is a class, so use . instead of #

answered Dec 12 '13 at 20:46

Venkata Krishna

14,926
5
42
56

Great, thanks, that worked. How does it work though, since the erb code isn't getting executed until after the page load? – Philip7899 Dec 12 '13 at 20:55
@Philip7899 - glad it worked. I'm not a ruby guy, but generally speaking, code behind runs on page load before page gets rendered and javascript runs after the page has loaded and all the DOM elements are ready(hence document.ready). Hope this helps. Please upvote all helpful answers and accept one as an answer. – Venkata Krishna Dec 12 '13 at 21:00

score -1 · Answer 3 · answered Dec 12 '13 at 20:48

-1

Use .text() instead of .html.ReplaceWith()

$('.red-count').text("<%= @unseen_notifications.count %>");

answered Dec 12 '13 at 20:48

Zach

437
3
10
27

simple ajax/jquery - trying to replace number

3 Answers3