i'm Trying to include an onclick event for a checkbox in my laravel application
This is my Input Section
<input type="checkbox" id="early_access" name="early_access">
And the function
$(document).ready(function() {
$('#early_access').change(function() {
alert("booyah");
});
});
The function is not working ..
Guys i found the problem and solved it
Unfortunately the frontend designer had some other function running for changing the style of checkbox and it was inherited from the master layout ...
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass: 'iradio_flat-blue'
});
});
this was running instead of my script :( .. when i removed it everything worked
Have you checked if your jquery was loaded?
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
Use on
$(document).ready(function() {
$('#early_access').on("change", function() {
alert("booyah");
});
});
If you can, I suggest that you use your selector #early_access as an argument.
$(document).ready(function() {
$(document).on("change", "#early_access" function() {
alert("booyah");
});
});
It might not be relevant with an id but if you use a class based attribute and you dynamically change the DOM, it will still be responsive. But that might be beyond the point of your question.
Your code is absolutely fine see this fiddle
https://jsfiddle.net/avinash8526/nL1crxn0/1/
$(document).ready(function() {
$('#early_access').change(function() {
alert("I will only work with check uncheck");
});
});
Further you have onchange event applied, hence this alert will only work if you check/uncheck this box
I want to run a function whenever the search input box is changed in chosen (jquery dropdown plugin).
But unable to find such event neither in their documentation nor on the net. Does anyone have experienced or have idea how to call some code whenever search is done in Chosen?
I tried placing the jquery .on('change' event on the textbox but it didn't work.
I wrote
$(".chosen-search input").on("change", function(e) {
//console.log($(this));
});
I had to "double" wrap the on to get the input event to fire on the Chosen text field search box:
$('#my-chosen-input').on('chosen:showing_dropdown', function() {
$('.chosen-search input').on('input', function() {
// The text has changed, do something...
});
});
$(".chosen-search").change(function(){
console.log("changinn");
});
This should work
Chosen js filters dropdown list onkeyup event. This snippet would work better:
$(document).on('keyup', '.chosen-search input', function() {
console.log('filtered');
})
I am using livequery for applying jquery chosen plugin (for adding tags) on dynamically added elements. I tried :
$(".chz").livequery(function () {
$(this).chosen();
});
Through above code, choose plugin is not applying. But if i tried this :
$(".chz").livequery('click', function () {
$(this).chosen();
});
Than it works properly. But in my case i can`t use click event because until user click over the element the plugin is not applied. What i am doing working in first case ?
try something like this
$("body").on('click', '.chz'function () {
$(this).chosen();
});
when we use chosen plugin then we set class like this
class ="chzn-select"
then
$(function() {
$("chzn-select").chosen();
});
i think this will help you
I've seen a couple of questions in regards to bootstrap modals, but none exactly like this, so I'll go ahead.
I have a modal that I call onclick like so...
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
});
This works fine, but when I show the modal I want to focus on the first input element... In may case the first input element has an id of #photo_name.
So I tried
$(".modal-link").click(function(event){
$("#modal-content").modal('show');
$("input#photo_name").focus();
});
But this was to no avail. Lastly, I tried binding to the 'show' event but even so, the input won't focus. Lastly just for testing, as I had a suspiscion this is about the js loading order, I put in a setTimeout just to see if I delay a second, will the focus work, and yes, it works! But this method is obviously crap. Is there some way to have the same effect as below without using a setTimeout?
$("#modal-content").on('show', function(event){
window.setTimeout(function(){
$(event.currentTarget).find('input#photo_name').first().focus()
}, 0500);
});
Try this
Here is the old DEMO:
EDIT:
(Here is a working DEMO with Bootstrap 3 and jQuery 1.8.3)
$(document).ready(function() {
$('#modal-content').modal('show');
$('#modal-content').on('shown', function() {
$("#txtname").focus();
})
});
Starting bootstrap 3 need to use shown.bs.modal event:
$('#modal-content').on('shown.bs.modal', function() {
$("#txtname").focus();
})
Just wanted to say that Bootstrap 3 handles this a bit differently. The event name is "shown.bs.modal".
$('#themodal').on('shown.bs.modal', function () {
$("#txtname").focus();
});
or put the focus on the first visible input like this:
.modal('show').on('shown.bs.modal', function ()
{
$('input:visible:first').focus();
})
http://getbootstrap.com/javascript/#modals
I am using this in my layout to capture all modals and focus on the first input
$('.modal').on('shown', function() {
$(this).find('input').focus();
});
I had the same problem with bootstrap 3, focus when i click the link, but not when trigger the event with javascript.
The solution:
$('#myModal').on('shown.bs.modal', function () {
setTimeout(function(){
$('#inputId').focus();
}, 100);
});
Probably it´s something about the animation!
I had problem to catch "shown.bs.modal" event.. And this is my solution which works perfect..
Instead simple on():
$('#modal').on 'shown.bs.modal', ->
Use on() with delegated element:
$('body').on 'shown.bs.modal', '#modal', ->
Seems it is because modal animation is enabled (fade in class of the dialog), after calling .modal('show'), the dialog is not immediately visible, so it can't get focus at this time.
I can think of two ways to solve this problem:
Remove fade from class, so the dialog is immediately visible after calling .modal('show'). You can see http://codebins.com/bin/4ldqp7x/4 for demo. (Sorry #keyur, I mistakenly edited and saved as new version of your example)
Call focus() in shown event like what #keyur wrote.
I've created a dynamic way to call each event automatically. It perfect to focus a field, because it call the event just once, removing it after use.
function modalEvents() {
var modal = $('#modal');
var events = ['show', 'shown', 'hide', 'hidden'];
$(events).each(function (index, event) {
modal.on(event + '.bs.modal', function (e) {
var callback = modal.data(event + '-callback');
if (typeof callback != 'undefined') {
callback.call();
modal.removeData(event + '-callback');
}
});
});
}
You just need to call modalEvents() on document ready.
Use:
$('#modal').data('show-callback', function() {
$("input#photo_name").focus();
});
So, you can use the same modal to load what you want without worry about remove events every time.
I had the same problem with the bootstrap 3 and solved like this:
$('#myModal').on('shown.bs.modal', function (e) {
$(this).find('input[type=text]:visible:first').focus();
})
$('#myModal').modal('show').trigger('shown');
Bootstrap has added a loaded event.
https://getbootstrap.com/docs/3.3/javascript/#modals
capture the 'loaded.bs.modal' event on the modal
$('#mymodal').on('loaded.bs.modal', function(e) {
// do cool stuff here all day… no need to change bootstrap
})
Bootstrap modal show event
$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();
})
A little cleaner and more modular solution might be:
$(document).ready(function(){
$('.modal').success(function() {
$('input:text:visible:first').focus();
});
});
Or using your ID as an example instead:
$(document).ready(function(){
$('#modal-content').modal('show').success(function() {
$('input:text:visible:first').focus();
});
});
Hope that helps..
I can't seem to get removeAttr to work, I'm using the example I saw on the jQuery site. Basically onclick I add the attribute to disable a field (which works just fine) but when the user clicks again it should enable the field in question. I used alerts to make sure the else block is being fired, so I know that's not it.
Code:
$('#WindowOpen').click(function (event) {
event.preventDefault();
$('#forgot_pw').slideToggle(600);
if('#forgot_pw') {
$('#login_uname, #login_pass').attr('disabled','disabled');
} else {
$('#login_uname, #login_pass').removeAttr('disabled');
}
});
Thanks.
All good used this:
$('#WindowOpen').toggle(
function()
{
$('#login_uname, #login_pass').attr("disabled","disabled");
},
function()
{
$('#login_uname, #login_pass').removeAttr("disabled");
});
Your problem is that the following line of code will always evaluate to true.
if('#forgot_pw')
try replacing with
if($('#forgot_pw').attr('disabled'))
$('#forgot_pw').attr('disabled', false);
should work for you.