I am trying show a list of participants when the user clicks on the button.But each time i end up with an error ""document is not defined".(Please don't give me jquery!!).
<% var bt = document.getElementById("bt");
bt.addEventListener('onclick',function(){
var chatbox = document.getElementsByClassName('parti');
var msg = document.createElement('div');
msg.setAttribute('class', 'participants');
msg.textContent('Participant \n\n\n'); %>
<%= chatbox.appendChild(msg); %>
<% }); %>
Change this line:
bt.addEventListener('onclick',function(){
With this:
bt.addEventListener('click',function(){
When we use addEventListener we don't need to use prefix 'on' for even name.
Also, you have used getElementsByClassName and for this you need to iterate over array, so use:
<%= chatbox[0].appendChild(msg); %>
Related
I'm basically trying to assign my model attribute value to a Java string variable. I googled some things and I used this method below:
<input type="hidden" id="businessNameId" name="businessNameId" value="${business.business.name}">
<% String businessName = request.getParameter("businessNameId");
if(businessName.contains("- [")){ %>
<p class="industry-title">Restaurant Location</p>
<%}%>
I also tried the attribute method which is:
<% String businessName = (String) request.getAttribute("business.business.name");
if((businessName).contains("- [")){ %>
<p class="industry-title">${business.business.address.city}</p>
<}%>
Still doesn't work.
Although this does not seem to work, basically the variable business Name is not being initialized. I need to use Java in this case.
If your value is in an attribute and not a parameter, then you can access it using:
<% String businessName = (String) request.getAttribute("businessNameId") %>
If this doesn't work, you should check that businessNameId is indeed in the parameters, for example using:
<%# page import = "java.util.*" %>
<%
Enumeration in = request.getParameterNames();
while(in.hasMoreElements()) {
String paramName = in.nextElement().toString();
out.println(paramName + " = " + request.getParameter(paramName));
}
%>
Is there a way to grab the Model.image_url through sql or javascript?
I have a select that when changed, I want the <img src=> to change dynamically.
With other situations I have done the following to change the background color of a div container:
<%= f.grouped_collection_select :color_id, #other_model, :colors, :title, :id, :title, include_blank: "Select Color" %>
<div id="div" style="background-color:<%= "#{model.color.hex}" %>;">
...
</div>
**javascript**
var colors = <%= Color.pluck(:id, :hex).to_h.to_json.html_safe %>;
document.getElementById("model_color_id").addEventListener("change", function(){
document.getElementById("div" %>").style.backgroundColor = colors[this.value];
}, false);
For getting the carrierwave imgae, I tried a similar approach:
var product_mock = <%= Item.pluck(:id, :image).to_h.to_json.html_safe %>;
document.getElementById("model_item_id").addEventListener("change", function(){
document.getElementById("item").src = product_mock[this.value];
}, false);
but this isn't grabbing the *.url' or *_url
Tried a way like this for onchange:
$('#shop_product_item_id').on('change', function(){
let item_id = $(this).val(); #tried with and without these 2 lines and with var
console.log(item_id); #tried with and without these 2 lines
var image = <%= Item.find(1).image_url %>;
document.getElementById("id").src = image;
});
There is an id:1
nothing prints to console but the following error:
Uncaught TypeError: e.unique is not a function
Is there a way to grab this from carrierwave thorugh sql or even ruby within the javascript?
You can change your code Item.pluck(:id, :image).to_h.to_json.html_safe to Item.all.map{|item| [item.id, item.image_url]}.to_h.to_json.html_safe . But as others said in comments better to get items through Ajax request not just store them in html.
I am trying to use AJAX to append images to a div container. My photos have a URL field, and so I tried to create an instance variable to then throw inside a div tag like <div id="individual-photo" data-url="<%= #photo_url %>">.
This didn't work, because it assigned one value for that instance variable and when I called it in my .js var url = $("#individual-photo").data("url");, it gave me the same image for all future photos.
I found that solution in another StackOverflow and I think that would work if I wasn't working with a div generated through a loop.. so my question is, seeing as how I am using a loop.. how do I communicate this information to my .js file?
This is the code in my index.html.erb
<div id="sidescrolling-container">
<% if #page > 1 %>
<%= link_to "PREV", (next_path(#link - 2) + "/#individual-photo") %>
<% end %>
<% #pics.each do |photo| %>
<% #pic_id = photo.id%>
<% #photo_url = Photo.where(id: #pic_id)[0].url %>
<div id="individual-photo" data-url="<%= #photo_url %>">
<img src="<%= photo.url %>" height='250px' width="250px">
<span id="photo-title"><%= photo.title %></span>
</div>
<% end %>
<% if #page < #page_max %>
<%= link_to "NEXT", (next_path(#link) + "/#individual-photo"), id: "next_button" %>
<% end %>
</div>
and my .js
var images = $.get("photos/" + page, function(data){
var info = $("#individual-photo", data).each(function(){
var title = $("#photo-title", this).text();
var url = $("#individual-photo").data("url");
$("#sidescrolling-container").append(
'<div id="individual-photo"><img src="'+url+'" height="250px" width="250px"><span id="photo-title">'+title+'</span></div>'
)
})
})
If there's a better way to go about this I'd love to know more! Just no gem solutions please, I don't want to use gems for this part of my code.
$("#individual-photo") references every individual photo in your complete DOM, $("#individual-photo").data() always references the data properties of the first element in this selection. Therefore, you always get the the first url.
It should be
var images = $.get("photos/" + page, function(data){
$("#individual-photo", data).each(function(){
var title = $("#photo-title", this).text();
var url = $(this).data("url");
$("#sidescrolling-container").append(
'<div id="individual-photo"><img src="'+url+'" height="250px" width="250px"><span id="photo-title">'+title+'</span></div>'
)
})
})
How to put just one random link(out of many) on page every time a user reloads the page?
e.g
link 1
link 2
...
or in rails
<%= link_to "link 1", "https://google.com" %>
...
just use some rand value, for example
/*view.html.erb*/
<% var ||= rand(2) %>
<%= link_to_if var == 0, "http://www.google.com" %>
<%= link_to_if var == 1, "http://www.facebook.com" %>
you can set this into a partial, or maybe an array in your controller a call the array with de rand value like
<%= link_to #array_of_links[var] %>
or if you want to save this into your db you can just pick a random record with
/*controller*/
#link = Link.order("RANDOM()").first
because of MVC flow it will get a random value each time, regards
I am trying to call a javascript function from my form page in a Rails 3 project. I need to send the function the ID of a particular element. Unfortunately I can't get the ID easily since it is automatically generated by a plugin.
I tried doing it this way:
<%= t.select :number_type, #id_types, {}, {:onchange => "has_other_field(' + the_value.id.to_s + "');"} %>
<% if (!the_value.nil?) && (!the_value.number_type.nil?) && !#id_types_sm.include? the_value.number_type) %>
<script type="text/javascript">
setup_other_field("<%= the_value.number_type %>", ###ID WOULD GO HERE###);
</script>
<% end %>
.. But since I don't know the ID of the element, I can't call it from the function.
So now I'm trying to do it this way, by calling the function from an "onload" when the input element loads:
<% if (!the_value.nil?) && (!the_value.number_type.nil?) && (!#id_types_sm.include? the_value.number_type) %>
<%# Call the function from the form helper only if the conditions are met %>
<%= t.select :number_type, #id_types, {}, {:onchange => "has_other_field(this.id);", :onload => "setup_other_field('" + the_value.number_type + "', this.id);"} %>
<% else %>
<%# Use the form helper without calling the function %>
<%= t.select :number_type, #id_types, {}, {:onchange => "has_other_field(this.id);"} %>
<% end %>
BUT I realize that onload does not work for this situation. Is there any workaround for this? How can I either
A) get the element ID from the field to the function in the first option, or
B) call this function from this input element whenever it loads?
... or C) an alternative way to do this?
Thanks in advance and let me know if more details would help.
If you have ID saved in the model, get it with <%= model.id %>
Exception to this rule is when you create object, and it is before it is written to database. If you go to edit or anywhere else it will be ok.
If you have it somewhere on the page :/ then you can use jQuery to get it for you.
< div id="id_of_the_element" attr_with_my_id="15" >ABC< /div >
$("#id_of_the_element").attr('attr_with_my_id')
< input id="id_of_the_element ... >< /input >
$("#id_of_the_element").value