Am working on practice work to improve myself
I created a sidebar using jquery. Inside my sidebars I have 3 buttons.
Am trying to do something like when I click on the first button I want it to show me the contents inside the first button clicked
<div>
<li Id = ‘list-1’ class = ‘btn btn-outline-success’> </li>
<li Id = ‘list-2’ class = ‘btn btn-outline-success’> </li>
<li Id = ‘list-3’ class = ‘btn btn-outline-success’> </li>
</div>
I want each button to display its contents
Simple version (seeing as your code doesn't offer much direction)
<div>
<button id= "list-1" class="click-button btn btn-outline-success" value="Bicycle 1">Button</button>
<button id="list-2" class="click-button btn btn-outline-success" value="Bicycle 2">Button</button>
<button id="list-3" class="click-button btn btn-outline-success" value="Bicycle 3">Button</button>
</div>
<script>
$(document).ready(function () {
$('body').on('click', '.click-button', function () {
alert(this.value)
})
})
</script>
Related
Using Django, my buttons are created using a for loop and assigned values based on model values.
Based on which button is click, I want to update the "new_note_header" with the innerHTML of the button.
I have created the following JavaScript, which works but only when the first button clicked.
<script>
function ProjectSelect () {
var x = document.querySelector('button').innerHTML;
document.getElementById('new_note_header').innerHTML = x;
}
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('button').onclick = ProjectSelect;
});
</script>
<div class = project_container>
{% for project in projects %}
<button class = individual_project_container>
{{ project }}
</button>
{% endfor %}
</div>
<div class = note_header_container>
<div class = new_note_header, id = new_note_header>
New Note
</div>
</div>
I would be grateful for any help in adapting the JavaScript so it works for all buttons clicked.
querySelector will take the FIRST element that satisfies the selector
You could use querySelectorAll and assign a click event handler to each, but I recommend using delegation:
document.addEventListener('DOMContentLoaded', function() {
const nnHead = document.getElementById('new_note_header');
document.getElementById("project_container").addEventListener("click", e => {
const tgt = e.target.closest("button");
if (!tgt.matches(".individual_project_container")) return; // not a button
nnHead.textContent = tgt.textContent.trim();
});
});
<div class="project_container" id="project_container">
<button class="individual_project_container">Project 1</button>
<button class="individual_project_container">Project 2</button>
<button class="individual_project_container">Project 3</button>
</div>
<div class="note_header_container">
<div class="new_note_header" id="new_note_header">
New Note
</div>
</div>
I'm a bit lost of how to click a button in one loop/map and toggle a class on a corresponding which again is in another separate loop/map?
Here my code:
<div className={`menu-secondary-container ${data.secondary.layout} ${secondaryOpen ? 'open' : ''}`}>
<ul className='menu-secondary'>
{data.secondary.tertiaryMenu && data.secondary.tertiaryMenu.map((a, j) =>
// For each button which is clicked within this loop/map
<li key={j}>
<button type='button' id={data.secondary.class+'-'+j}>
{a.title}
<span className="arrow next"></span>
</button>
</li>
)}
</ul>
{data.secondary.tertiaryMenu && data.secondary.tertiaryMenu.map((h, x) =>
// Toggle a open class on the corresponding ul within this loop
<ul className={`menu-tertiary ${data.secondary.class+'-'+x}`}>
<li className='title' key={x}>
<button type='button'>
<span className="arrow prev"></span>
{h.title}
</button>
</li>
</ul>
)}
</div>
I'm not sure how to approach this issue... I've read a bit about useRef but I'm not sure if it is something I can use here. Any help is greatly appreciated
Thanks in advance
Okay, I still struggle a little why you mark the ul-tag with a class instead of an ID. Because if you marked it with an ID you could access it this way:
<button type='button'
id={data.secondary.class+'-'+j}
onclick="toggle(\''data.secondary.class+'-'+j'\')">
{a.title}
<span className="arrow next"></span>
</button>
toggle = (id) => {
var element = document.getElementById(id);
// do something with it
}
I'm creating a prototype application. I wanted to template my header and footer over html files. I'm loading these in using jQuery load.
In my index file I have this in the first part of my body:
<!--COMMON HEADER ------------- -->
<header id="common-include-header" class="blade child ns">
</header>
I'm including via a document called includes.js which is listed before header.js in my head/script tags. Here is the includes.js like so:
$(document).ready(function () {
$("#common-include-header").load("includes/header.html");
$("#common-include-footer").load("includes/footer.html");
});
Here is my header.html:
<div class="blade-content flexr xc sb">
<img src="img/logo100.svg"></img>
<div class="child g">
<form class="search-form flexr jc">
<input class="location" value="Auckland" />
<input class="context" placeholder="Find something" />
<button class="child ns"><i class="fa fa-search"></i></button>
</form>
</div>
<button class="search-toggle"><i class="fa fa-search"></i></button>
<div class="child ns">
<button class="sign-in-button pill outline pink">Sign in</button>
<button class="user-signed-in flexr xc hide">
<p>test#gmail.com</p>
<img src="img/av.png"></img>
<i class="fa fa-chevron-down"></i>
</button>
</div>
<nav class="signed-in-nav flexc">
<button type="button" class="dropdown-menu child ns">Favourites</button>
<button type="button" class="dropdown-menu child ns">Reviews</button>
<button type="button" class="dropdown-menu child ns">Businesses</button>
<button type="button" class="dropdown-menu sign-out child ns">Sign out</button>
</nav>
</div>
And my header.js
$(document).ready(function () {
//hide/show mobile search
$(".search-toggle").on("click", function () {
if ($(".toggle-search").hasClass('open')) {
$(".toggle-search").removeClass("open");
} else {
$(".toggle-search").addClass("open");
};
});
//hide/show sign in
$(".sign-in-button").on("click", function () {
$(".sign-in-button").addClass("hide");
$(".user-signed-in").removeClass("hide");
});
//hide/show user menu
$(".user-signed-in").on("click", function () {
if ($(".signed-in-nav").hasClass("open")) {
$(".signed-in-nav").removeClass("open");
$(".user-signed-in").removeClass("open");
} else {
$(".signed-in-nav").addClass("open");
$(".user-signed-in").addClass("open");
};
});
//sign out
$("button.sign-out").on("click", function () {
$(".signed-in-nav").removeClass("open");
$(".user-signed-in").removeClass("open");
$(".user-signed-in").addClass("hide");
$(".sign-in-button").removeClass("hide");
});
});
My problem is that the event handlers aren't binding to .sign-in-button. I would have thought since I used jQuery .on this would work. I can't figure it out. Where am I going wrong?
jQuery's load has a callback function...
Try this:
$("#common-include-header").load("includes/header.html", function(){
// bind to header code here
});
$("#common-include-footer").load("includes/footer.html", function(){
// bind to any footer code here
});
You can also use .toggleClass() instead of having separate lines to add or remove class names.
//hide/show mobile search
$(".search-toggle").on("click", function () {
var isOpen = $(".toggle-search").hasClass('open');
$(".toggle-search").toggleClass("open", !isOpen);
});
//hide/show sign in
$(".sign-in-button").on("click", function () {
$(".sign-in-button").addClass("hide");
$(".user-signed-in").removeClass("hide");
});
//hide/show user menu
$(".user-signed-in").on("click", function () {
var isOpen = $(".signed-in-nav").hasClass("open");
$(".signed-in-nav").toggleClass("open", !isOpen);
$(".user-signed-in").toggleClass("open", !isOpen);
});
//sign out
$("button.sign-out").on("click", function () {
$(".signed-in-nav, .user-signed-in").removeClass("open");
$(".user-signed-in").addClass("hide");
$(".sign-in-button").removeClass("hide");
});
As you are loading your html on DOM ready, all your javascript files are already loaded and your header.html is being loaded after that. So your header.js can not locate the element using $(".search-toggle").on("click", function () { . Here you have to use $(document).on("click",".search-toggle", function () {
I have a dynamically created 3 options list which are attached at the end of a table row. I want to hide or disable Edit and Copy options if certain conditions are not met when page loads. How can i do this using either jQuery of JavaScript.
<div class="btn-group ewButtonGroup open">
<button class="dropdown-toggle btn btn-small" data-toggle="dropdown" href="#">Options <b class="caret"></b></button>
<ul class="dropdown-menu ewMenu">
<li><a class="ewRowLink ewView" data-caption="View" href="teamsview.php?showdetail=&TeamID=1">View</a></li>
<li><a class="ewRowLink ewEdit" data-caption="Edit" href="teamsedit.php?TeamID=1">Edit</a></li>
<li><a class="ewRowLink ewCopy" data-caption="Copy" href="teamsadd.php?TeamID=1">Copy</a>
</li>
</ul>
</div>
I have tried the following code which deosnt work.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink ewView span').text();
if ( Week_Check > 10) {
$('.ewRowLink ewView').hide();
}
});
</script>
You have a bad jQuery selector. If you want to hide an element having both of those classes you want to go this way:
$('.ewRowLink.ewView').hide();
By using $('.ewRowLink ewView').hide(); you basically state: hide all ewView (?) elements that are inside other elements having ewRowLink class.
You can use .off() to unbind the event:
$('.ewEdit, .ewCopy').off('click');
or if you want to hide:
$('.ewEdit, .ewCopy').hide();
Yet you need to mention on what condition you want to do this.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink, #ewView').find('span').html();
if ( Week_Check > 10) {
$('.ewRowLink, .ewView').hide();
}
});
</script>
I have multiple groups of Twitter Bootstrap checkbox groups. I would like to create a hash of all active (i.e., Bootsrtap adds the "active" class) buttons when any one of the checkbox buttons are clicked. Suppose the html is like so after a few clicks:
<div id="horizontal" class="btn-group" data-toggle="buttons-checkbox">
<button class="btn active" data-hposition="1">Left</button>
<button class="btn" data-hposition="2">Middle</button>
<button class="btn active"data-hposition="3">Right</button>
</div>
<div id="vertical" class="btn-group" data-toggle="buttons-checkbox">
<button class="btn" data-vposition="1">Top</button>
<button class="btn active" data-vposition="2">Center</button>
<button class="btn active" data-vposition="3">Bottom</button>
</div>
I started out simple with just one div but I don't get the right result:
<script>
$('#horizonatal').click( function(){
var paramsHash = {};
var hids = [];
$('.active').each( function() {
paramsHash.hids.push($(this).data('hposition'));
})
console.log(paramsHash.hids);
})
</script>
Using the above html, when I click on "Right" I get something like [1,undefined] in the console.
Eventually, I would like to get a hash to Post like { {'hids', [ 1, 3 ]}, {'vids', [ 2, 3, ]} }
I attempted a jsfiddle but I don't think I am loading the Bootstrap stuff properly because I don't see the buttons going to active.
That's because there are typos in your data attributes(on the fiddle) and also you select all the .active classes not those that belong to the horizontal div and as they don't have a data-hposition attribute it returns undefinded, Try the following:
$('#horizontal').click( function(){
var paramsHash = {
hids: [],
//vidz: []
}
$('.active', this).each( function() {
paramsHash.hids.push($(this).data('hposition'));
// paramsHash.vidz.push($(this).data('classroom'));
})
console.log(paramsHash);
})
DEMO
Please note that they are Button tags not Radio Buttons.