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
Related
i'm creating a shop cart and i started with a home page with 3 buttons
I had a little problem with redirecting those buttons to another pages
here's my html and javascript codes
I tried every possibility of redirection on javascript :(
function inscription(){
var myForm = "inscription-form.html";
document.getElementById("btn1f").addEventListener('click' , function () {
window.location.replace(myForm);
});
}
// redirect my second button
var myShop = "http://www.google.com";
document.getElementById("btn2s").addEventListener('click' , function () {
window.location.replace(myShop);
});
// redirect my third button
function redirect(){
var myGoogle = "http://www.google.com";
document.getElementById("btn3g").addEventListener('click' , function () {
window.location.replace(myGoogle);
});
}
<section class="body-container">
<div class="container-item title">
<h1>Who said women need therapy 😒,
<br> <br> We need shopping 🤑
</h1>
</div>
<div class="container-item buttons">
<div class="button-1">
<span>Create an account?</span>
<button type="button" class="btn" id="btn1f">Sign In</button>
</div>
<div class="button-2">
<span>You're a customer 😎</span>
<button type="button" class="btn" id="btn2s">Go Shopping</button>
</div>
<div class="button-3">
<span>Not Interested</span>
<button onclick="redirect()" type="button" class="btn" id="btn3g">Go Back</button>
</div>
</div>
</section>
<!-- html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<script src="js.js"></script>
</head>
<body>
<section class="body-container">
<div class="container-item title">
<h1>Who said women need therapy 😒,
<br> <br> We need shopping 🤑
</h1>
</div>
<div class="container-item buttons">
<div class="button-1">
<span>Create an account?</span>
<button type="button" class="btn" id="btn1f">Sign In</button>
</div>
<div class="button-2">
<span>You're a customer 😎</span>
<button type="button" class="btn" id="btn2s">Go Shopping</button>
</div>
<div class="button-3">
<span>Not Interested</span>
<button type="button" class="btn" id="btn3g">Go Back</button>
</div>
</div>
</section>
</body>
</html>
//below into js.js file
window.onload = function() {
var myShop = "http://www.google.com";
document.getElementById("btn2s").addEventListener('click' , function () {
window.location.href = myShop;
});
var myGoogle = "http://www.google.com";
document.getElementById("btn3g").addEventListener('click' , function () {
window.location.href = myGoogle;
});
var myForm = "inscription-form.html";
document.getElementById("btn1f").addEventListener('click' , function () {
window.location.href = myForm;
});
}
You have warpped the click listeners inside named functions and call those function onclick. So First time you click on a button the listeners is being attached and the second time, the listener will work (however second click also attachs another listener). So omit one of onclick or addEventListener one of them is enough. I prefer deleting named functions and onclick and just attach listeners (They should be attached at the end of document or after window load)
window.onload=function(){
var myForm = "inscription-form.html";
document.getElementById("btn1f").addEventListener('click' , function () {
window.location.replace(myForm);
});
var myShop = "http://www.google.com";
document.getElementById("btn2s").addEventListener('click' , function () {
window.location.replace(myShop);
});
// redirect my third button
var myGoogle = "http://www.google.com";
document.getElementById("btn3g").addEventListener('click' , function () {
window.location.replace(myGoogle);
});
}
<section class="body-container">
<div class="container-item title">
<h1>Who said women need therapy 😒,
<br> <br> We need shopping 🤑
</h1>
</div>
<div class="container-item buttons">
<div class="button-1">
<span>Create an account?</span>
<button type="button" class="btn" id="btn1f">Sign In</button>
</div>
<div class="button-2">
<span>You're a customer 😎</span>
<button type="button" class="btn" id="btn2s">Go Shopping</button>
</div>
<div class="button-3">
<span>Not Interested</span>
<button type="button" class="btn" id="btn3g">Go Back</button>
</div>
</div>
</section>
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.
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 created extension:
HTML code is lower:
<input id="play1" type="image" src="images/121.png" type="button" alt="Воспроизвести"/>
<input id="pause1" type="image" src="images/120.png" type="button" alt="Пауза"/>
<input id="next1" type="image" src="images/122.png" type="button" alt="След.трек"/>
I don't understand why javascript the id button = with "play1" after clicking doesn't work
Javascript this extension:
$(document).ready(function () {
document.getElementById('play1').onclick = function(){
}
});
Code of control of player buttons:
<div id="ac_controls" class="fl_l">
<div id="ac_play" class="fl_l"></div>
<div class="next_prev fl_l">
<div id="ac_prev" class="ctrl_wrap">
<div class="prev ctrl"></div>
</div>
<div id="ac_next" class="ctrl_wrap">
<div class="next ctrl"></div>
</div>
</div>
</div>
Then you will need to use window.onload. Your script will look something like this:
<script type="text/javascript">
window.onload = function() {
document.getElementById("play1").onclick = function() {
alert("hello"); //for testing
}
}
</script>
$(document).ready() is a shortcut used in jQuery. Which you can make use of by adding the line below in your html.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
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/