I implemented that in JavaScript:
$('#dash_adc_avg').html(adc_avg);
And this in HTML:
(part A)
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="box">
<div class="big-text" id="dash_adc_avg"></div>
<div class="description">
<i class="fa fa-chevron-up"></i>
Energy Monitor AS
</div>
</div>
</div>
And this in HTML:
(part B, same file as part A)
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<section class="widget index">
<header>
<h4>
<i class="fa fa-bars"></i> Status word <small> </small>
</h4>
</header>
<div class="body">
- Test: <div class="text" id="dash_adc_avg"></div><br>
etc.
Unfortunately, the visualization of the content from var adc_avg works properly for "part A" ONLY. Does anyone know why?
Thank you!
By the way and independent: I'm looking for a way to visualize JSON-Data (as Objects) on the website, without changing them. Any ideas?
From the id attribute section of the HTML specification:
The id attribute specifies its element's unique identifier (ID).
The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.
IDs must be unique in HTML. Because of this, JavaScript only ever looks for one instance of an ID and then stops searching. In your case, the ID being pulled is the one in part A - your code never bothers looking further than that.
Change your "dash_adc_avg" ID into a class instead:
<!-- Part A -->
<div class="big-text dash_adc_avg"></div>
<!-- Part B -->
- Test: <div class="text dash_adc_avg"></div><br>
Then with your jQuery select on the class instead of the ID:
$('.dash_adc_avg').html(adc_avg);
I'm not going to bother answering the second part of your question, which is about visualising JSON data, as it has absolutely nothing to do with the main part of the question and is completely separate. Please ask that as a different question.
An identity has to be unique in the page.
It's still possible to use the id attribute to find the elements, but then you have to use it as an attribute, not as an identity:
$('[id=dash_adc_avg]').html(adc_avg);
Generally a class is used instead when you want to put it on multiple elements. There is no benefit of keeping the dupliate id attributes as they don't work as identities.
You are using duplicate id's dash_adc_avg which is a invalid HTML instead of id's use class and modify your Jquery selector as shown :-
$('.dash_adc_avg').html(adc_avg);
you should use class when you are using same name for more than once on same page in your html:
$('.dash_adc_avg').html(adc_avg);
It is considered bad practice to use the same id tag on multiple places, I would suggest that you instead use class for your dash_adc_avg
$('.dash_adc_avg').html(adc_avg)
And this in HTML: (part A)
<div class="col-md-3 col-sm-6 col-xs-6">
<div class="box">
<div class="big-text" class="dash_adc_avg"></div>
<div class="description">
<i class="fa fa-chevron-up"></i>
Energy Monitor AS
</div>
</div>
</div>
And this in HTML: (part B, same file as part A)
<div class="col-md-4">
<div class="row">
<div class="col-md-12">
<section class="widget index">
<header>
<h4>
<i class="fa fa-bars"></i> Status word <small> </small>
</h4>
</header>
<div class="body">
- Test: <div class="text" class="dash_adc_avg"></div><br>
Your id must be unique and if not the first element found by that id will be selected.
For multiple selection for same thing/functionality use class instead of id.
Related
In our current frontend we want to add accessibility improvements. The current challenge is to make the list of items including additional actions more accessible. Our document structure is based on the following idea:
<div class="products-list" role="list">
<div class="product" role="listitem">
<div class="product-name">Product A</div>
<div class="product-actions>
<div class="action-icon" role="button">First</div>
<div class="action-icon" role="button">Second</div>
</div>
</div>
</div>
At the moment it's possible to select the list-items, however the a11y border highlights the entire list item (div.product). Hence it's not possible to focus the buttons. Defining a sublist using list/listitem roles for div.product-actions was not of benefit. Do you have any ideas how to achive this?
Is there any way I can remove the element in JS and to move inside another class. I have tried multiple ways but its throwing an error.
<div class="posts container">
<div class="row">
<div class="posts-item col-md-7 col-xs-12 p-0">
Abc
</div>
<ul>
</ul>
</div>
</div>
<div class="blog">
XYZ
</div>
I am trying to get output like using Javascript
<div class="posts container">
<div class="row">
<div class="posts-item col-md-7 col-xs-12 p-0">
Abc
</div>
<div class="blog">
XYZ
</div>
<ul>
</ul>
</div>
</div>
Iam trying to move the class name "blog" inside "posts-item".
Use insertBefore for moved your item:
const referenceNode = document.querySelector('.posts-item')
referenceNode.parentNode.insertBefore(document.querySelector('.blog'), referenceNode.nextSibling);
Try something like this, which works in Chrome for me, for the result you describe in the text:
document.querySelector('.posts-item').append(document.querySelector('.blog'))
...or to get the result you've illustrated, perhaps this:
document.querySelector('.posts-item').after(document.querySelector('.blog'))
You may need to modify the selectors if there are more elements sharing the classes used.
See docs at https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/after and https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
I'm having a problem locating an item to click that is related to a specific "row" in a div using the .click() function in Cypress.io. Below is my example div table:
<div class="table">
<div class="col-sm-10">Item 1</div>
<div class="col-sm-2 action">
<i class="fa-times-circle-o"></i>
</div>
<div class="col-sm-10">Item 2</div>
<div class="col-sm-2 action">
<i class="fa-times-circle-o"></i>
</div>
</div>
What I want to do is click on the A link for a specified row. For example, I want to click on the A link for the "row" that contains the text of Item 2. I need to do this dynamically because the order of the items, as well as the names of the items, may change depending upon data.
I'm trying something like this:
cy.get('div:contains("Item 2")').click()
But the div is not the clickable one, it is the following A in the code. Any ideas?
According to Best Practices | Cypress - Selecting elements, the best way to do it is using dedicated data-cy attribute for your cypress tests, and then, within the tests, using CSS attribute selectors.
Best Practice: Use data-* attributes to provide context to your selectors and insulate them from CSS or JS changes.
In your case, I would do it this way:
<div class="table">
<div class="col-sm-10">Item 1</div>
<div class="col-sm-2 action">
<i class="fa-times-circle-o"></i>
</div>
<div class="col-sm-10">Item 2</div>
<div class="col-sm-2 action">
<i class="fa-times-circle-o"></i>
</div>
</div>
cy.get('[data-cy="item-2-anchor"]').click();
I strongly recommend doing it this way project-wide, as it guarantees working tests despite any changes made to other attributes (id, class, href ..) under development.
cy.contains('div', 'Item 2').next().find('a').click()
Being fairly new to Meteor, I'm stuck with an issue I encountered while generating input "on-the-fly" with a Helper. Indeed, what I'm trying to do is to generate a left labeled input with a dropdown but the problem is that I have to call the method $('.ui.dropdown').dropdown();
After creating each input with its corresponding dropdown, and I don't know how to do it properly with semantic-UI and Meteor environment.
Here is my helper creating the inputs:
'filterColumns': function() {
return Session.get('s_filterColumns');
}
Where 's_filterColumns' is an array looking like ["Firstname", "Lastname", "LivingPlace"]
And here is the HTML template using the helper to generate inputs:
<div id="fields">
<div class="ui grid">
{{#each filterColumns}}
<div class="eight wide column">
<label>{{this}}</label>
<div class="ui left labeled input">
<div class="ui dropdown label">
<div class="text">Start by</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Start by</div>
<div class="item">Contains</div>
<div class="item">End by</div>
</div>
</div>
<input type="text">
</div>
</div>
{{/each}}
</div>
</div>
But then, when populating the session variable with new content, the inputs are being created accordingly but the javascript dropdown method is not called again and so my left label is not a dropdown.
If you have any recommendations regarding anything in my conception I'd be glad to learn from someone more experienced than me.
If you are unsure when to call $('.ui.dropdown').dropdown(), try running it inside Template.myTemplate.onRendered() where myTemplate is the name of your template. Given that you have multiple dropdowns though you might want to put the html that's inside your {{#each }} into its own template and use that for onRendered().
Note: Community Wiki answer created because question was answered by Michel Floyd in the comments.
So I am building a comment system and have loaded a bunch of comments to a page, then have generated a reply box for each. Below is what my reply box looks like, but there are many identical ones on each page. As you can see, the first portion is a div that contains a toggle (show/hide) for the reply box.
I am posting because I cannot get the reply toggle to fire.
Here is my html:
<div class="col-sm-offset-1 col-sm-11">
<a href="#" id="reply-toggle">
<span class="text">Reply</span>
<i class="toggle-icon fa fa-angle-down"></i>
</a>
</div>
<div id="reply-div" class="col-sm-12">
<form class="form-horizontal" role="form" accept-charset='UTF-8' data-parsley-validate novalidate>
<fieldset>
<div class="form-group">
<label for="ticket-message" class="col-sm-1 control-label"></label>
<div class="col-sm-11">
<textarea class="form-control" name="post-body" id="new_post_textarea" rows="5" cols="30" placeholder="Try to be as specific as possible when posting!"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-11">
<button id="submit_reply_button" type="submit" class="btn btn-primary btn-block">Submit Reply</span></button>
</div>
</div>
</fieldset>
</form>
</div>
Here is my jquery:
$("#reply-toggle a").click(function() {
alert("running");
$('#reply-div').slideToggle("slow");
)};
I recognize I am not very good in jquery, so I am sure it's something simple, however, I also recognize that I will have to use jquery(closest) to only toggle the reply box associated with the proper comment thread. I have not gotten to this step yet, but it would be greatly appreciated If I could receive some guidance in regards to that as well.
Sincere thanks for any help!
$(document).on('click', '#reply-toggle', function() {
$(this).closest('.col-sm-offset-1').next('#reply-div').slideToggle('slow');
});
edit:added a period to the col-sm-offset-1 class
Your link selector does not match anything. $("#reply-toggle a") will return all <a> tags that have a parent with ID reply-toggle.
You should change this to simply $("#reply-toggle").
Edit: As an aside, you say you have multiple of these Reply buttons - I would strongly recommend you change the ID selector to a class selector as browsers expect only one element with a specific ID per page.
"#reply-toggle a" looks for <a> elements within an element that has id "reply-toggle". Maybe $("a#reply-toggle") would fix your firing issue?
You might want to generate a specific id for each reply toggle and div, say reply-toggle-1and reply-div-1. However, this approach needs a click()defined for each toggle. Use class declarations instead (i.e. not id="reply-toggle", but class="reply-toggle").