EDITED:
renamed shouldComponentUpdate to onClick
I'm using Ruby on Rails with the gem react-rails. The idea is to use a "PATCH" method to update an ArrayAttribute but using just JavaScript. To be clear, I'm still a newbie building a project while learning.
The story is, when a user checks a checkbox, it marks their post as complete. Their Post's table has a column for is_complete: :boolean, :default => false. Im using Postgres for the database.
var Foo = React.createClass({
getInitialState: function() {
return {
is_complete: this.props.data.is_complete, # shows "Empty object"
# is_complete: this.props.data[0].is_complete ..... shows "false"
# I could not use that because data[0] and data[1] etc...
}
},
onClick: function(){
var newVal = this.state.is_complete;
this.setState({
is_complete: React.addons.update(this.state.is_complete, { '$set': [ newVal ] })
})
},
render: function() {
var supports = (s) => (
<input type="checkbox" onChange={this.onClick}
/> Mark complete
);
return (
<div>
{this.props.data.map(supports)}
</div>
);
}
});
Index.html.erb:
<%= react_component('Foo', { data: #userlist }) %>
controller:
#userlist = #user.supports.as_json(:only => [:is_complete] # shortened for emample
When the checkbox is checked I get Uncaught TypeError: Cannot read property of is_complete of undefined
I'm looping through all of that user's posts (supports) and outputting the result on one page with a checkbox to mark as complete. I could achieve something similar by adding the chechbox inside of the edit page but I don't want that.
After the edit, I'm not getting the result I want. I want when checked, Array[1] and [2]'s is_complete is set to true or false.
Somehow I need to loop the getInitialState(), is that possible? I see not documentation on that.
I'm wanting to implement a real-time word counter in a form. So as a user types into the box, a line below the box updates with the correct number of words.
Here is the relevant form code (my views are .html.haml):
= f.semantic_fields_for :student_biography do |fb|
= fb.inputs :name => "About" do
= fb.input :short_statement, :label => 'Describe yourself! (25 words) ' , :input_html => {:id => "bio_prof_stmt" }
So below this description box, I'd like to count the number of words and display an 'out of 25' notice.
I'm assuming that this is just some javascript I need to add, but I don't know where to proceed from here.
Rails 3.2.11, Ruby 1.9.7
Thanks!
It shouldn't be too difficult, you would need a div that had its content updated on the keyup event for the input box:
This is a little bit from memory and may need some adjustment but it should get you on the right path:
= fb.input :short_statement, :label => 'Describe yourself! (25 words) ' , :input_html => {:id => "bio_prof_stmt" }, :onkeyup => "update_word_count(this);"
I think this is the right haml syntax, please correct me if not:
#word-count-container
The intended html:
<div id="word-count-container"></div>
Javascript:
<script type="text/javascript">
function update_word_count(object) {
words = object.value.match(/\S+/g).length.toString();
$('#word-count-container').innerHTML = words + " out of 25 used";
}
</script>
Alternative UJS approach (remove the onkeyup tag from the input):
<script type="text/javascript">
$('#short_statement').onkeyup(function() {
update_word_count(this);
});
function update_word_count(object) {
words = object.value.match(/\S+/g).length.toString();
$('#word-count-container').innerHTML = words + " out of 25 used";
}
</script>
This seems like something that you have to validate on the server side as well as the client side. So don't forget to do that.
validates :short_statement, length: { maximum: 25 }
If you want strict word counting you can use the Words Counted gem. Disclaimer I wrote it.
This is going to be a bit more vague than usual as I am looking for direction and don't really have any code to share, yet.
On my business webpage there is a jquery plugin welcome message (growl style) that is populated by the text I have typed into the JS file. In my hopes to make changing this text easier for my employees I was hoping I could somehow get my most recent tweet into a variable that I could then display automatically... this way there is no changing of code needed.
My hope was to somehow take a string like, "This is a title:this is the message" and be able to separate them into 2 different variable by means of the colon as a seperator. Then I could display these variable using their var name.
This would be an example of the final product, minus the twitter parsing:
jQuery(function($) {
$("#stdWelcome").ready(function(){
growlwelcomeid = ("gs"+$.Growl._statsCount);
$.Growl.show(TwitterMessage, {
'title' : TwitterTitle,
'icon' : "star",
'timeout': "10000",
'speed': "900"
});
});
});
Any help would be greatly appreciated!
UPDATE:
So how would something like this look:
var Wusername = "username";
var Wurl = 'http://api.twitter.com/1/statuses/user_timeline/'+Wusername+'.json?callback=?';
$.getJSON(Wurl, function(tweet){
$Wtitle = tweet[0].text.split('|');
});
jQuery(function($) {
$("#stdWelcome").ready(function(){
growlwelcomeid = ("gs"+$.Growl._statsCount);
$.Growl.show(Wtitle[1], {
'title' : Wtitle[0],
'icon' : "star",
'timeout': "10000",
'speed': "900"
});
});
});
Thanks again!
If you had the title and message as seperate tweets you could do the following
var username = "twitter username";
var url = 'http://api.twitter.com/1/statuses/user_timeline/'+username+'.json?callback=?';
$.getJSON(url, function(tweet){
$title = tweet[0].text;
$message = tweet[1].text;
});
You can make a request to the Twitter API to retrieve the 'timeline' for a given user.
https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=USERNAME&count=1
https://dev.twitter.com/docs/api/1/get/statuses/user_timeline
Edit: See #Jon Taylor's post for an implementation
This probably isn't going to be what you're going for, but here's a twitter widget I coded a while back. I've included the JS that the client can edit (top section) along with the compressed "gears and working parts" that they shouldn't edit, along with the HTML container. Obviously you'll need to add your own CSS and customize as needed.
Here's a working example: ( jsfiddle )
/* Twitter initiates. Enter your username here. */
jQuery(function($){
$(".tweeter_widget").tweet({
join_text: "auto",
username: "YOUR_USERNAME",
avatar_size: null,
count: 1,
auto_join_text_default: "",
auto_join_text_ed: "",
auto_join_text_ing: "",
auto_join_text_reply: "",
auto_join_text_url: "",
loading_text: "loading tweets..."
})
// if tweet is over 106 characters long, set the line-height so that the text will wrap to the next line and appear centered in the tweet bar.
.bind("loaded", function() {
var $tweet = $(".tweet_first"); // maybe using $(this) is better
var $numWords = $tweet.text().length;
if (($numWords >= 1) && ($numWords > 106)) {
$tweet.css({ "line-height": "24px !important" });
}
else {
$tweet.css({ "line-height": "50px !important" });
}
});
});
Compressed code to go along with:
//twitter widget
(function(a){a.fn.tweet=function(b){function l(b){var d={};d.item=b;d.source=b.source;d.screen_name=b.from_user||b.user.screen_name;d.avatar_size=c.avatar_size;d.avatar_url=j(b.profile_image_url||b.user.profile_image_url);d.retweet=typeof b.retweeted_status!="undefined";d.tweet_time=g(b.created_at);d.join_text=c.join_text=="auto"?i(b.text):c.join_text;d.tweet_id=b.id_str;d.twitter_base="http://"+c.twitter_url+"/";d.user_url=d.twitter_base+d.screen_name;d.tweet_url=d.user_url+"/status/"+d.tweet_id;d.reply_url=d.twitter_base+"intent/tweet?in_reply_to="+d.tweet_id;d.retweet_url=d.twitter_base+"intent/retweet?tweet_id="+d.tweet_id;d.favorite_url=d.twitter_base+"intent/favorite?tweet_id="+d.tweet_id;d.retweeted_screen_name=d.retweet&&b.retweeted_status.user.screen_name;d.tweet_relative_time=h(d.tweet_time);d.tweet_raw_text=d.retweet?"RT #"+d.retweeted_screen_name+" "+b.retweeted_status.text:b.text;d.tweet_text=a([d.tweet_raw_text]).linkUrl().linkUser().linkHash()[0];d.tweet_text_fancy=a([d.tweet_text]).makeHeart().capAwesome().capEpic()[0];d.user=e('<a class="tweet_user" href="{user_url}" target="_blank">{screen_name}</a>',d);d.join=c.join_text?e(' <span class="tweet_join">{join_text}</span> ',d):" ";d.avatar=d.avatar_size?e('<a class="tweet_avatar" href="{user_url}" target="_blank"><img src="{avatar_url}" height="{avatar_size}" width="{avatar_size}" alt="{screen_name}\'s avatar" title="{screen_name}\'s avatar" border="0"/></a>',d):"";d.time=e('<span class="tweet_time">{tweet_relative_time}</span>',d);d.text=e('<span class="tweet_text">{tweet_text_fancy}</span>',d);d.reply_action=e('<a class="tweet_action tweet_reply" href="{reply_url}" target="_blank">reply</a>',d);d.retweet_action=e('<a class="tweet_action tweet_retweet" href="{retweet_url}" target="_blank">retweet</a>',d);d.favorite_action=e('<a class="tweet_action tweet_favorite" href="{favorite_url}" target="_blank">favorite</a>',d);return d}function k(){var a="https:"==document.location.protocol?"https:":"http:";var b=c.fetch===null?c.count:c.fetch;if(c.list){return a+"//"+c.twitter_api_url+"/1/"+c.username[0]+"/lists/"+c.list+"/statuses.json?page="+c.page+"&per_page="+b+"&callback=?"}else if(c.favorites){return a+"//"+c.twitter_api_url+"/favorites/"+c.username[0]+".json?page="+c.page+"&count="+b+"&callback=?"}else if(c.query===null&&c.username.length==1){return a+"//"+c.twitter_api_url+"/1/statuses/user_timeline.json?screen_name="+c.username[0]+"&count="+b+(c.retweets?"&include_rts=1":"")+"&page="+c.page+"&callback=?"}else{var d=c.query||"from:"+c.username.join(" OR from:");return a+"//"+c.twitter_search_url+"/search.json?&q="+encodeURIComponent(d)+"&rpp="+b+"&page="+c.page+"&callback=?"}}function j(a){return"https:"==document.location.protocol?a.replace(/^http:/,"https:"):a}function i(a){if(a.match(/^(#([A-Za-z0-9-_]+)) .*/i)){return c.auto_join_text_reply}else if(a.match(d)){return c.auto_join_text_url}else if(a.match(/^((\w+ed)|just) .*/im)){return c.auto_join_text_ed}else if(a.match(/^(\w*ing) .*/i)){return c.auto_join_text_ing}else{return c.auto_join_text_default}}function h(a){var b=arguments.length>1?arguments[1]:new Date;var c=parseInt((b.getTime()-a)/1e3,10);var d="";if(c<60){d=c+" seconds ago"}else if(c<120){d="a minute ago"}else if(c<45*60){d=parseInt(c/60,10).toString()+" minutes ago"}else if(c<2*60*60){d="an hour ago"}else if(c<24*60*60){d=""+parseInt(c/3600,10).toString()+" hours ago"}else if(c<48*60*60){d="a day ago"}else{d=parseInt(c/86400,10).toString()+" days ago"}return" "+d}function g(a){return Date.parse(a.replace(/^([a-z]{3})( [a-z]{3} \d\d?)(.*)( \d{4})$/i,"$1,$2$4$3"))}function f(b,c){return function(){var d=[];this.each(function(){d.push(this.replace(b,c))});return a(d)}}function e(a,b){if(typeof a==="string"){var c=a;for(var d in b){var e=b[d];c=c.replace(new RegExp("{"+d+"}","g"),e===null?"":e)}return c}else return a(b)}var c=a.extend({username:null,list:null,favorites:false,query:null,avatar_size:null,count:3,fetch:null,page:1,retweets:true,intro_text:null,outro_text:null,join_text:null,auto_join_text_default:"i said,",auto_join_text_ed:"i",auto_join_text_ing:"i am",auto_join_text_reply:"i replied to",auto_join_text_url:"i was looking at",loading_text:null,refresh_interval:null,twitter_url:"twitter.com",twitter_api_url:"api.twitter.com",twitter_search_url:"search.twitter.com",template:"{avatar}{time}{join}{text}",comparator:function(a,b){return b["tweet_time"]-a["tweet_time"]},filter:function(a){return true}},b);var d=/\b((?:[a-z][\w-]+:(?:\/{1,3}|[a-z0-9%])|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))/gi;a.extend({tweet:{t:e}});a.fn.extend({linkUrl:f(d,function(a){var b=/^[a-z]+:/i.test(a)?a:"http://"+a;return''+a+""}),linkUser:f(/#(\w+)/gi,'#$1'),linkHash:f(/(?:^| )[\#]+([\w\u00c0-\u00d6\u00d8-\u00f6\u00f8-\u00ff\u0600-\u06ff]+)/gi,' #$1'),capAwesome:f(/\b(awesome)\b/gi,'<span class="awesome">$1</span>'),capEpic:f(/\b(epic)\b/gi,'<span class="epic">$1</span>'),makeHeart:f(/(<)+[3]/gi,"<tt class='heart'>♥</tt>")});return this.each(function(b,d){var f=a('<ul class="tweet_list">').appendTo(d);var g='<p class="tweet_intro">'+c.intro_text+"</p>";var h='<p class="tweet_outro">'+c.outro_text+"</p>";var i=a('<p class="loading">'+c.loading_text+"</p>");if(c.username&&typeof c.username=="string"){c.username=[c.username]}if(c.loading_text)a(d).append(i);a(d).bind("tweet:load",function(){a.getJSON(k(),function(b){if(c.loading_text)i.remove();if(c.intro_text)f.before(g);f.empty();var j=a.map(b.results||b,l);j=a.grep(j,c.filter).sort(c.comparator).slice(0,c.count);f.append(a.map(j,function(a){return"<li>"+e(c.template,a)+"</li>"}).join("")).children("li:first").addClass("tweet_first").end().children("li:odd").addClass("tweet_even").end().children("li:even").addClass("tweet_odd");if(c.outro_text)f.after(h);a(d).trigger("loaded").trigger(j.length===0?"empty":"full");if(c.refresh_interval){window.setTimeout(function(){a(d).trigger("tweet:load")},1e3*c.refresh_interval)}})}).trigger("tweet:load")})}})(jQuery);
and then HTML container:
<section class="footer-top">
<div class="f-top-inner" id="follow-me"> <a class="twit-logo" href="https://twitter.com/intent/follow?original_referer=https%3A%2F%2Ftwitter.com%2Fabout%2Fresources%2Fbuttons&screen_name=YOUR_USER_NAME&source=followbutton&variant=2.0" title="Follow Us" target="_blank" onClick="_gaq.push(['_trackEvent', 'Social', 'Social_Click', 'Twitter']);"></a>
<!--tweet position-->
<div class="tweeter_widget" id="tweetDiv"></div>
</div>
</section>
I have an observe_field call in my app like this:
= observe_field "marketSelect", :update => "merchantSelect", :with => "id", :url => { :controller => "markets", :action => "get_merchants" }
That code activates the following action in my markets controller:
#merchants = #market.merchants.sort_by { |merchants| merchants.name }
That code returns a list of every merchant associated with the selected market, and populates them into another selection list.
How can I insert an empty "Select merchant..." along with the merchants?
Thank you
Hmm.. I found this at http://joshhuckabee.com/rails-observe-field-function-and
observe_field 'text_field_id',
{:function => "(value == '') ?
$('email_preview').innerHTML =
'<em>not entered yet</em>' :
$('email_preview').innerHTML =
value.replace(/\\n/g, '<br/>');",
:on => 'keyup'}
The author did this with prototype. He had added a little snippet that will replace carriage returns with HTML line breaks and also set a default value if no text is entered or the field gets cleared out.
Thanks for the suggestion. I ended up just building a straight javascript solution.
I'm getting an unterminated string literal error in Firebug:
Unterminated string literal
$(".search_info").html("<div id=\'sear...arm_bg.png?1279054090\" style=\"displ\n
This error is being rendered from clicking on a Sort By that toggles 'Most Recent'
I have narrowed it down to the 'about_us' text. By removing certain parts of the text, I can get it to work. But it's not because of certain words or characters. It's just how the end result is parsed on the search results (and I'm guessing their alignment).
It gets trickier. I can't reproduce the error on my local machine. It only errors on the server.
The Rails call:
%li
= image_tag('sortIcon-recent.png')
= search_sort 'Most Recent', 'published_at', 'desc'
Search Sort Helper
def search_sort(name, sort_by, order = 'asc')
if params[:order_by] && params[:order_by] == sort_by
link_to(name, url_for(:overwrite_params => { :order_by => sort_by, :direction => order, :page => nil }), :class => 'selected live')
else
link_to(name, url_for(:overwrite_params => { :order_by => sort_by, :direction => order, :page => nil }), :class => 'live')
end
end
The Javascript call:
== $("#search_sort").html("#{ escape_javascript(render :partial => 'search_sort') }");
Further notes:
1. The text is placed in CKeditor.
2. It's parsed using Ruby's truncate command ( which has a history of destroying WYSIWYG text by adding hidden characters into it )
As far as an answer goes, does anyone know how I can further debug this, or what to do from here?
Here is the full extracted GET request ( I have read these several times over and can not find an unterminated string literal ) :
$(".search_info").html("<div id=\'searchWindow\'>\n<div id=\'searchContent\'>\n<div class=\'search_result\'>\n<img alt=\"Farm_bg\" class=\"search_image_banner\" height=\"204\" src=\"/system/search_images/993/cropped/farm_bg.png?1279054090\" style=\"display: none;\" width=\"285\" />\n<div class=\'grid_8 alpha\'>\n<div class=\'left\'>\n<img alt=\"Farm_bg\" src=\"/system/search_images/993/thumb/farm_bg.png?1279054090\" />\n<\/div>\n<div class=\'grid_3 omega\'>\n<h1><a href=\"/organizations/coviellobrothers\">Coviello Brothers <\/a><\/h1>\n<div class=\'clear\'><\/div>\n<h3>Madison<\/h3>\n<div class=\'clear\'><\/div>\n<div class=\'class7\'>\nJust This And Much More\n<\/div>\n<div class=\'clear\'><\/div>\n<\/div>\n<div class=\'grid_4 omega alpha\'>\n<div class=\'left\' style=\'margin-right: 12px; width: 40px\'>\n \n<\/div>\n<div class=\'left\' style=\'margin-right: 12px; width: 40px\'>\n<a href=\"/organizations/993/deals/view\"><img alt=\"Hq-card-icon\" src=\"/images/hq-card-icon.png?1279112378\" /><\/a>\n<\/div>\n<div class=\'left\' style=\'margin-right: 12px; width: 40px\'>\n \n<\/div>\n<div class=\'clear\'><\/div>\n<\/div>\n<div class=\'grid_4 omega alpha\' style=\'height: 25px; overflow: hidden;\'>\n<p>\n Coviello Brothers serving Landscape Customers For Over 30 Years\n \n \n located In Madison, C...<\/p>\n<\/div>\n<div class=\'clear\'><\/div>\n<\/div>\n<div class=\'clear\'><\/div>\n<\/div>\n<div class=\'clear\'><\/div>\n<\/div>\n<\/div>\n<div class=\'clear\'><\/div>\n<br />\n<div class=\'align_right\'><\/div>\n<div class=\'clear\'><\/div>\n");
$("#search_sort").html("<div class=\'class7\'>\nSort By:\n<\/div>\n<div class=\'clear\'><\/div>\n<div id=\'sort\' style=\"background: url(\'/images/sort-box-large.png\') no-repeat; padding: 15px 10px\">\n<ul>\n<li>\n<img alt=\"Sorticon-24hr\" src=\"/images/sortIcon-24hr.png?1279112378\" />\n<a href=\"/organizations/search?_=1279118265076&commit=go&direction=desc&order_by=contactable&q=coviello+brothers\" class=\"live\">24hr Contact<\/a>\n<\/li>\n<li>\n<img alt=\"Sorticon-card\" src=\"/images/sortIcon-card.png?1279112378\" />\n<a href=\"/organizations/search?_=1279118265076&commit=go&direction=desc&order_by=best_deal_score&q=coviello+brothers\" class=\"live\">HQcard Promotion<\/a>\n<\/li>\n<li>\n<img alt=\"Sorticon-video\" src=\"/images/sortIcon-video.png?1279112378\" />\n<a href=\"/organizations/search?_=1279118265076&commit=go&direction=desc&order_by=number_of_videos&q=coviello+brothers\" class=\"live\">Video<\/a>\n<\/li>\n<li>\n<img alt=\"Sorticon-trust\" src=\"/images/sortIcon-trust.png?1279112378\" />\n<a href=\"/organizations/search?_=1279118265076&commit=go&direction=desc&order_by=rating&q=coviello+brothers\" class=\"live\">Trust Ranking<\/a>\n<\/li>\n<li>\n<img alt=\"Sorticon-recent\" src=\"/images/sortIcon-recent.png?1279112378\" />\n<a href=\"/organizations/search?_=1279118265076&commit=go&direction=desc&order_by=published_at&q=coviello+brothers\" class=\"selected live\">Most Recent<\/a>\n<\/li>\n<li>\n<\/li>\n<\/ul>\n<\/div>\n<div class=\'clear\'><\/div>\n");
$("#search_pagination").html("");
$("#search_total h6").html("1 Result Returned!");
$("#middle_search_banner").html("<img alt=\"Farm_bg\" height=\"204\" id=\"search_image_banner\" src=\"/system/search_images/993/cropped/farm_bg.png?1279054090\" width=\"285\" />\n");
Here is the text that breaks it (this was pasted as plain text in CKeditor ). Also, as a reminder, I tried removing the ":" and other characters, but it still produced the same error:
Coviello Brothers
Serving Landscape Customers for over 30 years. Located in Madison, Coviello Brothers is a full service design and build landscape business that is family owned and operated since 1973. We have a licensed landscape architect on staff to assist you with your design ideas.
We are licensed for irrigation installation, pesticide application, and certified for stone wall construction. We offer a full range of landscaping services including:
you have an unterminated string literal:
$(".search_info").html("<div id=\'sear...arm_bg.png?1279054090\" style=\"displ\n
id opens with ' and closes with "