We Keep Coding

HTML DOM have data I didn't add through Javascript

I have generated my Header from JavaScript Data.
To generate I'm iterating through an Object.
Generating the HTML looks like:
for (const topic in templateTopic) {
if (Object.prototype.hasOwnProperty.call(templateTopic, topic)) {
const element = templateTopic[topic]
// console.log(element);
template += '<div class="col col-topic-element" id="' + element + '" onClick="filterTopic(' + element + ')">'
template += '<p>' + element + '</p>'
template += '</div>'
}
}
parent.innerHTML = '';
parent.insertAdjacentHTML('afterbegin', template);
When I inspect the Element it contain following strange data (Chrome Inspector Output):
<div id="topics" class="row">
<div class="col col-topic-element" id="film" onclick="filterTopic(film)">
<p>film</p>
</div>
<div class="col col-topic-element" id="photography" onclick="filterTopic(photography)">
<p>photography</p>
</div>
<div class="col col-topic-element" id="visual design" onclick="filterTopic(visual design)" data-kwdiaostructure=""0":"input","1":"submit#visual design##col col-topic-element####KwDiaoTagDIV","2":"visual design""
data-kwdiaohashid="input#submit#visual design##col col-topic-element####KwDiaoTagDIV#visual design">
<p>visual design</p>
</div>
</div>
How can I get rid of the data, because when I click on the last Element ("visual design"), the console throws an error and I can't add further code.
Console output after clicking the 3 generated Items:
I integrated Bootstrap 4 CDN and fontawesome.

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.

Load Modal dialog by injecting HTML with JQuery

I have the following function on my JS file that has defined the HTML code for a Modal dialog that is defined in here
I've copied the HTML code and assigned into a variable on my JS function:
function loadModalDialog(p1) {
var modal = '<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">' +
' <div class="modal-header">' +
' <button type="button" class="close" data- dismiss="modal" aria- hidden="true" >×</button>' +
' <h3 id= "myModalLabel"> Modal header </h3>' +
' </div>' +
' <div class="modal-body">' +
' <p>One fine body…</p>' +
' </div>' +
' <div class="modal-footer">' +
' <button class="btn" data- dismiss="modal" aria- hidden="true"> Close </button>' +
' <button class="btn btn-primary"> Save changes </button>' +
' </div>' +
'</div>';
}
Also, I have another JS function that calls loadModalDialog but at this point I am not sure how to inject the html that I have on my modal var into the DOM once I am inside of above function so I can display the modal dialog.
BTW, I want to inject the html through the JS function because eventually I will change the body of the dialog and it will change dynamically according p1 value.
BTW, the line of code that is calling loadModalDialog looks like this:
PopUp
Any idea how it should work?

Might be an approach. The trick is to establish a proper selector to wich the dialog() function could be called:
$("<div>Sample of an injected dialog</div>").dialog();
Is't actually very easy if you watch the jquery sample in contrast
$( "#dialog" ).dialog();
You simply replace the selector with concrete text (no meta chars).
If you want to execute a js function right after the dialog has loaded, you inline that function and provide it's parameters via JSON stringification. Like this
$("<div id='difflv2d'></div><script>drawGraph("
+ JSON.stringify(sd.side) + "," + JSON.stringify(sd.id) + ","
+ JSON.stringify(sd.title) + "," + JSON.stringify(sd.num) + ","
+ JSON.stringify(sd.data) + ")</script>").dialog();
In the sample above, the drawing function selects the div given by id 'difflv2d' and puts its stuff onto it. Since the div already is part of the dialog (just loaded), the graphic appears on that dialog. Stuff to draw is read out of the variables provided properly.
Here is a reference: on the fly div

JQuery: Unable to get property from each img in a list of images

