Develop Reference

Jquery trigger not triggering element

I trying to get a trigger working but this doesn't seem to work. Im 100% sure this is the right code to do the job.
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
$( ".attachment-large" ).trigger( "click" );
});
});
however is there another way to trigger an element click when a different element is clicked?

I don't see flaws in that code. It might be something else then (classnames are correct?)
You could try getting the click on another thread:
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
setTimeout(function(){
$( ".attachment-large" ).trigger( "click" );
}, 10);
});
});
Or try another click method trigger:
$(document).ready(function() {
$( ".relrightbutton" ).click(function() {
$( ".attachment-large" ).click();
});
});
Is there no error message provided in your console?

jQuery dialog ui on button click with function not working

I am trying to get the following logic to work. Any suggestions would be greatly appreciated.
here is what I'm trying to do..
if <input type="button" name="filter" id="filter" value="Save / Change" /> is clicked.
then check if requiredFields() returns true
if requiredFields() returns true
then display jQuery UI dialog
from jQuery dialog action
set form field, change form action, submit form, change form action back to original action
jQuery(function($)
{
$("#filter").on("click", function() {
if(requiredFields()) {
$("#dialog").dialog("open");
$( "#dialog" ).dialog({
resizable: false,
height:175,
modal: true,
position: {
my: "center top",
at: "center top",
of: window
},
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
$('input[name="setAccess"]').val('1');
$("#myForm").attr("action", "submit.epl");
$( "form:myForm" ).submit();
$("#myForm").attr("action", "form.epl");
},
"No": function() {
$( this ).dialog( "close" );
$('input[name="setAccess"]').val('');
$("#myForm").attr("action", "submit.epl");
$( "form:myForm" ).submit();
$("#myForm").attr("action", "form.epl");
}
}
});
}
});
});

Here is Fiddle demo
I would suggest to change your workflow a bit... I would suggest to initialize modal dialog immediately on document ready event with autoOpen: false and later just use $("#dialog").dialog("open"); method to open it.

Popup window not showing div

I have this JQuery code:
function JQueryPopup(value) {
$(value).toggle();
$('#JQueryClose').click(function(){
$(value).hide();
});
$( document ).on( 'click', function ( e ) {
$(value).hide();
});
$( document ).on( 'keydown', function ( e ) {
if ( e.keyCode === 27 ) { // ESC
$(value).hide();
}
});
}
and a HTML button that calls this function, it doesn't seem to be showing the popup window/div.
here is a fiddle with my full code: http://jsfiddle.net/XHLY8/3/
P.S. i do have this code on another page, i call the function like this:
<script type="text/javascript">JQueryPopup('#customer_popup_notes');</script>
which works fine.

You need to add the following:
$('#inbox_button').on('click', function(event){
event.preventDefault(); // This isn't critical, but you would need
event.stopPropagation();
JQueryPopup('#inbox_div');
});
You want to stop the click event from bubbling up and triggering the following:
$( document ).on( 'click', function { ... });
Otherwise your #inbox_div will be hidden before you can see it.
Here is a working fiddle.
I suggest reading up on stopPropagation and preventDefault.

You dont need
$( document ).on( 'click', function ( e ) {
$(value).hide();
});
Which always hides the Bottom div no matter where u click .
Working fiddle

Calling a jQuery function multiple times

So, I have this function in jQuery:
$(function(){
$( ".unfocused" ).click(function ClickHeader () {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
});
It works perfectly when a header is clicked the first time, but when I try to click another unfocused header, the function doesn't work anymore. Is it because it runs on document .ready?
Thanks for your help!

Change it like this:
$( document ).on("click", ".unfocused", function() {
$( this ).addClass( "focused" );
$( this ).removeClass( "unfocused" );
$(".header").not(this).addClass( "unfocused" );
$(".header").not(this).removeClass( "focused" );
});
This basically registers the event on the document. When you click a header, the event bubbles up to the document. There, the given selector is validated and the function is executed if needed.

Here is a jsfiddle using the delegate operation for handling the event like you need.
http://jsfiddle.net/MN9Zt/2/
$("body").delegate(".unfocused", "click", function() {
$(this).addClass("focused");
$(this).removeClass("unfocused");
$(".header").not(this).addClass("unfocused");
$(".header").not(this).removeClass("focused");
});

set function on and off on one button click

I have a button #sort where I set the sortable() jQuery UI function. It works, but I want it to have one more functionality: when I click second time on the same button I would like to disable this function. What should I do?
$('#sort').click(function(){
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
Thank you in advance.

You can do:
$('#sort').click(function(){
if ($("#sortable").hasClass("ui-sortable")) {
$("#sortable").sortable("disable");
$("#sortable").removeClass("ui-sortable");
} else {
$("#sortable").sortable("enable");
$("#sortable").removeClass("ui-sortable-disabled");
}
});

To disable sorting:
$("#sort").sortable('disable');
To enable sorting:
$("#sort").sortable('enable');
// use case
$('#sort').click(function(){
var isEnabled = $( "#sort" ).sortable( "option", "disabled" );
if(isEnabled) {
$( "#sort" ).sortable( "disable" ); // disable sorting
});

$('#sort').click(function(){
if (!($(this).hasClass('sortable'))){
$("#sortable" ).sortable();
$(this).addClass('sortable');
}else{
$("#sortable" ).sortable("disable" );
$(this).removeClass('sortable');
}
});