I have the following code:
$.getJSON('json/sites.json', function(data) {
$.each(data, function(index,element){
$('#menu').append('\
<li class="treeview">\
<a href="#">\
<i class="fa fa-dashboard"></i> <span>Dashboard 2</span> <i class="fa fa-angle-left pull-right"></i>\
</a>\
<ul class="treeview-menu">\
<li><i class="fa fa-circle-o"></i> Dashboard v1</li>\
<li class="active"><i class="fa fa-circle-o"></i> Dashboard v2</li>\
</ul>\
</li>\
');
});
});
Although it does what it has to do, the output of the HTML is messed up. Something like:
<div id="menu" class="sidebar-menu"> <li class="treeview">
<a href="#"> <i class="fa fa-dashboard"></i>
<span>Europe</span> <i class="fa fa-angle-left pull-right"></i>
</a> <ul class="treeview-menu"> <li><i class="fa fa-circle-o"></i> Germany</li>
<li class=""><a href="index2.html"><i class="fa fa-circle-o"></i>
Greece</a></li> </ul> </li> <li
class="treeview"> <a href="#"> <i
class="fa fa-dashboard"></i> <span>Dashboard 2</span>
...
I know that it is a minor "problem", but the JSON has about 200 objects and it makes things more difficult to debug for someone other than me. Is there any way to append html code to element object keeping the desired structure?
Aside from the fact that you have no dynamic data from the JSON object in that HTML chunk, which makes me wonder why would you even want to inject it with JavaScript in the first place, it's worth noting that browser-generated output is only debugabble using something like Chrome Developer Tools which makes the formatting completely irrelevant, as the code can be easily viewed using the DOM browser.
On the other hand, if you must format that code properly, I'd suggest using a templating engine like mustache.js or handlebars.js.
Related
Instead of retyping repeated codes for a side bar in Javascript, I made a sidebar function which is used to populate similar codes for every pages. it looks like this:
function addSidebarTemplate(){
const template = document.createElement('template');
template.innerHTML = `<aside class="aside-container">
<header>
link here
<a class="mr-1" href="#">
<i class="fab fa-linkedin"></i>
</a>
<a class="mr-1" href="#">
<i class="fab fa-facebook"></i>
</a>
<a class="mr-1" href="#">
<i class="fab fa-github"></i>
</a>
</header>`
document.querySelector('#sidebar').appendChild(sidebar.content);
There are other elements below this code. But none of them requires user's input. I just wonder is this safe to use innerHTML in this case? If not, is there better way to insert the side bar like this?
Thanks
If no user input is used, then innerHTML is fine to use. That being said, if you're doing a lot of this you may want to look into using a UI library like React to help you out.
First of all I am a developer, not a designer.
I am building Codeigniter project using Adminlte template. Now I face a problem. I will try to explain it using screenshots.
Screenshot 01 : This is the menu
Screenshot 02 : I am going to click User List Item
Question : When I click "User List" I am expecting that page menu also same as screenshot 02.(I mean user mangment menu should be open / collapse auto automatically). But I am getting interface like screenshot 1. How do I solve it?
Note : Please asked if you need some additional codes of my site because I don't know what codes should I put here.
<ul class="sidebar-menu">
<li><i class="fa fa-book"></i> <span>Home</span></li>
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>User Management</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> User List</li>
<li><i class="fa fa-circle-o"></i> Add New User</li>
</ul>
</li>
<li><i class="fa fa-book"></i> <span>Messages</span></li>
<li><i class="fa fa-book"></i> <span>Logout</span></li>
</ul>
Try adding class "active" to the list item which needs to be stayed open.
<li class="active">
I think that you have to add active class to li tag to work.
I have multiple drop down menus on the single page. I am using Materializecss.com. The Error is, I am getting values of the first drop down in every dropdown menu in the whole page. Here is the code.
#if($user->is_banned != 1)
<a class='dropdown-button btn-flat' href='#' data-constrainWidth="false" data-activates='dropdownUser'><i class="material-icons left">expand_more</i> More</a>
<ul id="dropdownUser" class="dropdown-content">
<li><i class="material-icons left">insert_chart</i>BAN</li>
<li><i class="material-icons left">delete</i>Delete</li>
</ul>
#else
The Problem is, For example, If I have the list of 5 users on the same page, I am getting values of the first user in all the dropdown menus. I don't know what's wrong.
I tried to change class to ID but not working. I am a bit new to Jquery.
UPDATE: Okay, I found the error. Here is the new code that works! Thanks for Help StackOverflow!
#if($user->is_banned != 1)
<a class='dropdown-button btn-flat' href='#' data-constrainWidth="false" data-activates='dropdownUser-{{ $user->id }}'><i class="material-icons left">expand_more</i> More</a>
<ul id="dropdownUser-{{ $user->id }}" class="dropdown-content">
<li><i class="material-icons left">insert_chart</i>BAN</li>
<li><i class="material-icons left">delete</i>Delete</li>
</ul>
#else
I Updated the working code instead of deleting the question because there might be many developers looking for the same solution!
I have faced same issue working with materialize css.
I used
$('#tag_id').material_select();
while document is getting ready.
I have an addthis popup which now opens automatically after the page is loaded. I want this popup to open when i click on <a class="share"><i class="fa fa-plus"></a>. How could I get it done?
My HTML code is:
<ul class="list-inline list-unstyled">
<li><i class="fa fa-facebook-official" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus" aria-hidden="true"></i></li>
<li><a class="share" href="#"><i class="fa fa-plus" aria-hidden="true"></i></a></li>
</ul>
And JavaScript code:
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5487d4c13f47e44">
$('.share').click();
</script>
You could use the AddThis API to wire up to your own custom controls.
Another way to accomplish what you want is to hide the target AddThis <div /> with CSS display: none for example, then display it (or move it in the DOM) wherever you like, such as in your own custom popup, when the user clicks the main "share" button.
HTML code :
<ul class="dropdown-menu" role="menu">
<li>
<a href="#/profile">
<i class="fa fa-user"></i> My Profile </a>
</li>
<li>
<a href="#/source">
<i class="fa fa-user"></i> Source </a>
</li>
<li>
<a href="/user/logout">
<i class="fa fa-user"></i> Logout </a>
</li>
</ul>
My code :
element(by.cssContainingText('i.fa.fa-user', ' My Profile ')).click();
Problem : I am trying to click on element using class and cssContaingText but am not able to it. Please help me.
please help me
You may have solved it via the by.cssContainingText also. The problem with your current approach is that you are checking the text inside the i element, which is in your case empty:
<i class="fa fa-user"></i> My Profile
The text to check is located inside the a element:
element(by.cssContainingText('ul.dropdown-menu > li > a', 'My Profile')).click();
Alternatively, you may solve it without checking the text:
element(by.css("a[href*=profile]")).click();
Though, I would agree that "by partial link text" option is a better choice in this case.
I got the answer : I tried this code, it worked nicely.
element(by.partialLinkText('My Profile')).click();