We Keep Coding

click event does not work with firefox

I have a function which works very well with safari und chrome , but not with firefox. By clicking the button , it appears three inputfields with the name hid. So user can fill in. And clicking again, the fields disappears.
Firefox Problem: When i click, nothings happens. What is wrong with the function?
thanks
<script type="text/javascript">
{literal}
$( "#muendbtn" ).click(function () {
event.preventDefault();
if ( $( "tr[name=hid]" ).is( ":hidden" ) ) {
$( "tr[name=hid]" ).fadeIn( "slow" );
} else {
$( "tr[name=hid]" ).fadeOut();
}
});
{/literal}
</script>

try to put event as a parameter.. Like this
<script type="text/javascript">
{literal}
$( "#muendbtn" ).click(function (event) {
event.preventDefault();
if ( $( "tr[name=hid]" ).is( ":hidden" ) ) {
$( "tr[name=hid]" ).fadeIn( "slow" );
} else {
$( "tr[name=hid]" ).fadeOut();
}
});
{/literal}
</script>

Uncaught SyntaxError: missing ) after argument list....but it's not missing [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
Here is the code I'm having a problem with:
<script>
$( "li#1" ).hover(
function() {
$( this ).append( $( "<span>Answer 1</span>" ) );
} function() {
$( this ).find( "span:last" ).remove();
}
);
$( "li#2" ).hover(
function() {
$( this ).append( $( "<span>Answer 2</span>" ) );
} function() {
$( this ).find( "span:last" ).remove();
}
);
</script>
There is no problem with li#2, even though li#1 has identical syntax but is getting "Uncaught SyntaxError: missing ) after argument list" in li#1. Where am I missing the parenthesis? NetBeans debugger tells me it's in the line } function() { which is identical for both.

