Wanted to have a word counter next to a input textbox on the website
Got it working to show the count when the user click or modify the text but I wanted to load up straight away when the page finish loading.
$(document).ready(function() {
$("#product_name").change(displayText).keyup(displayText);
function displayText(){
$("em#counter").text($(this).val().length +' chars');
}
});
So I tried this the code below but couldn't get it working and don't know why.
$(document).ready(function() {
if($("#product_name").length){
displayText();
}
$("#product_name").change(displayText).keyup(displayText);
function displayText(){
$("em#counter").text($(this).val().length +' chars');
}
});
Thanks so much.
Try this
if($("#product_name").length){
displayText();
}
$("#product_name").change(displayText).keyup(displayText);
function displayText(){
$("em#counter").text($("#product_name").val().length +' chars');
}
Demo: Fiddle
Problem was your displayText() call during page load. In displayText you had used $(this) to access the input field, which was working as a event handler. But when you call displayText directly this will point to the window object.
Try .on() with multiple event.
$("#product_name").on({
change: function() {
// Handle change event
},
keyup: function() {
// Handle keyup
}
});
and for "when the page finish loading." use $(window).load(function() { });
Related
I am trying to make a quantity feild in wordpress (woocommerce)...
It is working, but, i need to fire an event when i Press + or - beside Quantity,
that will "Update cart".
I did it as follows:
<script type="text/javascript">
jQuery('div.woocommerce')
.on('click', 'input.plus', //When I click on "input.plus
function funkca (){ // Run function
jQuery("[name='update_cart']").trigger("click"); //Click a button named update_cart
}
);
</script>
But the "function" (jQuery("[name='update_cart']").trigger("click")) needs to be fired cca. 1000ms after the initial click...
Anyone got any ideas?
Kind regards
Just put a timeout in, as so:
jQuery('div.woocommerce').on('click', 'input.plus', function(){ setTimeout(function (){
jQuery("[name='update_cart']").trigger("click");
}, 1000)});
you can use setTimeOut function like
function funkca (){ // Run function
setTimeout(function(){
jQuery("[name='update_cart']").trigger("click"); //Click a button named update_cart
}, 1000);
});
i hope it might help.
I have a JS function that I want to automatic click in a jquery.click link when page loads.
How can I make it work?
Fiddle
When page loads I want to see the alert, no click in the link needed.
js:
window.onload = function(){
document.getElementsByClassName("c").click();
}
$(".c").click(function(){
alert("ok");
});
html:
test
you need to attach click event before trigger event.
DEMO
Change
document.getElementsByClassName("c")
to
document.getElementsByClassName("c")[0]
Use Below code
$(document).ready(function(){
$(".c").click(function(){
alert("ok");
});
});
window.onload = function(){
document.getElementsByClassName("c")[0].click();
// Or use jQuery trigger
// $(".c").trigger('click')
}
DEMO HERE
trigger click on document.ready
$('document').ready(function(){
$(".c").click(function(){
alert("ok");
});
$('.c').trigger('click');
});
Trigger event right after you create handler
$(function(){
$(".c").click(function(){
alert("ok");
}).click();
});
DEMO
Try this way
$(document).ready(function(){
$(".c").trigger('click');
});
getElementsByClassName Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node.
To assign a click handler, either you will have to iterate through nodelist or just assign event to first element
Try this:
window.onload = function () {
document.getElementsByClassName("c")[0].click();
};
$(".c").click(function () {
alert("ok");
});
So you can push your alert into a function :
function callAlert() {
alert('a');
}
And you can change the event click like this :
$(".c").click(callAlert);
Finally you can call the alert function when page loads like this :
$('document').ready(function(){
callAlert(); // call here
});
Code :
$('document').ready(function(){
callAlert();
$(".c").click(callAlert);
});
function callAlert() {
alert('a');
}
I'm trying to figur out how I can set the var number and then use it in my other function Custom.init(number); and make it stay on the page.
//Set number onclick
function setVar() {
var number = document.getElementById("textbox").value;
//Pass in number
jQuery(document).ready(function() {
Custom.init(number);
});
};
If you're using jQuery, the ready function should wrap all other functions as it will be invoked first and foremost.
$(document).ready(function(){
var number = document.getElementById("textbox").value;
//Then do your validation here
var setVar = function(){
Custom.init(number);
//whatever else is involved with this
}
})
If that doesn't work I'd check the console for a specific error and ensure your Custom.init function is working as expected.
It doesn't make sense to hide the ready handler inside a function. The comments in your code do also suggest that you wish to call Custom.init in response to a mouse click on some element. You would register an event handler to this end.
A suggested streamlining:
//Set number onclick
$(document).ready(function() {
$(<selector for clickable elements>).on (
"click"
, function (eve) {
Custom.init(parseInt($("#textbox").val()));
1;
}
);
});
I have this code:
$('input.ShowResellerAccounts').on('click', function(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
which hides/shows a table tbody id on click.
how can i make this code run on page load as well as on click?
In the document.ready function you can trigger the click event like
$('input.ShowResellerAccounts').trigger('click');
Separate it into a function and bind in on load as well as on click:
function checkInput(){
if($(this).is(':checked')){
$('tbody#pages').hide();
} else {
$('tbody#pages').show();
}
});
$(document).ready(function() {
$('input.ShowResellerAccounts')
.on('click', checkInput) // bind to click
.each(checkInput); // call now
});
u can use $(document).ready :
$(document).ready(function(){
//put your code here
});
I tried to use focus for first input field on the form. but
it doesn't work. When I call attr("id") for that input it worked. When I call focus for the same input, I didn't see any
result. I also tried to use native Javascript. Does anyone know how to
fix that?
You are all misunderstanding the question. When Colorbox opens you can't focus an input field?
...unless you add your focus to the Colobox onComplete key e.g.
$('#mydiv a').colorbox({ onComplete:function(){ $('form input:first').focus(); }});
You could also bind the focus to an event hook:
$('#mydiv a').bind('cbox_complete', function(){
$('form input:first').focus();
});
That should be enough to get started.
use
$(document).ready(function() {
// focus on the first text input field in the first field on the page
$("input[type='text']:first", document.forms[0]).focus();
});
It may be happening that when your colorbox is opened its focus goes onto the highest element i.e. body of page. use document.activeElement to find that focus went to which element. Then find iframe or id of your colorbox and then set focus on it
Try the first selector,
$("form input:first").focus();
http://jsfiddle.net/erick/mMuFc/
I've just stumbled on this problem.
I think it's best to have a single $.colorbox opener like this:
function showActionForColorBox(
_url,
_forFocus
) {
$.colorbox(
{
scrolling: false,
href: _url,
onComplete: function () {
idColorboxAjaxIndect1.appendTo($('#cboxOverlay'));
idColorboxAjaxIndect2.appendTo($('#cboxOverlay'));
idColorboxAjaxIndect3.appendTo($('#cboxOverlay'));
idColorboxAjaxIndect4.appendTo($('#cboxOverlay'));
// --> Possible element's ID for focus
if (_forFocus) {
$('#' + _forFocus).focus();
}
return;
},
onCleanup: function () {
// TODO: ?
return;
},
onClosed: function () {
if (shouldReloadPageAfterColorBoxAction) {
// --> Should we reload whole page?
shouldReloadPageAfterColorBoxAction = false; // NOTE: To be sure: Reset.
window.location.reload(false);
}
else if (cbEBillsActionReloadPopup) {
// --> Should we reload colorbox
cbEBillsActionReloadPopup = false;
showActionForColorBox(_url);
}
else if (cbShouldLoadAnotherContentAfterClosed) {
// --> Should we reload colorbox with custom content?
cbShouldLoadAnotherContentAfterClosed = false;
$.colorbox({ html: setupContentForcbShouldLoadAnotherContentAfterClosed });
setupContentForcbShouldLoadAnotherContentAfterClosed = '';
}
return;
}
}
);
return;
}
You can also use
$.colorbox({
...,
trapFocus: false
});
to disable focus inside colorbox