In my code I'm using a link button called updateLogButton which shows/hides a div. Because I use a link button everytime its clicked focus is moved to the beginning of the page. How can I stop this default behaviour?
Jquery snippet:
$('#updateLogText').hide();
$('#updateLogButton').click(function() {
if ($('#updateLogText').is(':visible')){
//hide div if content is visible
$('#updateLogText').fadeOut();
}else{
$('#updateLogText').fadeIn();
}
});
HTML code:
<tr>
<td>Update Log</td>
</tr>
<tr>
<td colspan="3" >
<div id="updateLogText" style="width:100%;">
<?php echo $data['updates']; ?>
</div>
</td>
</tr>
EDIT:
example of what i mean: http://jsfiddle.net/cF4Bb/7/
To prevent the default action when the link is clicked you can return false from the click handler or call event.preventDefault where event is the event object passed to the click handler.
$('#updateLogText').hide();
$('#updateLogButton').click(function(event) {
if ($('#updateLogText').is(':visible')){
//hide div if content is visible
$('#updateLogText').fadeOut();
}else{
$('#updateLogText').fadeIn();
}
event.preventDefault();
//or return false;
});
Add return false
$('#updateLogButton').click(function() {
if ($('#updateLogText').is(':visible')){
//hide div if content is visible
$('#updateLogText').fadeOut();
}else{
$('#updateLogText').fadeIn();
}
return false;
});
You can also try changing your href to:
Update Log
Return false from the one click event
$('#updateLogText').hide();
$('#updateLogButton').click(function() {
if ($('#updateLogText').is(':visible')){
//hide div if content is visible
$('#updateLogText').fadeOut();
}else{
$('#updateLogText').fadeIn();
}
return false;
});
Remove the href="#" from
<td><a **href="#"** id="updateLogButton">Update Log</a></td>
to
<td><a id="updateLogButton">Update Log</a></td>
note that this may remove the 'hyperlink' like text; which you can re-apply using css.
[EDIT: ADDED]
Alternatively you can use LinkButton instead as follows:
<asp:LinkButton id="btnLink" Text="Update Log" **onclick**="javascript:ShowHide(); return false;"/>
You will have to write your own javascript function. **Note: can't remember on top of my head whether it onclick or onclientclick but you get the idea.
Related
I know there is many topics for check a checkbox by clicking on href, but in every solution i seen, you can't check the checkbox by clicking on the checkbox, because it wrapped by the <a> tag.
There is my html :
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>
My Jquery :
$("#cb").click(function(e) {
e.preventDefault();
$("#mode").prop("checked", !$("#mode").prop("checked"));
})
What I need :
I need to be able to check the checkbox by clicking on href AND by clicking on the checkbox.
If this post is duplicate, i'm sorry but i didn't see it, link me the duplicate and i'll remove this.
JSFiddle
Check tag name of target to prevent while clicking on input - https://jsfiddle.net/fwzd08cw/2/
$("#cb").click(function(e) {
if((e.target).tagName == 'INPUT') return true;
e.preventDefault();
$("#mode").prop("checked", !$("#mode").prop("checked"));
});
$("#cb").click(function(e) {
if((e.target).tagName == 'INPUT') return true;
e.preventDefault();
$("#mode").prop("checked", !$("#mode").prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>
Your code have two events 'click' when you has click on checkbox, the parent trigger the 'click' event of them.
You need use event.stopPropagation() function to negate the propagation of event from children to parent.
$("#cb").click(function(e) {
e.preventDefault();
$('#mode').click(function(e) {
e.stopPropagation();
})
$("#mode").prop("checked", !$("#mode").prop("checked"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>
Add style on input:
pointer-events: none;
Try this, keep your input tag outside the anchor.
<a href='#' id='cb'> mode </a><input type='checkbox' id='mode'>
Try this without any JS code:
<a href='#' id='cb'><label>mode<input type='checkbox' id='mode'></label></a>
https://jsfiddle.net/fwzd08cw/5/
The 'checking' is twice inverted when clicking on the checkbox,
Add : $("#mode").click(function(e) { e.stopPropagation(); }); to prevent this side effect of being inside the link.
Use $('#cb, #mode') to select both elements
Use $(this).is('a') to check if href was the trigger and then check or uncheck accordingly
In every case do e.stopPropagation() to avoid calling click both times when checkbox is clicked 9one for input and one for href)
$('#cb, #mode').click(function (e) {
if ($(this).is('a')) {
e.preventDefault();
$('#mode').prop('checked', !$('#mode').prop('checked'));
}
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href='#' id='cb'>mode<input type='checkbox' id='mode'></a>
I don't know why you put checkobx inside the link but if you want a solution you can but the link inside a span like this
mode</span><input type='checkbox' id='mode'>
$("#mohamed").click(function(e) {
e.preventDefault();
$("#mode").prop("checked", !$("#mode").prop("checked"));
})
check this pen http://codepen.io/mohamed_sobhy292/pen/wWPzoo
I have a div main-wrap and an image in it.
I want to hide main-wrap when click on it. But when you click on image that is inside main-wrap I don't want to do anything. Right now I have this non-working code. When I click on image main-wrap still hides. (hidden is my class .hidden {display:none})
<div class="main-wrap" >
<div class="photo-wrap">
<img style="cursor:default;" onclick = "return false;" class="img img-responsive" src = "/stat_photo/1.jpg"/>
</div>
</div>
And I have this code
$(document).ready(function() {
$('.main-wrap').click(function(){$('.main-wrap').addClass('hidden')});
});
I ended up with this code
$('.main-wrap').on('click', function(e) {
$('.main-wrap').addClass('hidden');
}).on('click', 'img', function(e) {
// clicked on descendant div
e.stopPropagation();
});
which is taken from here
How to have click event ONLY fire on parent DIV, not children?
(the accepted answer didn't work though)
$('.main-wrap').click(function(e) {
$(this).addClass('hidden');
}).on('click', 'img', function(e) {
return false;
});
https://jsfiddle.net/bfwsqxko/1/
I added a click event, which extends with an exceptional click on image, which is set to return false;
Better add an id of the image. Then replace .img with #yourid
$(document).ready(function() {
$('.main-wrap').not('.img').click(function(){$('.main-wrap').addClass('hidden')});
});
Hi I try to show a div element in jQuery mobile when the user touch the button. I already created own classes for the button and for the div element, but nothing happens. What classes should I take?
JS:
$(document).ready(function(){
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).siblings("div.comment").toggle();
});
});
CSS:
.comment {
display:none;
}
HTML:
<?php foreach ($result as $key => $row): ?>
<div class="ui-btn-text">
<button class="commentbtn" data-rel="button">comment</button>
<div id="createcomment" class="comment" data-theme="a">
<form data-ajax="false" name="login-form" class="login-form" action="./comments.php" method="post" style="padding:20px 40px;">
<div class="content">
<textarea rows="1" name="text" id="text" class="foo"></textarea>
</div>
</form>
</div>
</div>
<?php endforeach; ?>
You haven't got any element with the class .btn-info so you wouldn't be able to call the event from:
$(".btn-info").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).closest(".comment").children(".comment").show();
});
You have an element with the class .commentbtn which you would then do the same as you did with the .btn-info
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
// Console log the element
console.log($(this).closest(".comment").children(".comment"));
// Console log not showing the right element. So you need to get the
// sibling of the clicked button
// Instead of doing - $(this).closest(".comment").children(".comment").show();
// You can do the following
$(this).siblings("div.comment").show();
});
.closest() - looks at the element itself and its parents for a match.
.siblings - Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
Example With .show();
Here an example with .toggle(); If you wanted to show/hide the comment with same button. (Just little extra for you to look at)
Example With .toggle();
UPDATE:
Example with .comment shown on load
Your button has class commentbtn, so you should use that instead of btn-info. Also, you should be looking for the sibling div, not the closest.
$(".commentbtn").on("click", function(e) {
e.preventDefault(); // in some browsers a button submits if no type=
$(this).siblings("div.comment").show();
});
JSFiddle demo
In my page I have a div with another div and an iframe as shown below.
<div class="v_dissc_tab" id="tabs-1">
<div id="publicevent">
<div class="crtraone" style="margin-left:800px;">
<button onclick="addpublic()">Add New</button>
</div>
<div>
<table width="100%">
<tr>
<td><b>Programme</b></td>
<td><b>Scheduled Start Time</b></td>
<td><b>Scheduled End Time</b></td>
<td><b>Amount</b></td>
<td><b>Status</b></td>
<td></td>
</tr>
<tr>
<?php if($publicnum>0)
{
}
else
{ ?>
<td colspan=6>
<?php echo "No any public channel programmes";?>
</td>
<?php }?>
</tr>
</table>
</div>
</div>
<iframe id="calendarframe" style="width: 100%;height:600px;display:none;" src="<?php echo base_url()?>index.php/channel/viewbookings">
</iframe>
</div>
On page loading, the div with id publicevent will be shown and the iframe is hidden. When I click on Add New button, the iframe will be loaded. Inside iframe I am loading another page which contains a button
<button onclick="managepublic()">Manage Public Events</button>
On clicking this button, I want to show the div with id publicevent and want to hide the iframe (as when the page is firstly loaded). Shown below is managepublic().
function managepublic()
{
location.reload(); // not making any changes
//$('#publicevent').show(); Tried with this also
//$('#calendarframe').hide();
}
Can anyone help me to solve this. Thanks in advance.
dont' use location.reload ,use only following code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
function managepublic()
{
$('#publicevent').show();
$('#calendarframe').hide();
}
On clicking this button, I want to show the div with id publicevent
and want to hide the iframe (as when the page is firstly loaded).
Check if this helps.
$('iframe').attr( "src", "http://www.apple.com/");
$('iframe').load(function() {
$('iframe').show()
$('#loaded').hide();
});
$('#button').click(function() {
$('#loaded').show();
$('iframe').hide();
});
JSFiddle
Try the following code snippet.
You are referring elements of <iframe>'s parent.
function managepublic(){
$('#calendarframe', window.parent.document).hide(250, function() {
$('#publicevent', window.parent.document).show();
});
}
Or
function managepublic(){
window.parent.$('#calendarframe').hide(250, function() {
window.parent.$('#publicevent').show();
});
}
Or Change the order of the hide events.
function managepublic(){
window.parent.$('#publicevent').show();
window.parent.$('#calendarframe').hide();
}
Note :
For this to work, parent must have jQuery included.
It won't work if parent is in different domain.
I have a dynamic div's which needed to hide when relevant delete button clicked. This divs also have dynamic id's. i want to hide relevant div where button is clicked. im only getting the first div id all the time. Im new to jQuery can someone please help.
$(document).ready(function(){
$(".reBox").click(function() {
alert($('.reBox').attr('id'));
// $(this).hide();
});
});
<div class="boxx" id="<?php echo $tot_meal; ?>">
<div class="reBox" id="<?php echo $tot_meal; ?>">
<img src="../images/error.png" width="16px" height="16px" />
</div>
</div>
As you have dynamic html elements use .on(). Try this:
$(document).ready(function(){
$(".boxx").on('click','.reBox',(function() {
$(this).hide(); //to hide reBox
$(this).parent("div.boxx").hide(); //to hide boxx element
});
});
Since you have dynamic elements, try event delegation
$(document).on('click', ".reBox", function () {
console.log(this.id);
$(this).hide();
//if you want to close boxx
// $(this).closest('.boxx').hide();
});