have main html template and sub html template.
<button id="btn">Click Me...</button>
Main HTML:
<div id="main">
<label>Main</label>
</div>
Sub HTML:
<label>sub</label>
JQuery:
$(document).on("click", "#btn", function(e) {
e.preventDefault();
$("#main").load("main.html");
});
Scenario trying to achieve is I have a common button in all the pages. In default page i.e. Main.html I will show its label. once on click of the button I want to replace the label of main.html with sub.html, Again on click of the button I need to toggle it with the default label.
Can anyone help me out how to achieve this.
i think this Fiddle is what the OP wants to achieve
loading the html files alternatively :
var loadMain = true;
var loadSub = false;
$(document).on("click", "#btn", function(e) {
e.preventDefault();
if(loadMain){
$("#main").load("main.html");
alert("HERE");
loadSub = true;
loadMain = false;
}else{
$("#main").load("sub.html");
alert("THERE");
loadMain = true;
loadSub = false;
}
});
You can change label text with jquery:
Try this:
$(document).on("click", "#btn", function(e) {
$("#main").load("main.html");
if ($("#expanderSign").text() == "Main"){
$("#expanderSign").html("sub")
}
else {
$("#expanderSign").text("Main")
}
});
http://jsfiddle.net/wcd7N/
Here's a fiddle with your code:
$(document).on("click", "#btn", function (e) {
e.preventDefault();
$("#main").load("/echo/html/", {html: "<label>sub</label>"});
});
http://jsfiddle.net/cnnhg/2/
The only difference with yours is you don't need that data argument, you use a file. Something else is wrong, like adding the onclick before the button is ready.
Related
I have a page which has an event as follows:
$(document).on("click","#div",function(e){
//do the operation
});
This event gets executed on both page load as well as div click.
I need to differentiate between these two calls inside the event, because I have to write a condition extra only on div click and not on load .
How do I know if its from page load or div click?
Edit
On load:
$(default).find('a').trigger("click") ; makes it trigger on load
$(document).on("click", "#div", function(e) {
if (e.originalEvent !== undefined) {//use the originalEvent
alert('human');
} else {
alert('load click')
}
});
$('#div').click();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>click</div>
//You can check for originalEvent element present in event object.
$(document).ready(function() {
$(document).on("click","#div",function(e){
if(e.originalEvent) {
alert('clicked manually');
} else {
alert('page load');
}
});
$('#div').click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="div">
div
</div>
</body>
You could set a boolean variable in each of these like:
var fromPageLoad = false;
var fromDivClick = false;
$(window).load(function() {
fromPageLoad = true;
//do the operation
});
$(document).on("click","#div",function(e){
fromDivClick = true;
//do the operation
});
and then check which condition is true with an if or a switch statement.
[EDIT]
Unless you want alerts popping out of the blue like the other answers suggest settings variables as so is the way to go.
if u need to perform any action on page load you have to specify as below
$(document).load(function(){
alert("event on page load");
});
if the div click event then as below
$(#div).onclick(function(){
alert ("on div click");
})
i have my all links on page like this :
Example
But Now I Want All Links With Following OnClick Function like this:
<a onclick="show();" href="http://example.com">Example</a>
can any one tell me jquery or javascript code to add above function to all links on body, thanks
Some answers have suggested to use jQuery's click() function. That's alright as long as you don't expect to add new links dynamically using javascript.
This click handler will bind on the <body> element, and fire whenever a <a> element inside it is clicked. The advantage with this over $('a').click(...) is that all <a> tags don't need to be present on page load:
$(function () {
$('body').on('click', 'a', function (event) {
event.preventDefault();
show();
});
});
Fiddle: http://jsfiddle.net/Lubf6gjw/2/
EDIT: Here's how to do it with pure javascript:
document.querySelector('body')
.addEventListener('click', function (event) {
if(event.target.tagName === 'A') {
event.preventDefault();
show();
}
});
http://jsfiddle.net/pymwsgke/1/
$(function(){
$("a").click(function(){
show();
}
});
If you want to prevent the browser from following the href, you can just add a preventDefault call
$(function(){
$("a").click(function(e){
e.preventDefault();
show();
}
});
Note that this will not actually append the onclick= to the <a> tags. If you want to do that, you can do it this way:
$("a").each(function(){
$(this).attr("onclick", $(this).attr("onclick")+";show();");
});
Using pure Js
function show (event) {
event.preventDefault();
// do somethink
}
var anchors = document.querySelectorAll("a");
for(var a = 0; a < anchors.length; a++) {
anchors[a].addEventListener("click",show,false)
}
I'm using jQuery 1.9.1 in my project.
I've following HTML :
<button type="button" id="btn_add" class="btn btn-primary">Add</button>
<a class="btn_delete" href="#"><i class="icon-trash"></i></a>
I want to display the same alert message if user clicks on a icon enclosed in anchor tag with class "btn_delete" or click on a button having id "btn_add".
For this I tried following code but it didn't work out for me.
$(document).ready(function() {
$("button#btn_add.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
Can someone please help me in this regard please?
If you want any more information regarding the issue I'm facing please let me know.
Thanks in advance.
**Approach #1**
function doSomething(){
//your code
}
$('#btn_add').click(doSomething);
$('.btn_delete').click(doSomething);
**Approach #2**
$("#btn_add,a.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button#btn_add, a.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
</script>
Your code is quite close to what it should be. Change:
$("button#btn_add.btn_delete")
To:
$("#btn_add,a.btn_delete")
You can use , to have multiple selectors.
$(".btn_delete i,#btn_add").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
You can have both the HTML Tag in the jQuery selector as below:
$(document).ready(function() {
$("button#btn_add, a.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
Hope this helps!
$(document).ready(function() {
$("#btn_add,.btn_delete").on("click", function(event) {
event.preventDefault();
alert("This action has been temporarily disabled!")
});
});
Additionally to the other answers:
Your current selector will find elements like this:
<button id="btn_add" class="btn_delete">Foo</button>
How would I make sure that this href element is will fire "click" event unless it does NOT have "disablelink" class.
DO NOT PROCESS:
<a class="iconGear download disablelink" href="#">Download</a>
PROCESS:
<a class="iconGear download" href="#">Download</a>
tried this without success:
$("a.download").not(".disablelink").click(function (e) {
alert('in');
e.preventDefault();
});
This should work:
$("a.download:not('.disablelink')").click(function (e) {
alert('in');
e.preventDefault();
});
If the disablelink class is being added dynamically:
$(document).on('click', "a.download:not('.disablelink')", function (e) {
alert('in');
e.preventDefault();
});
Check this demo: http://jsfiddle.net/d3rXr/1/
$('a.download').click(function(e){
e.preventDefault();
if($(this).hasClass('disablelink')){
return;
}else{
//other stuff;
}
});
Why don't you check when the anchor is clicked, and if it has the class it returns and does nothing, which would be more readable code I guess.
You could go like this:
$("a.download").click(function(e) {
if($(this).hasClass("disablelink")) {
return false;
}
// Normal code
alert('in');
e.preventDefault();
});
Firstly, this probably doesn't work because some links had disablelink added to them dynamically, and after they already had the click handler bound to them.
Secondly, you should just check for that class inside the click handler, like so:
$("a.download").click(function (e) {
if($(this).hasClass('disablelink')){
e.preventDefault();
// link is disabled
}else{
alert('in');
// link is active
}
});
Q:
I have the following case :
Div contains a link , i wanna to just select the div without the link,i mean ,when clicking on the div i wanna specific action differs from clicking the link.through some JQuery.
the structure i work on is:(by firebug)
<div class ="rsAptContent">
sql
<a class = "rsAptDelete" href = "#" style ="visibility: hidden;">Delete</a>
</div>
the JQuery code:
<script type="text/javascript">
$(document).ready(function() {
$(".rsAptContent").click(function(e) {
ShowDialog(true);
e.preventDefault();
});
});
function ShowDialog(modal) {
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function(e) {
HideDialog();
});
}
}
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>`
when i click on the link ,i don't want to execute the Jquery code , how to select the div without the link in.
thanks in advance
Are you looking for something like the stopPropagation() code?
$(".rsAptContent").click(function(e) {
e.stopPropagation();
ShowDialog(true);
return false;
});
});
That should stop the link from executing.
http://api.jquery.com/event.stopPropagation/
Edit: Distinguish between clicking the link and clicking on any part of the content except the link
$(".rsAptContent").click(function(e) {
var $target = $(e.target);
if($target.is(a){
// It's the link.
}else{
// else it's not
}
});
});
Check for the clicked target element than perform action
to get info about which element is click use below script
function whichElement(event){
var tname
tname=event.srcElement.tagName
alert("You clicked on a " + tname + " element.")
}
Try this:
$(".rsAptContent").click(function(e) {
if($(e.target).hasClass('rsAptDelete')) return false;
ShowDialog(true);
e.preventDefault();
});
});
If the target is the link the event is cancelled;
If you already have a click handler on the delete link, then just stop the event propagation there by using stopPropagation().
$(".rsAptDelete").click(function(e) {
e.stopPropagation();
});