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>

add and remove css class on hover

So I have this code and it works:
$('.col-main').on('mouseenter', '.product-wrapper', function () {
$( this ).addClass( "js-hover" );
});
$('.col-main').on('mouseleave', '.product-wrapper', function () {
$( this ).removeClass( "js-hover" );
});
But I want it to be a bit more elegant. Something like this:
listContainer.on( {
mouseenter: function() {
$( this ).addClass( "js-hover" );
console.log( "hoooover" );
},
mouseleave: function() {
$( this ).removeClass( "js-hover" );
}
}, productWrapper );
But I can´t get it to work :) Any help is appreciated

I think the problem is with productWrapper variable. Try like followoing.
var listContainer=$('.col-main')
var productWrapper='.product-wrapper';
listContainer.on( {
mouseenter: function() {
$( this ).addClass( "js-hover" );
console.log( "hoooover" );
},
mouseleave: function() {
$( this ).removeClass( "js-hover" );
}
}, productWrapper );

sth like this?
$('.col-main').on('mouseenter mouseleave', '.product-wrapper', function (e) {
$( this ).toggleClass( 'js-hover', e.type === 'mouseenter');
});

The jQuery hover and toggle functions could be useful to you.
$('.element-selector').hover(function(){
$(this).toggleClass('.class-to-toggle');
}, function(){
$(this).toggleClass('.class-to-toggle');
})
Fiddle: https://jsfiddle.net/sdso2219/
Update
Since you have now mentioned that this needs to work for dynamic elements, modify the .hover to .live, eg:
$('.element-selector').live('mouseenter', function(){
$(this).toggleClass('.class-to-toggle');
}).live('mouseleave', function(){
$(this).toggleClass('.class-to-toggle');
})

Set text for table with double click

I have several tables with ajax loaded content. Sometimes I have to change the content of a td manually before exporting it to PDF, so I thought best way would be to create a trigger for each td on double-click using jQuery's .dblclick(). The trigger would open a modal with an input field and change the text of the double-clicked td when submitting the modal.
This works, but when I change the content of a second, third, etc td, each previously clicked td gets the new value too.
Check my fiddle: https://jsfiddle.net/fvoufq07/
My code so far:
$( ".sitename" ).dblclick( function() {
var sitename = $( this );
$( "#msgBox .modal-title" ).html("Change sitename");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
$( "#msgBox button.btn" ).click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
});

It's because you re-use the same button for the modal. So everytime the modal is opened, you add a new listener on the button, but you don't kill the previous one.
You can kill a previous listener with off :
$( ".sitename" ).dblclick( function() {
var sitename = $( this );
$( "#msgBox .modal-title" ).html("Change sitename");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
$( "#msgBox button.btn" ).off('click').click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
});

The problem you're seeing is that the click function you add to the button
$( "#msgBox button.btn" ).click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
is not removed. Because of this, every time you open the model anew, you change the text of any previously clicked .sitename as well as the newly clicked one.
In order to avoid this, you should remove the click event, or better yet use jQuery's .one() function which will only fire the callback on the first instance of an trigger event:
$( "#msgBox button.btn" ).one('click', function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
Updated fiddle: https://jsfiddle.net/fvoufq07/6/
Update: The above solution doesn't catch the problem of opening the modal then closing without clicking the "close" save button.
There are a couple of ways to fix this: either use .off() before adding the new .one() callback, or again use .off(), but conditionally upon the modal closing using bootstap's hidden.bs.modal trigger.
$( "#msgBox" ).one('hidden.bs.modal', function() {
$( "#msgBox button.btn" ).off('click');
});
You might also want to assign the 'click' listener to a variable so that you can remove that listener specifically, which will be useful if you have other 'click' listeners on the same element.
var updateText = $( "#msgBox button.btn" ).one('click', function() {
...
});
$( "#msgBox" ).one('hidden.bs.modal', function() {
$( "#msgBox button.btn" ).off('click', updateText);
});
Updated fiddle at https://jsfiddle.net/fvoufq07/7/ has an example.

Try this
var sitename;
$( ".sitename" ).dblclick( function() {
sitename = $(this);
$( "#msgBox .modal-title" ).html("Change sitename ");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
});
$( "#msgBox button.btn" ).click( function() {
$(sitename).text( $( "#new_sitename" ).val().trim() );
});
here is updated jsfiddle

try this
$( ".sitename" ).dblclick( function() {
sitename = $( this );
$( "#msgBox .modal-title" ).html("Change sitename");
$( "#msgBox .modal-body" ).html("Enter new sitename:<input type=\"text\" id=\"new_sitename\">");
$( "#msgBox" ).modal("show");
$( "#msgBox button.btn" ).click( function() {
sitename.text( $( "#new_sitename" ).val().trim() );
});
});
Krupesh Kotecha beat me too it ;)

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);
});
});