Develop Reference

Wizard radio button checked not work and post?

I am not getting data from class which is selected - radio button not post.
Live example: https://www.kodjs.com/uyeol.php
All-Code jQuery: https://jsfiddle.net/8Lbsdduv/1/
$('[data-toggle="wizard-radio"]').click(function(){
wizard = $(this).closest('.wizard-card');
wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
$(this).addClass('active');
$(wizard).find('[type="radio"]').removeAttr('checked');
$(this).find('[type="radio"]').attr('checked','true');
/*My code*/
$( "input" ).on( "click", function() {
$( "#log" ).html( $( "input:checked" ).val());
});

Try replacing
$(wizard).find('[type="radio"]').removeAttr('checked');
$(this).find('[type="radio"]').attr('checked','true');
with this
$(wizard).find('[type="radio"]').prop('checked', false);
$(this).find('[type="radio"]').prop('checked',true);

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?

Customize redundant Checkbox input Jquery Code

i have this working code bellow and i think he is a little bit too long and redundant can i customize it ?
$( "#unique" ).click(function() {
if ( $( this ).is(':checked') ) {
$( ".lotud" ).show();
$( "#add_lot" ).hide();
$( "#lots_rows_contnr" ).hide();
$(".lotud input").prop({disabled: false})
$("#lots_rows_contnr input").prop({disabled: true})
}
else {
$( ".lotud" ).hide();
$( "#add_lot" ).show();
$( "#lots_rows_contnr" ).show();
$(".lotud input").prop({disabled: true})
$("#lots_rows_contnr input").prop({disabled: false})
}
});

You can shorten it slightly through the use of ternaries, using the checked property on the DOMElement itself, joining selectors and using the checked property as the basis for the disabled property. Try this:
$("#unique").click(function() {
$(".lotud").toggle(this.checked);
$("#add_lot, #lots_rows_contnr").toggle(!this.checked);
$(".lotud input").prop({ disabled: !this.checked });
$("#lots_rows_contnr input").prop({ disabled: this.checked });
});
Which of the two versions, your original or the above, is more readable is a matter of opinion.

Adding selectmenu on select that's calling functions

I have a script that loads html content to a div and applies jquery tabs at the same time. However, I want to get JQuery Selectmenu on my select at the same time.
I'm having trouble figuring out how to nest these.
I'll be continuing looking at the API Docs, and tutorials, stackoverflow etc.
BUT, In the meantime, I thought someone could help expedite the process.
This is my script as is:
$(function() {
var work = $( "#display" );
$( "#selector" ).change(function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
This script works just like i want it to, but It doesn't get styled with my theme because it's not a selectmenu
I want my select to use selectmenu:
$(function() {
$( "#selector" ).selectmenu();
});
Attempt 1:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu(
$( "#selector" ).change(function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
);
});
});
});
Attempt 2:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu({
change: function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
});
Attempt 3:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu({
change: function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
});
Attempt 4:
This attempt loads the selectmenu theme, but kills functionality
$(function() {
$( "#selector" ).selectmenu();
});
$(function() {
var work = $( "#display" );
$( "#selector" ).change(function( event ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
});
});
Attempt 5:
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu ({
selectmenuchange: function( event, ui ) {
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
}
});
});

So, i went back to the Jquery Documentation and found the correct syntax to make this work. I also learned a little more about how to use the console tab in developer tools view to track down syntax errors.
$(function() {
var work = $( "#display" );
$( "#selector" ).selectmenu ({
change: function( event, data ){
work.load($(this).val(),function(){
$("#textdisplay").tabs();
});
}
});
});

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