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").
Related
I have a doubt that I can't solve. From a PHP page I call a typical modal window in which I always had a button that updated or added or deleted records, but now I need to place 2 buttons and that the new button allows me to call a PHP page in which I have a code that downloads data and passes it to an Excel file. I don't know how to make the call to that page from the button in the modal window.
<div class="mb-3 row">
<div class="col-md-6 text-center">
<button type="submit" class="btn btn-primary">update</button>
</div>
<div class="col-md-6 text-center">
<button type="button" class="btn btn-success">download detail</button>
</div>
</div>
I would appreciate any help. Thanks
In Bootstrap, you can use same button classes for <a> tag as well:
The .btn classes are designed to be used with the <button> element.
However, you can also use these classes on <a> or <input> elements
(though some browsers may apply a slightly different rendering).
So your button should be done like this:
download detail
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()
I have a list of cards of my website and all the cards contain a submit button. I want that when the submit button is clicked, I can get the details of the cards such as the status of the switch and the name of the equipment on that particular card. How do I achieve this?
Below is how my cards look like. Let us assume that I put a button on each of the cards, then I want this to happen on the click of that button.
This is the structure of my card, but I have no idea as to how to achieve the above said thing, due to which I haven't been able to begin with anything
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content white-text">
<span class="card-title">Air Conditioner</span>
</div>
<div class="card-action" id="action">
<div id="status">ON</div>
<div class="switch">
<label> on <input type="checkbox"> <span class="lever"></span> off </label>
</div>
</div>
</div>
</div>
</div>
I would be obliged to receive a swift response from the community! :D
EDITED:
You haven't provided much info or shown any code that you're using, so I'm going to provide a general answer and assume you're using jQuery.
So, say you have a card like this:
HTML:
<div class="card">
<input id="checkbox-1" type="checkbox">
<button id="button-1">Get value</button>
</div>
You could use jQuery to get the value:
// Wait for jQuery to load,
$(document).ready(function() {
// when #button-1 is clicked,
$("#button-1").click(function () {
// save the value of #checkbox-1 as a variable,
var myValue = $("#checkbox-1").is(':checked');
// and test it to confirm it worked.
console.log(myValue);
});
});
I have created a simple jQuery toggle function which adds and removes the class formVisablethe toggle function is adding the class how in the wrong place CLICK HERE.
I want to add the class to the following element <div id="hide-overlay"> however at the moment the class is being added to my button element <a id="show-form">. Below is a snippet of my code
HTML
<div class="row promo-image responsive">
<figure>
<figcaption class="caption">
<a id="show-form" class="promo-button" href="#">
<span>Be More Productive</span>
<i class="fa fa-download"></i>
</a>
<h4>Download the 8 steps for successful collabration</h4>
</figcaption>
</figure>
</div>
HIDDEN ELEMENT
<div id="hide-overlay">
<a id="hide-form-close" href=""><i class="fa fa-times fa-2x"></i></a>
<div class="col-sm-6 col-sm-offset-3 form-container">
<h2 class="business">Register</h2>
<form class="main-contact submit-fade ajax-form" action="process.php" method="POST">
<ul class="small-block-grid-2 medium-block-grid-2 hide-form">
<li>
<label for="name">Name</label>
<input type="text" class="form-control" name="name" placeholder="Name" required>
</li>
<li>
<label for="email">Email</label>
<input type="text" class="form-control" name="email" placeholder="Email">
</li>
</ul>
<input type="submit" class="btn btn-success">
</form>
</div>
</div>
JQUERY
var $hideOverlay = $("#hideOverlay").hide();
$("#show-form").on("click", function(e){
$(this).toggleClass("formVisable");
});
It's because you are using this which represents the object that is calling the function, in this case #show-form. You should use $('#hide-overlay').toggleClass("formVisible");
Here's the fiddle for it: http://jsfiddle.net/norg5k2o/4/
"This" represents the object that an action is being applied to. In this case, it's your button. You want the class to be applied to your overlay, rather than to the button. Therefore, try this:
Also, you had some spelling errors.
$("#hide-overlay").hide()
$("#show-form").on("click", function(e){
$("#hide-overlay").toggleClass("formVisible");
});
WORKING DEMO HERE
You did not properlay declare the variable. You had $(#hideOverlay) when your HTML id attribute was actually id='hide-overlay'. As such, I have re-written the jQuery to properly target and hide the form as was your original intent. I also, disabled the link so that it will only do the show/hide function and not the go to href='#' action.
As the other answers suggest, when using the $(this) selector in jQuery, it will target the parent selector of the current iteration of the function.
I also updated your CSS as it was hiding the form.
View working example
var $hideOverlay = $("div#hide-overlay");
$hideOverlay.toggle();
$hideOverlay.css("border", "solid 1px black");
$("a#show-form").on("click", function(e){
e.preventDefault();
$hideOverlay.slideToggle(300);
});
The $(this) inside a JQuery event handler is the DOM element that has the handler attached. If we attached the handler to something else, like the containing <div>, we will get the DIV DOM element doesn't matter which inside elements of the DIV we clicked.
So, in this case you would need something like this, since $("#hideOverlay") is already cached, the correct way to do it is:
var $hideOverlay = $("#hideOverlay").hide();
$("#show-form").click(function(e){
$hideOverlay.toggleClass("formVisible");
//Prevent default behavior for links and buttons
e.preventDefault();
});
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.