I'm trying to create a snippet of HTML, and iterate through each image within that snippet and apply a listener function and modify the image. However, using JQuery's .each() function is not allowing me to use functions such as .prop() to get/set image attributes. How can I apply functions such as .prop() to elements iterated over by the .each() function.
//formatImg simply returns a URL to the resource
var images = '<div class="flex-row">\
<div class="img">\
<img class="img-cover" data-src="' + formatImg(gallery.posts[0].image, 'medium') + '">\
</div>\
<div class="img">\
<img class="img-cover" data-src="' + formatImg(gallery.posts[1].image, 'medium') + '">\
</div>\
</div>';
var location = gallery.posts[0].location.address || 'No Location';
var elem = $('<div class="col-xs-6 col-md-3 tile story">\
<div class="tile-body">\
<div class="frame"></div>\
<div class="hover">\
<p class="md-type-body1">' + (gallery.caption || '') + '</p>\
<ul class="md-type-body2">\
<li>' + gallery.posts.length + (gallery.posts.length == 1 ? ' photo' : ' photos') +'</li>\
</ul>\
</div>\
' + images + '\
</div>\
<div class="tile-foot">\
<div class="hover">\
See all\
<!--<span class="mdi mdi-library-plus icon pull-right"></span>-->\
<!--<span class="mdi mdi-download icon toggle-edit toggler pull-right"></span>-->\
</div>\
<div>\
<div class="ellipses">\
<span class="md-type-body2">' + location + '</span>\
<span class="md-type-caption">' + getTimeAgo(new Date().getTime(), gallery.time_created) +'</span>\
</div>\
</div>\
</div>\
</div>'
);
elem.find('img.img-cover').each(function(){
_this = $(this);
console.log(_this.prop('data-src'));
attachOnImageLoadError(_this);
_this.prop('src',_this.prop('data-src'));
});
The console.log(_this.prop('data-src')) from within each, it returns undefined for every image.

Your problem has nothing to do with each(). Your problem is that you're trying to use prop() to handle HTML5 data attributes.
"data-src" is not an HTML property, therefore _this.prop('data-src') returns null. You would run into the same problem if you were using prop() to try to write to a data-src attribute.
Instead, to read a data attribute named data-src using jquery, use data(). So use _this.data('src').
See https://api.jquery.com/data/#data-html5 for more help.

I have created a simple script below that may help you to make it work:
var images = '<div class="flex-row">\
<div class="img">\
<img class="img-cover" data-src="img-1" />\
</div>\
<div class="img">\
<img class="img-cover" data-src="img-2">\
</div>\
</div>';
$(images).find('img.img-cover').each(function() {
alert($(this).data('src'))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

mCustomScrollbar not working on jquery append

In my html i am trying to update the cart data via ajax calls.
In html
<div id="cart_list"></div>
And inside script
$(document).ready(function(){
jQuery.get("/show_header/",
function(data) {
show_cart(data)
});
})
And this is the show_cart function
function show_cart(data){
$("#cart_list").append(
'<div class="dropdown cartMenu ">'+
''+
'<div class="dropdown-menu col-lg-6 col-xs-12 col-md-6 " style="width: 184%;">'+
'<div id="scroll_cart" class="w100 miniCartTable scroll-pane">'+
'<table>'+
'<tbody>'+
cart_string+
'</tbody>'+
'</table>'+
'</div>'+
'<div class="miniCartFooter text-right">'+
'<h3 class="text-right subtotal"> Subtotal:₹ '+ data.header_data.price +' </h3>'+
'<a class="btn btn-sm btn-danger" href="/cart/"> <i class="fa fa-shopping-cart"> </i> VIEW CART </a>'+
' CHECKOUT </div>'+
'</div>'+
'</div>'
)
}
(cart_string is generated inside function show_cart. But i removed those steps since i think its not relevant here).
But the scrollbar is not working anymore. I tried the other answers in this section and nothing seems to work.
I tried giving the div with the scroll class an id "scroll_cart" and tried the following line inside show_cart function. But no change.
$("#scroll_cart").mCustomScrollbar("update");
What is the right way to enable scrollbar for the div?

You need to use $("#scroll_cart").mCustomScrollbar("update"); after creating the elements.
ie, after show_cart() function.
Because the element $("#scroll_cart") should be present on the dom at the time of binding.
$(document).ready(function() {
jQuery.get("/show_header/",
function(data) {
show_cart(data);
$("#scroll_cart").mCustomScrollbar("update");
});
})

please see this reference
codes:
$('#scroll_cart').mCustomScrollbar("destroy");
$('#scroll_cart').append('some text');
$('#scroll_cart').mCustomScrollbar();

please make sure in your HTML file you have included jquery.mCustomScrollbar.concat.min.js