We Keep Coding

Cleaner way to add large block of HTML in javascript in rails

I have a rails app along with angular, and I need to populate a large block of HTML so that it can fill in default text for textarea tag. Currently what I did was add the text like this
"<div class='navbar navbar-default letter-header hidden-sm hidden-xs'>\n" +
" <div class='container'>\n" +
" <div class='letter-navbar-header navbar-header'>\n" +
" <a href='/'><img src='/assets/logo.png' class='letters-logo navbar-brand'></a>\n" +
" </div>\n" +
" <div class='navbar-header header-text'>\n" +
" <div class='navbar-text'>\n" +
" "text" + "\n" +
" </div>\n" +
" </div>\n" +
" <div class='letter-navbar-header navbar-header'>\n" +
" <a href='/'>\n" +
" <img src='' class='second-logo'>\n" +
" </a>\n" +
" </div>\n" +
" <div class='navbar-header navbar-right'>\n" +
" {{ user_login }}" + "\n" +
" </div>\n" +
" </div>\n" +
"</div>\n"
I would like to know if there is a cleaner way to do it. I have tried using js.erb file with the render function like this
<%= j render('navbar') %>
but placed it in the asset folder so the render function is not working https://stackoverflow.com/a/8370847/1087841. I would like to know if there is a better way to do it.
[EDIT]
The js.erb file is actually an angular factory which has default HTML for the navbar, which then can be used by the angular controller to render default data. The factory file is then also gets added to application.js as a require.
this is the textarea that needs default html
<textarea name="t[navigation]" id="input-navigation-bar" ng-model="t.navigation_bar" class="form-control" rows="10"></textarea>
I could have placed the value tag with the default html but it has ng-model so nothing gets displayed. So I created a factory for the default data. Now the factory lives in /assets and has a //= require 'default_html_factory' in application.js.

I finally found a way to do it. In the erb page I added
<script>
<%= render 'style_factory.js.erb' %>
</script>
and in the factory I added this
this.ngapp.factory('TenantStyle', function() {
return {
header: "<%= j render 'navbar' %>"
}
});
and in the _navbar.html.erb file I added this
<div class="navbar navbar-default letter-header hidden-sm hidden-xs">
<div class="container">
<div class="letter-navbar-header navbar-header">
</div>
<div class="navbar-header header-text">
<div class="navbar-text">
</div>
</div>
<div class='letter-navbar-header navbar-header'>
<a href='/'>
<img src='' class='second-logo'>
</a>
</div>
<div class="navbar-header navbar-right">
</div>
</div>
</div>
and now I can call the factory in angular and get the header value.

Extract src from the description of rss in javascript

I have a RSS description as follows:
'description: <img src="http://www.afaqs.com/all/news/images/news_story_grfx/2017/50219_1_home_small.jpg" alt=" " hspace="5" align="left" width="59" height="59" border="0"/> The network has also elevated Sanjeet Mehta as head of Disney Consumer Products.'
i have to extract img src from this in jquery.

Consider this approach:
Create a div element with an ID.
In your javascript code, set InnerHTML value to your div with the value of description.
Use querySelectorAll and get the source of the image.
Example:
var description = 'description: <img src="http://www.afaqs.com/all/news/images/news_story_grfx/2017/50219_1_home_small.jpg" alt=" " hspace="5" align="left" width="59" height="59" border="0"/> The network has also elevated Sanjeet Mehta as head of Disney Consumer Products.';
// Set InnerHTML values:
document.getElementById('myDiv').innerHTML = description;
// Get src:
var mySrcValue = document.querySelectorAll('#myDiv > a > img')[0].src;
// Show src value:
document.getElementById('myResult').innerHTML = "<b>" + mySrcValue + "</b>";
<span>This is your div:</span>
<br />
<div id="myDiv"></div>
<br/>
<br/>
<span>IMG SRC Result is:</span>
<div id="myResult"></div>

You don't need jquery to do this, javascript is enough.
You can extract the src attribute with a one line code (split and regex) :
var result = description.split('img')[1].split('alt')[0].match( /"(.*?)"/ )[1];
var description = 'description: <img src="http://www.afaqs.com/all/news/images/news_story_grfx/2017/50219_1_home_small.jpg" alt=" " hspace="5" align="left" width="59" height="59" border="0"/> The network has also elevated Sanjeet Mehta as head of Disney Consumer Products.';
result.innerHTML = description.split('img')[1].split('alt')[0].match( /"(.*?)"/ )[1];
<div id="result"></div>

Put all code in one div class with javascript or jquery