Your problem is the missing commas in both .hover() statements. Try this:
$( "li#1" ).hover(
function() {
$( this ).append( $( "<span>Answer 1</span>" ) );
},
function() {
$( this ).find( "span:last" ).remove();
}
);
$( "li#2" ).hover(
function() {
$( this ).append( $( "<span>Answer 2</span>" ) );
},
function() {
$( this ).find( "span:last" ).remove();
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="1">One: </li>
<li id="2">Two: </li>

You are missing commas to separate the multiple functions in each of your .hover()'s
<script>
$( "li#1" ).hover(
function() {
$( this ).append( $( "<span>Answer 1</span>" ) );
}, // <-- comma added here
function() {
$( this ).find( "span:last" ).remove();
}
);
$( "li#2" ).hover(
function() {
$( this ).append( $( "<span>Answer 2</span>" ) );
}, // <-- comma added here
function() {
$( this ).find( "span:last" ).remove();
}
);
</script>

You are missing a comma after first function definition for both li#1 and li#2
$( "li#1" ).hover(
function() {
$( this ).append( $( "<span>Answer 1</span>" ) );
}, //notice comma before function
function() {
$( this ).find( "span:last" ).remove();
}
);

Toggle one div from two clicks if untoggled

I have a comment section that is initially hidden, and would be revealed by a link on the comment count and/or a link to add comments.
I would like for the comment section to open by either link, but not close if its already opened.
$( "#commentsToggle").click(function() {
$( "#comments" ).toggle( "fast" );
return false;
});
$( ".comment-add a").click(function() {
$( "#comments" ).toggle( "fast" );
return false;
});
See the jsfiddle
http://jsfiddle.net/pQ2np/
Thanks
EDIT: The '#commentsToggle' should be able to toggle (hide) the comments if open, the '.comment-add a' should only show, not hide as it opens an ajax comment form.
This is the code solves my need:
$( "#commentsToggle").click(function() {
$( "#comments" ).toggle( "fast" );
return false;
});
$( ".comment-add a").click(function() {
$( "#comments" ).show( "fast" );
return false;
});
http://jsfiddle.net/pQ2np/6/

If you want them to remain open. use show() instead of toggle().
$( "#commentsToggle").click(function() {
$( "#comments" ).show( "fast" );
return false;
});
$( ".comment-add a").click(function() {
$( "#comments" ).show( "fast" );
return false;
});

You can put both selectors into one function and pass true as the first parameter to showOrhide as referenced in the docs.
$( "#commentsToggle, .comment-add a").click(function() {
$( "#comments" ).toggle( true );
return false;
});
http://jsfiddle.net/pQ2np/3/

Try to use the code in the following link (I have updated your own).
I am not sure why to use toggle and not show. But generally you can check the css display attribute because this is what is used by jquery events.
$( "#commentsToggle").click(function() {
if ($( "#comments" ).css("display") != "block")
$( "#comments" ).toggle( "fast" );
return false;
});
$( ".comment-add a").click(function() {
if ($( "#comments" ).css("display") != "block")
$( "#comments" ).toggle( "fast" );
return false;
});
jsfiddle
Is that you are looking for?

You could use .show() instead of .toggle(), or you could add "true" as one of the parameters:
$( "#commentsToggle").click(function() {
$( "#comments" ).toggle( "fast", true );
return false;
});
$( ".comment-add a").click(function() {
$( "#comments" ).toggle( "fast", true );
return false;
});
Using false instead of true will hide the elements, so using a variable in there could come in useful later.

Here's an updated Fiddle plus enhancements. Below is the gist of it:
$( "#commentsToggle, .comment-add a").click(function (e) {
e.preventDefault();
var $comments = $("#comments");
if ($comments.is(":visible")) {
return;
}
$comments.show("fast");
});
UPDATE: I missed the fact that if you "show" the links again but want to prevent them from being toggled, you only need to use the .show() method. No need for toggle if your intention is for the comments section to appear once and remain open.

How can I shorten this code jquery

$( "#nextFrom1" ).click(function(){
$( "#widget01" ).fadeOut( "slow", function(){
$( "#widget02" ).fadeIn( "slow" );
});
});
$( "#nextFrom2" ).click(function(){
$( "#widget02" ).fadeOut( "slow", function(){
$( "#widget03" ).fadeIn( "slow" );
});
});
$( "#prevFrom3" ).click(function(){
$( "#widget03" ).fadeOut( "slow", function(){
$( "#widget02" ).fadeIn( "slow" );
});
});
$( "#prevFrom2" ).click(function(){
$( "#widget02" ).fadeOut( "slow", function(){
$( "#widget01" ).fadeIn( "slow" );
});
});
Please guide me in the right direction of shortening this code. Objects maybe?! This is just a small chunk of the ever repeating anonymous functions.

Create a functiont to do the binding for you, passing in your respective ids:
function BindClick(clickId, widgetId1, widgetId2){
$( clickId ).click(function(){
$( widgetId1).fadeOut( "slow", function(){
$( widgetId2 ).fadeIn( "slow" );
});
});
}
And calling:
BindClick("#nextFrom1", "#widget01", "#widget02");
//etc

Maybe something like this:
function makeClickHandler(fadeOut, fadeIn){
return function(){
$( "#widget" + fadeOut ).fadeOut( "slow", function(){
$( "#widget" + fadeIn ).fadeIn( "slow" );
})
};
}
$( "#prevFrom2" ).click(makeClickHandler("02", "01") );

Create jquery plugin rather than repeating code
example : http://pranayamr.blogspot.com/2010/11/jquery-plugin-how-and-when-to-use-it.html

Create a jQuery plugin. Here is something to get you started:
(function($) {
$.fn.directWidget = function(options) {
var defaults = {
/* default options go here */
hiding: null,
showing: null,
speed: 'slow'
};
var settings = $.extend({}, defaults, options);
return this.bind('click.directWidget', function(e) {
$(settings.hiding).fadeOut(settings.speed, function() {
$(settings.showing).fadeIn(settings.speed);
});
});
};
})(jQuery);
You can then call like so:
$('#nextFrom1')
.directWidget({ hiding: '#widget01', showing: '#widget02', speed: 'slow' });

jquery bind an event to a class, or something to the same effect?

I'd like to bind an event to a class, or any alternative to the redundant code I posted below. Any ideas?
thanks,
mna
(function(){
$( "button", "body" ).button();
var submenu=false;
$( "#about" ).click(function() {
$( "#content" ).fadeOut(1000);
$( "#content" ).load('about.html');
$( "#content" ).fadeIn(1000);
});
$( "#community" ).click(function() {
$( "#content" ).fadeOut(1000);
$( "#content" ).load('community.html');
$( "#content" ).fadeIn(1000);
});
$( "#store" ).click(function() {
$( "#content" ).fadeOut(1000);
$( "#content" ).load('store.html');
$( "#content" ).fadeIn(1000);
});
$( "#projects" ).click(function() {
$( "#content" ).fadeOut(1000);
$( "#content" ).load('projects.html');
$( "#content" ).fadeIn(1000);
});
});

Either use the multiple selector
$("#about, #community, #store, #projects").click(function() {
$("#content").fadeOut(1000)
.load(this.id + '.html')
.fadeIn(1000);
});
or give these elements the same class and use
$('.classname').click(...);
Update:
I've seen that #pointy had a good point, but he deleted his answer: You probably want for fadeOut, load, fadeIn to occur one after another. Then you have to put them in callbacks:
$("#content").fadeOut(1000, function() {
$(this).load(this.id + '.html', function() {
$(this).fadeIn(1000);
})
});
See their documentation for more information.

How about this?
Set the class load-content to all of the elements that you want to bind the click event to.
(function(){
$("button, body").button();
var submenu=false;
$(".load-content").click(function() {
$("#content").fadeOut(1000).load(this.id+'.html').fadeIn(1000);
});
});