This is the method:
$(document).ready(function () {
$('btnDelete1').click(function () {
alert("something");
})
});
And this is the code for the button:
<input type="submit" value="Delete Role" disabled="disabled" id="btnDelete1"/>
But whenever I click the button, the alert isn't happening. Why is this?
The problem isn't connected with MVC anyway, you missed # in Jquery selector only.
$(document).ready(function () {
$('#btnDelete1').click(function () {
alert("something");
});
});
EDIT:
And as mentioned Jeffrey, you forget ; too
Your selector is wrong
It should be
$(document).ready(function () {
$('#btnDelete1').click(function () {
alert("something");
});
});
Did you forget a ;?
$(document).ready(function () {
$('#btnDelete1').click(function () {
alert("something");
});
});
Related
I use this code to display a div onclick:
;(function($) {
$(function () {
$('.m-help .m-text').hide();
$('.m-help')
.live('click', function () {
$(this).find('.m-text').show();
})
.live('click', function () {
$(this).find('.m-link-close-button').hide();
});
});
$(document).bind('m-ajax-after', function (e, selectors) {
$('.m-help .m-text').hide();
});
})(jQuery);
And with this HTML:
<div class="m-help">
<div class="m-text" style="width: 40px;">
<?php echo $_helpHtml ?>
<span>x</span>
</div>
</div>
This does work onclick to display the div, but I want to use the X mark inside the div to close the div again.
Closing the div does not work.
What am I doing wrong and how can I fix this problem?
Event delegation
$('.m-help').on('click', function (event) {
var close = $(event.target).closest('.m-link-close-button').length;
$(this).find('.m-text')[close ? 'hide' : 'show']();
});
http://jsfiddle.net/moogs/9e47j19L/1/
you can get the parent of your close button with parent() so you can do it this way :
(function($){
$('.m-help .m-text').hide();
$('.m-help').live('click', function(ev) {
$(this).find('.m-text').show();
});
$(".m-link-close-button").live('click', function (ev) {
$(this).parent().hide();
});
})(jQuery)
try this:
HTML
<div class="m-help">
<div class="m-text" style="width: 40px;">
<?php echo $_helpHtml ?>
<span>x</span>
</div>
Click
</div>
JS:
$(".m-text").hide();
$(".m-link").click(function () {
$(".m-text").show();
});
$(".m-link-close-button span").click(function () {
$(".m-text").hide();
});
Working fiddle:http://jsfiddle.net/cncf5Lz9/
Use click event on a tag to close the div:
function($) {
$(function () {
$('.m-help .m-text').hide();
$('.m-help')
.live('click', function () {
$(this).find('.m-text').show();
});
$(".m-link-close-button").live('click', function () {
$(this).closest('.m-text').hide();
});
});
$(document).bind('m-ajax-after', function (e, selectors) {
$('.m-help .m-text').hide();
});
})(jQuery);
I am trying to make a simple profile linked to our company database, in which clients can log in and check their details. Basically, I need a function that will display a Save button when the edit button is clicked. As soon as I press cancel, the save button should disappear again.
I am a bit of a noob, so maybe I am missing something very simple, for which I apologise. The code and JSFiddle follow:
http://jsfiddle.net/65D9C/26/
<HTML>
<button src="#" id="littleButton">Edit Profile</button>
<div id="button-sm">
<input type="submit" class="ButtonSm" value="Save" id="save_button" name="save_button"></input>
</div>
</HTML>
<script>
$(document).ready(function () {
var SaveButton = $('#button-sm');
$(SaveButton).hide();
$('#littleButton').onclick(function (e) {
$(SaveButton).animate({
'opacity': 'toggle'
});
});
});
</script>
Working Demo : JSFiddle
It should be click event not onclick also you have to include jQuery library you can download from here jQuery 1.11.1
Try this :
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').click(function (e) {
SaveButton.animate({
'opacity': 'toggle'
});
});
});
For more info about click event see jQuery click event
there is click event not onclcik
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').on('click',function (e) {
SaveButton.show();
});
});
and you didn't include js in your fiddle.
DEMO
Try this : use click instead of onclick and you can use show("slow") to display show button
$(document).ready(function () {
var SaveButton = $('#button-sm');
$(SaveButton).hide();
$('#littleButton').click(function (e) {
var buttonLbl = "Edit Profile";
if($(this).text()!="Cancel")
buttonLbl="Cancel";
$(this).text(buttonLbl);
$(SaveButton).toggle('slow');
});
});
Demo
You did not include any jquery and also there is no onclick in jquery .so you have to use click event
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').click(function (e) {
SaveButton.animate({
'opacity': 'toggle'
});
});
});
Updated Demo
You have several problems in your code. First of all should be click instead of onclick.
See the code:
$(document).ready(function () {
var SaveButton = $('#button-sm');
SaveButton.hide();
$('#littleButton').click(function (e) {
SaveButton.show();
});
});
Updated jsFiddle
Try this (and sorry for my awful english)
JS - section
$(document).ready(function () {
$('#littleButton').on("click", function (e) {
e.preventDefault();
$("#button-sm").fadeIn(300);
});
$('#cancelButton').on("click", function(e){
$("#button-sm").fadeOut(300);
});
});
This jQuery show your SAVE button when you click on "EDIT" button and hide you button if you click on a "CANCEL" button (with id "cancelButton")
But you have to set this in your css first of all
CSS section
#button-sm {
display:none;
}
I have this code in my script:
$(document).ready(function() {
$('*').not('div#user').click(function() {
$('div#userSettings').hide();
});
$('div#user').click(function() {
$('div#userSettings').toggle();
$('div#profileSettings').toggleClass('rotate');
});
});
I need the div#userSettings to be hidden whenever anything but it's button or itself is clicked, and I want it to appear only when I click on the div#user.
the toggleclass does still work in this, just that the div#userSettings does not appear at all
You can stop the event propagation
$(document).ready(function () {
$(document).click(function (e) {
$('#userSettings').hide();
})
$('#user').click(function (e) {
e.stopPropagation();
$('#userSettings').toggle();
$('#profileSettings').toggleClass('rotate');
});
$('#userSettings').click(function (e) {
e.stopPropagation();
});
});
Demo: Fiddle
I have this code:
<script>
(function ($) {
$(document).ready(function () {
$("#thisclick, #thisclick2").click(function () {
if ($('.example').is(":hidden")) {
$(this).html($(this).html().replace(/Hide/, 'Show'));
} else {
$(this).html($(this).html().replace(/Show/, 'Hide'));
}
// Do it afterwards as the operation is async
$(".example").hide();
});
});
})(jQuery);
</script>
The way the current code works is that if #thisclick is clicked it hides #example. Which is what I require but when #thisclick is clicked again i want it to show #example. Using the above code, it won't work. What must I do to achieve this?
You should be able to change your code to as follows to get it to work:
(function ($) {
$(document).ready(function() {
$("#thisclick").click(function () {
$("#example").slideToggle("slow");
});
});
})(jQuery);
Here is a link to a quick sample:
http://jsfiddle.net/andyjmeyers/szmXp/
Are you expecting like
<button>This click</button>
<p style="display: none">Example</p>
<script>
$("button").click(function () {
$("p").toggle();
});
</script>
Please check it on http://jsfiddle.net/X5r8r/1107/
<script>
(function ($) {
$(document).ready(function() {
$("#thisclick").click(function () {
if ($('#example').is(":hidden")) {
$(this).html($(this).html().replace(/Hide/, 'Show'));
} else {
$(this).html($(this).html().replace(/Show/, 'Hide'));
}
// Do it afterwards as the operation is async
$("#thisclick").slideToggle("slow");
if($("#example").attr("isHidden") == "1")
$("#example").slideToggle("slow");
$("#example").attr("isHidden","1");
});
});
})(jQuery);
</script>
You can do this:
$("#thisclick").click(function () {
if ($('#example').hasClass("hidden"))
{
$('#example').removeClass("hidden");
$('#example').show();
}
else
{
$('#example').addClass("hidden");
}
}
or more easily:
$("#thisclick").click(function () {
$('#example').toggleClass("hidden");
}
define style":
.hidden
{ display:none;}
hello friends i want to use toggle on <li> when one <li> is open i want rest <li> get close i have tried this http://jsfiddle.net/MbTRD/1/ but its not working as i want
$(function () {
$(".flyout").hide();
$(".flyout").siblings("span").click(function () {
$(this).siblings(".flyout").toggle(500);
});
});
Please help thanks
http://jsfiddle.net/MbTRD/7/ should work
You had to put a $(".flyout").hide(500); in your function
But then you still have to check if you are clicking a open menu or not
like this
$(function () {
$(".flyout").hide();
$(".flyout").siblings("span").click(function () {
if($(this).siblings(".flyout").is(':hidden')){
$(".flyout").hide(500);
}
$(this).siblings(".flyout").toggle(500);
});
});
consider http://docs.jquery.com/UI/Accordion
Like this?
$(function () {
$(".flyout").hide();
$(".flyout").siblings("span").click(function () {
$('.flyout').hide(500);
$(this).siblings(".flyout").toggle(500);
});
});
This should do the trick:
$(function () {
$(".flyout").hide();
$(".flyout").siblings("span").click(function () {
if($(this).siblings(".flyout").is(':hidden'))
{
$(".flyout").hide();
$(this).siblings(".flyout").toggle(500);
}
});
});
Here is a jsfiddle if you want to try it out