I have a weird problem. I have a freight calculation field to be executed if the User deletes a digit input , I hide one content. While running the script in chrome console, it is loaded, but when using the call in html, js it does not run. This is what I have.
https://jsfiddle.net/diasbass/u3xr0921/
jQuery(document).ready(function($) {
$("#btnFreteSimulacao").click(function() {
$("#txtCep").keyup(function() {
if ($("#txtCep").val()) {
$('p.montagem').hide();
} else {
$('p.montagem').show();
}
});
});
});
The keyup event handler is inside the click function, probably it is of no use.
Also need to check $("#txtCep").val().length for showing and hiding the p.montagem
jQuery(document).ready(function($) {
$("#txtCep").keyup(function() {
if($("#txtCep").val().length ==0) {
$('p.montagem').hide();
} else {
$('p.montagem').show();
}
});
});
jsfiddle
Here you are mixing two asynchronous events 1) Button click 2) Input keyup. Your code expects to work when both are happening same time. I would suggest remove dependency on one event. Like below.
$( "#btnFreteSimulacao" ).click(function() {
// $("#txtCep").keyup(function() {
if($("#txtCep").val()) {
$('p.montagem').hide();
} else {
$('p.montagem').show();
}
});
// });
});
If thats not possible, try to look towards promises.
Related
I have one code block which I want to invoke in different scenarios when a click is triggered, depending on whether the event is direct or is delegated.
But on changing the code to on, it only works partially.
I have one code:
$(document).on('click','.selected-option',function(event){
//lot of code
I want to use:
$('.selected-option').click(function(event){ //lots of code }
I want to use this together like:
if (some condition)
{
$(document).on('click','.selected-option',function(event){
}
else
{
$('.selected-option').click(function(event){
}
and want to use the same code.
You don't have to use anonymous functions to handle events. Just write a regular function:
function handleClick(event) {
// lots of code
}
Then bind the function to as many events as you want:
if (some condition) {
$(document).on('click','.selected-option', handleClick);
else {
$('.selected-option').click(handleClick);
}
define a function and do the job;
var funCalled = function(){
//your detailed actions
}
and call it in different conditions!
if (some condition) {
$(document).on('click','.selected-option',function(event){
funCalled()
})
} else {
$('.selected-option').click(function(event){
funCalled()
});
}
var testfunction = function(currentObj){
// your code here
}
if (some condition)
{
$(document).on('click','.selected-option',function(event){
testfunction($(this));
});
}
else {
$('.selected-option').click(function(event){
testfunction($(this));
});
}
What I am trying to achieve is that whenever you click an image, it changes the window.location url, toggling it between '#' and '#footer'. Right now, all I have is this:
<script>
function clickarrow(){
var rd=Math.floor(Math.random()*11)
if (rd > 5){
window.location="#footer";
}
else{
window.location="#";
}
}
</script>
As you can see, this makes a 50:50 chance of either change being made. It works as a temparary fix, but sometimes you have to click up to 6 times for it to take effect.
Is there a way of doing this that properly toggles the window.location?
I am using jQuery 1.9.
If you're trying to reliably toggle the hash, rather than using a random chance, try something like this:
function clickarrow(){
var showFooter = true;
return function () {
if (showFooter) {
window.location.hash = "footer";
} else {
window.location.hash = "";
}
showFooter = !showFooter;
}
}
jQuery(function () {
jQuery('#myToggleLink').click(clickarrow());
});
Note: Normally when binding events, a function reference must be passed in. Here, I'm invoking clickarrow() since it returns a function by design. The returned function encapsulates the toggle variable via closure.
you can use data attribute to tell what is next step:
$('#arrow').click(function() {
if ($(this).data('footer'))
{
window.location="#footer";
$(this).data('footer', 'false');
alert('b');
}
else
{
window.location="#";
$(this).data('footer', 'true');
alert('a');
}
});
I have this html form
<form action="upload/" id="upload" name="upload">
// other form data
</form>
and this in html on page where i can switch form attributes
Download
Upload
and my javascript
$("#startUpload").click(function( {
$("form").attr('action','upload/').attr('id','upload');
});
$("#startDownload").click(function( {
$("form").attr('action','download/').attr('id','download');
});
$(function() {
$('#upload').uploadThis({
// other code here
});
$(function() {
$('#download').downloadThis({
// other code here
});
my problem is when i click on href #startUpload this is attached with $('#upload').uploadThis({}) function and it works but when i click on #startDownload it is not attaching this $('#upload').downloadThis({}) function and not getting called.
thanks for any help.
I'm not sure exactly what is the wanted behavior but changing IDs of elements always brings the same sort of issues.
You are doing this:
$(function() {
$('#upload').uploadThis({
// other code here
});
});
$(function() {
$('#download').downloadThis({
// other code here
});
});
$(<Function>); is a shorthand for $(document).ready(<Function>);
The thing is that when you're document is ready, it will execute both your handlers above but at that time, only an element with ID #upload exists, $('#download') will actually be an empty selection.
What you could do is call $('#upload').uploadThis() and $('#download').downloadThis() in your respective .click() handlers after changing the IDs.
$("#startUpload").click(function( {
$("form")
.attr({ 'action': 'upload/', 'id': 'upload' })
.uploadThis(...);
});
Note: if those are plugins you wrote yourself, be sure that they won't initialize each time you call them.
Hope I'm clear enough :o)
You can do this as many times as you like:
$("#startDownload").bind('click', function() {
...
});
You are trying to bind elements before they exist on DOM... will never work.
$("#startUpload").click(function( {
$("form").attr('action','upload/').attr('id','upload').submit(function() {
$(this).uploadThis({
//other code here
});
);
});
$("#startDownload").click(function( {
$("form").attr('action','download/').attr('id','download').submit(function() {
$(this).downloadThis({
//other code here
});
);
});
THis way you will bind the action you want in the submit form event. Probably will fix your problem.
A simple approach would be to make custom events for the form and trigger them by the onclick's:
$("#startUpload").click(function( {
$("form").trigger('upload');
});
$("#startDownload").click(function( {
$("form").trigger('download');
});
$("form").bind('upload',function(){
$(this).attr('action','upload/').uploadThis();
}).bind('download',function(){
$(this).attr('action','download/').downloadThis();
});
I wrote this in order to fix the problem IE has with select drop down lists being truncated if their options were longer than the default value of the select. Now it works fine but I want to improve the code in order to learn how to write things in a much more useable fashion.
$(document).ready(function() {
if ($.browser.msie) {
$('select').focus(function() { $(this).addClass('expand').removeClass('clicked'); })
$('select').blur(function() { $(this).removeClass('expand clicked'); })
$('select').mousedown(function () { $(this).addClass('expand').removeClass('clicked'); } )
$('select').hover(function () { }, function () {if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); $(this.blur()) }})
$('select').click (function() { $(this).toggleClass('clicked'); })
$('select').change(function(){ $(this).removeClass('expand clicked'); $('select.widerIE').blur() })
}
});
I tried making functions which were called by each event but that seemed to fail eg:
$('select').click(test (a))
function test (a) {
$(a).addClass('expand').removeClass('clicked')
}
It's not clear to me what you're trying to achive. One thing is sure - you can't define a event handler like that (see note below):
$('select').click(test (a))
Note: Technically, you could define your event handler like in code above. For that to work, function test would have to return a function that would be actual handler for the event.
This script is for a text box to fadeIn onClick then fadeOut onClick. It works the first time. But, the second time you do it, the $.noop() variable doesn't work. Here's the link of the site I just started working on. If you click on the "music","bio", or "links" tabs twice you will see what I'm talking about. Here's the jQuery:
$(document).ready(function() {
$('#music-box').hide();
$('#links-top-music').click(function() {
$('#music-box').fadeIn(1000);
$.noop();
$('#links-top-music').click(function() {
$('#music-box').fadeOut(750);
});
});
});
Try this.
$(document).ready(function() {
$('#music-box').hide();
$('#links-top-music').click(function(evt) {
if ($('#music-box:visible').length) {
$('#music-box').fadeOut(750);
}
else {
$('#music-box').fadeIn(1000);
}
evt.preventDefault();
});
});
Demo here: http://jsfiddle.net/naveen/pfT5E/
Based on your updated comment:
$(document).ready(function() {
var buttonStatus = false;
$('#music-box').hide();
$('#links-top-music').click(function() {
if(buttonStatus) {
$('#music-box').fadeOut(750);
} else {
$('#music-box').fadeIn(1000);
}
buttonStatus = !buttonStatus;
});
});
This will toggle between visible and invisible.