it's may be easy as breathing but I just dont see the mistake in my code...
I try to add an click-Event to a div with an unique ID but it does not work at all. Neither with jQuery or javaScript.
Code:
$("#btnF5").click(function () {
alert("Handler for test1 called.");
});
document.getElementById("btnF5").addEventListener("click", myFunction);
function myFunction () {
alert("Handler for test2 called.");
}
JSFiddle:
https://jsfiddle.net/ckom0pbo/
Sorry if I am just dumb at this point.
Greetings
Note 2 points-
Add jquery library first
Wrap your all code into ready function Ready function
$(document).ready(function(){
$("#btnF5").click(function () {
alert("Handler for test1 called.");
});
document.getElementById("btnF5").addEventListener("click", myFunction);
function myFunction () {
alert("Handler for test2 called.");
}
})
div{
width: 100px;
border: 1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container col-md-12 col-lg-12 fkey-container-12">
<div class="col-md-4 col-lg-4 fkey-container-4">
<div class="btn btn-default btn-gevau btn-fkey2" id="btnF1" data-url="">Hilfe</div>
<div class="btn btn-default btn-gevau btn-fkey2" id="btnF2"> </div>
<div class="btn btn-default btn-gevau btn-fkey2" id="btnF3"> </div>
<div class="btn btn-default btn-gevau btn-fkey2" id="btnF4"> </div>
</div>
<br />
<div class="col-md-4 col-lg-4 fkey-container-4">
<div class="btn btn-default btn-gevau btn-fkey2" id="btnF5" data-url="">Start</div>
<div class="btn btn-default btn-gevau btn-fkey2" id="btnF6"> </div>
<div class="btn btn-default btn-gevau btn-fkey2" id="btnF7"> </div>
<div class="btn btn-default btn-gevau btn-fkey2" id="btnF8"> </div>
</div>
<br />
<div class="col-md-4 col-lg-4 fkey-container-4">
<div class="btn btn-default btn-gevau btn-fkey2" id="btnF9"> </div>
<div class="btn btn-default btn-gevau btn-fkey2" id="btnF10"> </div>
<div class="btn btn-default btn-gevau btn-fkey2" id="btnF11"> </div>
<div class="btn btn-default btn-gevau btn-fkey2" id="btnF12" data-url="">Ende</div>
</div>
</div>
</nav>
try this,
$(function() {
$("#btnF5").click(function() {
alert("Handler for test1 called.");
});
document.getElementById("btnF5").addEventListener("click", myFunction);
function myFunction() {
alert("Handler for test2 called.");
}
});
Your JSFiddle is working fine, however, you forgot to import jQuery in your JSFiddle.
I've updated your JSFiddle to include jQuery, I also added a red background to see what div was getting the click-event.
#btnF5 {
background: red;
}
https://jsfiddle.net/ckom0pbo/3/
If you have done everything right then the only logical reason is that you are executing the code block before jquery is loaded.
Try
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnF5">Click me</button>
<script>
$(document).ready(function(){
$("#btnF5").click(function () {
alert("Handler for test1 called.");
});
});
</script>
The problem is that you didnt add jquery library to the jsfiddle. I added in your base example
Fiddle with jquery
$("#btnF5").click(function () {
alert("Handler for test1 called.");
});
document.getElementById("btnF5").addEventListener("click", myFunction);
function myFunction () {
alert("Handler for test2 called.");
}
Look how to add a js library to jsFiddle How To add a js library to JsFiddle
You have not included the jquery library in JS fiddle .
You can include the library by clicking on the javascript tag at the right top of the JS section .
and selecting jquery from there .
After that you see your code working.
Related
I don't know why it doesn't work with bootstrap modal.
I want to show the hidden element.
I tried 3 different way's
(with
display:none; and in javascript a did $('..').show(),
visibility:hidden and in the javascript $('..').css('visibilty','visible'),
and the class="hidden" and in the javascript $('..').removeClass('hidden'))
here is my code :
$('.btn[id="zaki"]').click(function() {
$('#show_1524').show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-danger" id="zaki">ilyes_show</button>
<div>
<p style="display:none;" id="show_1524">..................</p>
</div>
Though your code works fine but since inline styles have highest specificity replace the inline style with a class and then on button click use removeClass to remove it
$('.btn[id="zaki"]').click(function() {
$('#show_1524').removeClass('hideElem');
})
.hideElem {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-danger" id="zaki">ilyes_show</button>
<div>
<p class="hideElem" id="show_1524">..................</p>
</div>
$('.btn[id="zaki"]').click(function() {
$('#show_1524').show();
})
$('.btn[id="zaki-hide"]').click(function() {
$('#show_1524').hide();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<button class="btn btn-danger" id="zaki">ilyes_show</button>
<button class="btn btn-danger" id="zaki-hide">ilyes_hide</button>
<div>
<p style="display:none;" id="show_1524">..................</p>
</div>
I have 2 page chemical_data.php and chemical_selectAll.php. I will test alert() on click button but button id = "test1" not show alert('1')
chemical_data.php
<script>
$(document).ready( function() {
$('#OutputALLResult').load('chemical_selectAll.php');
$('#test').click(function(){
alert('1');
});
});
</script>
<!-- Main content -->
<section class="content">
<div class="col-md-12">
<div id="OutputResult"></div>
</div>
<hr>
<button class="btn btn-default" type="button" id="test">testClick</button>
<div id="OutputALLResult">Empty Data</div>
</section>
chemical_selectAll.php
<script>
$(document).ready( function() {
$('#test1').click(function(){
alert('1');
});
});
</script>
<button class="btn btn-default" type="button" id="test1">test1</button>
I not changed any code. But in my local server this works well. You can check what error occurred
I like to show div content by 4 different button click on same page by replacing or hiding previous button click div content...
code-
<div class="col-sm-3">
<div class="btn-group-vertical" style="padding-top:12px;">
<button type="button" class="btn btn-warning" id="btn1">Btn1</button>
<button type="button" class="btn btn-warning" id="btn2">Btn2</button>
<button type="button" class="btn btn-warning" id="btn3">Btn3</button>
<button type="button" class="btn btn-warning" id="btn4">Btn4</button>
</div>
</div>
<div id="content" class="col-sm-9">
<div id="pilot" style="display:block;">
<p>Name1</p>
<h4>my name is A..........</h4>
</div>
<div id="design" style="display:block;">
<p>Name2</p>
<h4>my name is A..........</h4>
</div>
<div id="instrument" style="display:block;">
<p>Name3</p>
<h4>my name is A..........</h4>
</div>
<div id="innovations" style="display:block;">
<p>Name4</p>
<h4>my name is A..........</h4>
</div>
</div>
I have tried two jquery scripts but not worked as per my requirement...
script1-
$(document).ready(function(){
$("#btn1").click(function(){
$("#design").css("display","none");
$("#instrument").css("display","none");
$("#innovations").css("display","none");
$("#pilot").css("display","block");
}
$("#btn2").click(function(){
$("#pilot").css("display","none");
$("#instrument").css("display","none");
$("#innovations").css("display","none");
$("#design").css("display","block");
}
$("#btn3").click(function(){
$("#design").css("display","none");
$("#pilot").css("display","none");
$("#innovations").css("display","none");
$("#instrument").css("display","block");
}
$("#btn4").click(function(){
$("#design").css("display","none");
$("#instrument").css("display","none");
$("#pilot").css("display","none");
$("#innovations").css("display","block");
}
}
script2-
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#design").replaceWith( $("#pilot").show() );
$("#instrument").replaceWith( $("#pilot").show() );
$("#innovations").replaceWith( $("#pilot").show() );
}
$("#btn2").click(function(){
$("#pilot").replaceWith( $("#design").show() );
$("#instrument").replaceWith( $("#design").show() );
$("#innovations").replaceWith( $("#design").show() );
}
$("#btn3").click(function(){
$("#design").replaceWith( $("#instrument").show() );
$("#pilot").replaceWith( $("#instrument").show() );
$("#innovations").replaceWith( $("#instrument").show() );
}
$("#btn4").click(function(){
$("#design").replaceWith( $("#innovations").show() );
$("#instrument").replaceWith( $("#innovations").show() );
$("#pilot").replaceWith( $("#innovations").show() );
}
}
</script>
so please give me some suitable answer to workout ....if it is possible with bootstrap scrollspy then also suggest....tnx
Your first code example doesn't work as you haven't closed the braces and brackets correctly. Here's a working version: jsFiddle. Your second code example is using an entirely wrong approach.
That being said, by using DRY principles you can massively reduce the amount of JS code required to achieve this.
Firstly, add a data-* attribute to your .btn elements which can be used to identify the div to be shown when the button is clicked:
<button type="button" class="btn btn-warning" id="btn1" data-target="pilot">Btn1</button>
<button type="button" class="btn btn-warning" id="btn2" data-target="design">Btn2</button>
<button type="button" class="btn btn-warning" id="btn3" data-target="instrument">Btn3</button>
<button type="button" class="btn btn-warning" id="btn4" data-target="innovations">Btn4</button>
Then in your JS code you can write a single click handler which works for all buttons:
$('.btn').click(function() {
$('#content div').hide();
var target = '#' + $(this).data('target');
$(target).show();
})
Working example
Associate the target div's with the buttons using data-attributes. Now, on every click you can get the target value from that data-attribute and then use that to select only that div, that you need to show. You should hide all div's before showing the one that needs to be shown.
<a id="btn1" href="#" data-target="design">button 1</a>
<a id="btn2" href="#" data-target="pilot">button 2</a>
<a id="btn3" href="#" data-target="instrument">button 3</a>
<div id="design-div" class="targetdivs">Design</div>
<div id="pilot-div" class="targetdivs">Pilot</div>
<div id="instrument-div" class="targetdivs">Instrument</div>
<script>
$("#btn1, #btn2, #btn3").on("click", function(e){
e.preventDefault();
var target = $(this).data("target");
$(".targetdivs").css("display", "none");
$("#"+target+"-div").css("display", "block");
});//click
</script>
try this:
$('#btn1').click(function(){
$("#content div").hide()
$("#pilot").show()
});
$('#btn2').click(function(){
$("#content div").hide()
$("#design").show()
});
$('#btn3').click(function(){
$("#content div").hide()
$("#instrument").show()
});
$('#btn4').click(function(){
$("#content div").hide()
$("#innovations").show()
});
here's a jsfiddle
I'm actually using this button group structure with bootstrap. Now I need to add class active to each button when I click on it. And remove from it when I click on another button.
This is my HTML structure, is something like that:
<body>
<div id="header">
<div class="logo">Prova<span class="sec-logo">toscana</span>15</div>
<div class="bottoni">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" id="b1">12345</button>
<button type="button" class="btn btn-default" id="b2">12345</button>
<button type="button" class="btn btn-default" id="b3">12345</button>
<button type="button" class="btn btn-default" id="b4">12345</button>
<button type="button" class="btn btn-default" id="b5">12345</button>
<button type="button" class="btn btn-default" id="b6">12345</button>
</div>
</div>
</div>
</body>
Someone who could help me? Thanks.
if .active class should not be removed from active button after clicking on it please use addClass instead of toggelClass
$("#header .btn-group[role='group'] button").on('click', function(){
$(this).siblings().removeClass('active')
$(this).addClass('active');
})
jsfiddle example
it is also good practice to narrow buttons selection, I used #heade id and .btn-group[role='group'] which makes script applied only on buttons inside all button groups iside <div id="header"></div>
and here you have .active class definition:
.btn.active{
background-color: red;
}
You are looking for something like:
$('.btn').on('click', function(){
$(this).siblings().removeClass('active'); // if you want to remove class from all sibling buttons
$(this).toggleClass('active');
});
Check jsFiddle
You should use a combination of .each() and .click() here. So it will target every button in stead of only the first
$('#header .btn').each(function(){
$(this).click(function(){
$(this).siblings().removeClass('active'); // if you want to remove class from all sibling buttons
$(this).toggleClass('active');
});
});
I hope this will help you because it works perfectly for me
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn").each(function(){
$(this).click(function(){
$(this).addClass("active");
$(this).siblings().removeClass("active");
});
});
});
</script>
Try this one
So, I am using bootstrap's modal.
I want to make a wizard style modal and came up with the following solution:
div snippets:
<div class="modal-instance hide fade" id="step1">
<div id="stepa">
...
</div>
</div>
<div id="stepb" style="display: none;">
...
</div>
Upon pressing a button in step-a step-b is loaded.
javascript snippet:
$("#stepa").replaceWith($('#stepb'));
document.getElementById('stepb').style.display = 'block';
This works ok.
But when I dismiss the modal. The div stepa has still been replaced by stepb. My solution was to build a replacement back to stepa when the modal is hidden:
$("#myModal").on("hidden", function() {
//replace the child
});
I tried:
$('#step1').children().remove();
$('#step1').append($('#stepa'));
and
$("#step1").children("div:first").replaceWith($('#stepa'));
But I am having a hardtime selecting step-a as a replacement div, probably due to it not being a separate div. My question is, is this the right approach for a wizard styled modal or should I take another approach?
It's much simpler just to hide the previous and next steps, instead of copying them.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div id="myModal" class="modal hide fade" data-step="1">
<div class="step step1">
<h1>Step 1</h1>
<button class="btn next">Next</button>
</div>
<div class="step step2">
<h1>Step 2</h1>
<button class="btn previous">Previous</button>
<button class="btn next">Next</button>
</div>
<div class="step step3">
<h1>Step 3</h1>
<button class="btn previous">Previous</button>
<button class="btn done" data-dismiss="modal">Done</button>
</div>
</div>
<style type="text/css">
#myModal > .step { display: none; }
</style>
<script type="text/javascript">
$(function() {
showStep(parseInt($('#myModal').data('step')) || 1);
$('#myModal .next').on('click', function () {
showStep(parseInt($('#myModal').data('step')) + 1);
});
$('#myModal .previous').on('click', function () {
showStep(parseInt($('#myModal').data('step')) - 1);
});
$('#myModal').on('hidden', function() {
showStep(1);
});
function showStep(step) {
$('#myModal').data('step', step);
$('#myModal > .step').hide();
$('#myModal > .step' + step).show();
}
});
</script>
http://jsfiddle.net/7kg7z/5/