Develop Reference

How to convert object to list in javascript?

I need to convert this object into list in expressJS view (using EJS):
{https://ae01.alicdn.com/kf/HTB12Xa4ipGWBuNjy0Fbq6z4sXXa3/Mickey-Mouse-Microwave-Glove-Potholder-Bakeware-Blue-and-White-100-Cotton-Oven-Mitts-and-Potholder-mat.jpg,https://ae01.alicdn.com/kf/HTB10xfciv9TBuNjy1zbq6xpepXaG/Mickey-Mouse-Microwave-Glove-Potholder-Bakeware-Blue-and-White-100-Cotton-Oven-Mitts-and-Potholder-mat.jpg,https://ae01.alicdn.com/kf/HTB13AHqcfiSBuNkSnhJq6zDcpXav/Mickey-Mouse-Microwave-Glove-Potholder-Bakeware-Blue-and-White-100-Cotton-Oven-Mitts-and-Potholder-mat.jpg}
I've tried :
<% const xx = result.data[0].galleryimages.replace('{',"['").replace('}',"']").split(',') %>
<% for (let j=0; j<xx.length; j++) { %>
<%= xx[j]%>
<% } %>
but it returns :
['https://ae01.alicdn.com/kf/HTB12Xa4ipGWBuNjy0Fbq6z4sXXa3/Mickey-Mouse-Microwave-Glove-Potholder-Bakeware-Blue-and-White-100-Cotton-Oven-Mitts-and-Potholder-mat.jpg https://ae01.alicdn.com/kf/HTB10xfciv9TBuNjy1zbq6xpepXaG/Mickey-Mouse-Microwave-Glove-Potholder-Bakeware-Blue-and-White-100-Cotton-Oven-Mitts-and-Potholder-mat.jpg https://ae01.alicdn.com/kf/HTB13AHqcfiSBuNkSnhJq6zDcpXav/Mickey-Mouse-Microwave-Glove-Potholder-Bakeware-Blue-and-White-100-Cotton-Oven-Mitts-and-Potholder-mat.jpg']

What you posted is not an object, it's a string - try:
const xx = result.data[0].galleryimages.replace(/[{}]/, '').split(',')

problem solved
<% let xx = result.data[0].galleryimages.slice(1,-1).split(",") %>
<% for (let j=0; j<xx.length; j++) { %>
<% let ha = xx[j].slice(1,-1); %>
<img src=<%= ha.replace("'","") %> width="10%"/>
<% } %>

set value to devise form value with Javascript

I have this makeid function which returns a random string of 10 characters
function makeid() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 10; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
I want to manually put this string to my devise form like this :
<div class="user_field">
<div class="email">`enter code here`
<%= f.label :email %><br />
</div>
<%= f.email_field :email, autofocus: true, autocomplete: "email" , value: <script>makeid();</script>%>
</div>
Any thoughts??

Rewrite your makeid function as a ruby method, and put it into app/helpers/application_helper.rb
def makeid
(('A'..'Z').to_a + ('a'..'z').to_a + (0..9).to_a).sample(10).join()
end
Then you can call that helper in your templates:
<div class="user_field">
<div class="email">`enter code here`
<%= f.label :email %><br />
</div>
<%= f.email_field :email, autofocus: true, autocomplete: "email" , value: makeid() %>
</div>

Select All/Deselect All checkboxes in a page by id

I have two blocks with checkboxes. I'm trying to check this particular checkboxes with JS.
<%= hidden_field_tag "user[roles][]" %>
<% User.valid_roles.map{|c| {name: c, id: User.mask_for(c)} }.each do |role| %>
<%= check_box_tag "user[roles][]", role[:name], user.has_role?(role[:name]), id: "user_role_#{role[:id]}" %>
<%= label_tag "user_role_#{role[:id]}", role[:name].to_s.titleize %><br/>
<% end %>
$('#selectAll').click(function() {
if(this.checked) {
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});

Something like this should work:
$('#selectAll').on('change', function(){
var checkboxes = $('input[id^="employer_"]');
var checkedValue = !!this.checked;
checkboxes.prop('checked', checkedValue);
});
Here is a fiddle to demonstrate: http://jsfiddle.net/f5nx0czv/
With jQuery you can set a property/attribute en masse, no need to iterate over the collection.

Accessing specific member of an ArrayList using Javascript

So, I have a table in a jsp page which shows the data fetched from a database via an ArrayList forwarded to the page. Each row of the table has a radio button corressponding to it. Now, I would like to access the elements in the row (the ArrayList's members on the selection of the corresponding radio button and then click of an 'edit' button)
Any thoughts as to how to achieve this would be very much appreciated. Here's my code for a bit intro.
<%
ArrayList<requestbean> reqjsp = new ArrayList<requestbean>();
reqjsp = (ArrayList<requestbean>) (request.getAttribute("reqdb"));
%>
<script type ="text/javascript">
function x() {
var ele = document.getElementsByName('reqradio');
var i = ele.length;
for ( var j = 0; j < i; j++ ) {
if ( ele[j].checked ) {
document.getElementById("edireq").disabled = false;
alert('request ' + ( j + 1 ) + ' selected');
//Here is where the functionality is desired to access reqjsp.get(j)
}
}
}
</script>
<input type="button" name="edireq" id="edireq" onclick="x()" value="Edit Request">
These are a few columns in my table.
<%
for ( int i = 0; i < reqjsp.size(); i++ ) {
%>
<tr>
<td> <input type="radio" name="reqradio" id="req<%=(i+1) %>"></td>
<td><%= reqjsp.get(i).getRequestid() %></td>
<td><%= reqjsp.get(i).getRequestor() %></td>
<td><%= reqjsp.get(i).getApprover() %></td>
</tr>
<%} %>

You could generate a JavaScript array with JSP code and then access this generated variable in your JavaScript. But you would not be able to change anything in the underlying Java object this way:
<script type ="text/javascript">
<%
ArrayList<requestbean> reqjsp = new ArrayList<requestbean>();
reqjsp = (ArrayList<requestbean>) (request.getAttribute("reqdb"));
%>
var myJsArray = new Array();
<%
for ( int i = 0; i < reqjsp.size(); i++ ) {
%>
myJsArray.push('<%= reqjsp.get(i) %>');
<%
}
%>
// JavaScript code to access the myJsArray array
</script>
The JSP code will generate this kind of code:
<script type ="text/javascript">
var myJsArray = new Array();
myJsArray.push('value1');
myJsArray.push('value2');
myJsArray.push('value3');
// JavaScript code to access the myJsArray array
</script>

Endless scrolling will_paginate is not working in ruby on rails

I am following this railcasts to integrate endless scrolling in my rails application. Here i am doing like this..
static_pages_controller.rb --
def home
#posts = Post.paginate(page: params[:page],:per_page => 10)
end
home.html.erb --
<div id="posts_list" style="height:300px; overflow:scroll">
<%= render :partial => "posts/posts" %>
<p id="loading">Loading more page results... </p>
</div>
Partial posts/posts ---
<% if #posts.any? %>
<div id="postlist">
<ul>
<%= render partial: 'posts/posts_item', collection: #posts %>
</ul>
</div>
<% end %>
Partial posts/posts_item --
<li><%= posts_item.title %></li>
<li><%= posts_item.content %></li>
my static_pages/home.js.erb--
page.insert_html :bottom, :posts, :partial => #posts
if #posts.total_pages > #posts.current_page
page.call 'checkScroll'
else
page[:loading].hide
end
and my assets/javascripts/endless_page.js --
var currentPage = 1;
function checkScroll() {
if (nearBottomOfPage()) {
currentPage++;
new Ajax.Request('/?page=' + currentPage, {asynchronous:true, evalScripts:true, method:'get'});
} else {
setTimeout("checkScroll()", 250);
}
}
function nearBottomOfPage() {
return scrollDistanceFromBottom() < 150;
}
function scrollDistanceFromBottom(argument) {
return pageHeight() - (window.pageYOffset + self.innerHeight);
}
function pageHeight() {
return Math.max(document.body.scrollHeight, document.body.offsetHeight);
}
document.observe('dom:loaded', checkScroll);
But my endless scrolling is not working. I don't know where i am doing wrong. Please help.