How I can put this code into one div class .element?
var side_bar_html = "<a href='javascript:google.maps.event.trigger(gmarkers[" + parseInt(gmarkers.length - 1) + "],\"click\");'>" + place.name + "</a><br>" + '<div class="raty" />' + "</br>";
$(side_bar_html).appendTo('#side_bar').filter('.raty').raty({
score : place.rating,
path : 'http://wbotelhos.com/raty/lib/img'
})
this code render HTML:
<a href='javascript:google.maps.event.trigger(gmarkers[0],"click");'>The Fort</a>
<br>
<div class="raty" style="cursor: pointer; width: 100px;"><img src="http://wbotelhos.com/raty/lib/img/star-on.png" alt="1" title="bad"> <img src="http://wbotelhos.com/raty/lib/img/star-on.png" alt="2" title="poor"> <img src="http://wbotelhos.com/raty/lib/img/star-on.png" alt="3" title="regular"> <img src="http://wbotelhos.com/raty/lib/img/star-on.png" alt="4" title="good"> <img src="http://wbotelhos.com/raty/lib/img/star-half.png" alt="5" title="gorgeous"><input type="hidden" name="score" value="4.5"></div>
I want to all this code put into DIV class .elemenat
How to do that?
do i need to write a function for that?

You can use like this to append element in div.
var div="<div class='element'></div>";
$('.element').append(side_bar_html );

nth-child. Create a div and populate it

I have this function that appends a div (Base-Shirt) to a div (Button)
<div class="Button"><div class="Base-Shirt"></div></div>
I then want the images to populate the (Base-Shirt) div. When I run the script the images are placed after the "Base-Shirt" div. Do you know how I would get them into the "Base-Shirt" and not after them?
This is what is happening:
<div class="Button">
<div class="Base-Shirt"></div>
<img class="2016" src="img/swatch/2016.jpg" title="Ruby_Red" alt="Main, Pique">
<img class="2017" src="img/swatch/2017.jpg" title="Khaki_Tan" alt="Main, Pique">
This is what I want to happen:
<div class="Button">
<div class="Base-Shirt">
<img class="2016" src="img/swatch/2016.jpg" title="Ruby_Red" alt="Main, Pique">
<img class="2017" src="img/swatch/2017.jpg" title="Khaki_Tan" alt="Main, Pique">
</div>
Function
function parse(document){
//Product
$(document).find("Item").each(function(){
$(".Button").append('<div class="' + $(this).attr('name') +'"></div>');
});
//Swatch
$(document).find("Swatch").each(function(){
$(".Button:nth-child(1)").append(
'<img class="' + $(this).attr('name') + '" alt="' + $(this).attr('alt') + '" title="' + $(this).attr('title') + '" src="img/swatch/' + $(this).attr('name') + '.jpg">'
);
});
}//function parse End
Thank you.

You could try $(".Button").children(":first") which will land you on the div-shirt element

use children and eq
$(".Button").children(":eq(0)"); //<-- this will get you the first children(start form 0)
$(".Button").children(":eq(1)"); //<-- this will get you the second children

Templating Bootstrap Carousel with underscore.js and Backbone.marionette

I am the last step of a multi-level, nested sturcture of views - a collection of composite views.
However, based on array of image information, I am trying to render the bootstrap carousel, where the image with the highest priority_order is given the default "item active" class.
<%=_.each(images, function(x){
if (x.priority_order = 1)
{return
"<div class='item active'>
<img class='responsive-image' src=" + x.image + " alt=''>
<div class='container'>
<div class='carousel-caption'>
<h1>" + x.title + "</h1>
</div>
</div>
</div>"
}
else
{return
"<div class='item'>
<img class='responsive-image' src" + x.image + " alt=''>
<div class='container'>
<div class='carousel-caption'>
<h1>" + x.title + "</h1>
</div>
</div>
</div>"}
})%>
NOTE: The Above is simply manually pretty-printed for this post. In the real code, the line breaks are removed, otherwise you'll get:
Uncaught SyntaxError: Unexpected token ILLEGAL
When all is said and done, this still doesn't render properly. Am I missing something, or can underscore perform do this?

The way you've got it written there is syntax-error bait. (Plus, using a string literal largely defeats the purpose of using a template, no?)
I'd use code blocks <% %> for the logic parts, <%= %> for the rendering parts, and have the HTML as markup, not as a string literal:
<% _.each(images, function(x){ %>
<% if (x.priority_order == 1){ %>
<div class='item active'>
<img class='responsive-image' src=" + x.image + " alt=''>
<div class='container'>
<div class='carousel-caption'>
<h1> <%= x.title %></h1>
</div>
</div>
</div>
<% } %>
<%  } %>
Also, this is a typo -- if (x.priority_order = 1) -- should be the equality operator ==.
JSFiddle
Just as a note -- if you absolutely have to putt the markup in a string literal for some reason, then you can't have new lines within the string. It has to be either inline like this:
print "<div class='item active'><img class='responsive-image' src='" + x.image + "' alt=''><div class='container'><div class='carousel-caption'><h1>" + x.title + "</h1></div></div></div>";
Or appending the strings with the + like:
print "<div class='item active'>" +
"<img class='responsive-image' src='" + x.image + "' alt=''>" +
"<div class='container'>" +
"<div class='carousel-caption'>" +
"<h1>" + x.title + "</h1></div></div></div>";