We Keep Coding

How to add multiple input fileds to a div using jquerys clone and append

I am using jquery, to add dynamically two input fields in a new "row" div. The problem is, that only the second input field is cloned and appended.I can´t find the solution. Any help is appreciated.
Trainer= {
neuen_trainer_hinzufuegen(){
var n = $( ".trainerposition" ).length;
$( "#trainer" ).append( $('<div class="trainerposition" id="trainerposition_'+n+'"></div>') );
$( "#trainer_0_vorname" ).clone().appendTo( "#rtrainerposition_"+n );
$( "#trainerposition_"+n+" input:nth-child(2)").attr('name', 'trainer_'+n+'_vorname');
$( "#trainerposition_"+n+" input:nth-child(2)").attr('id', 'trainer_'+n+'_vorname');
$( "#trainer_0_nachname" ).clone().appendTo( "#trainerposition_"+n );
$( "#trainerposition_"+n+" input:nth-child(3)").attr('name', 'trainer_'+n+'_nachname');
$( "#trainerposition_"+n+" input:nth-child(3)").attr('id', 'trainer_'+n+'_nachname');
}
}

You have an extra r in your selector :-)
$( "#trainer_0_vorname" ).clone().appendTo( "#rtrainerposition_"+n );
I think this should be
$( "#trainer_0_vorname" ).clone().appendTo( "#trainerposition_"+n );

Weird JQuery scripts behavior

Applied DataTable (jquery.dataTables.min.js) to the existing table, so having that table paged and sorted:
$( '#news_table' ).DataTable( {
"order": [[ 5, "asc" ]],
"lengthMenu": [5, 10, 20],
} );
Everything works smoothly on first page of the table. Some JQuery scripts stop working correctly when change page. So, there are related chunks of code:
<td>
<a href="#myModal" class="editNews" role="button" data-toggle="modal" data-id="${news.id}">
<img src="resources/img/edit.png"></img>
</a>
</td>
By clicking on image (edit.png) modal window appears. The next part converts the modal to the edit flavour.
$( '.editNews' ).click(function(e) {
e.preventDefault();
$( '#deleteNews' ).removeClass( 'notShow' );
var dataId = $( this ).attr( 'data-id' );
$( '#resetNews' ).addClass( 'notShow' );
$.ajax({
type: "GET",
dataType: "json",
url: "admin/update/" + dataId,
success: function( response ) {
console.log( response );
$( '#myModalLabel' ).html( "Edit post with id:<span style='color: rgb(255, 0, 0);'>" + response.id + "</span>" );
$( '#newsId' ).text( response.id );
$( '#incomingDate' ).text( response.incomingDate );
$( '#changeDate' ).text( response.changeDate );
$( '#messageTitle' ).val( response.title );
$( 'div#messageStatus button' ).each(function( index ) {
if ( response.messageStatus == index + 1) {
$( this ).addClass( 'active' );
}
});
$( '.note-editable' ).html( response.message );
$( '#messageOrder' ).text( response.messageOrder );
$( '#myModal' ).modal( 'show' );
},
complete:function() {
}
});
return false;
});
I mean, that clicking, say on the link (edit.png) on any page excepting first one modal window will still appear, but will be empty, so looks like scripts just missed. I tried to figure it out, but stuck.
There are also some other scripts which also stopped acting properly.
Thanks for the any advice.
Images below illustrate the situation:

Hi this is quite common problem, you use your jQuery code once (on DOM ready I suppose).
When you click pagination table is generated again and that new elements are not bind to your jQuery code.
You have to 1) run jQuery code after each ajax request maybe using ajax complete:function() {//put me here...
or 2)
use jQuery "on"
$( "body" ).on( "click", ".editNews", function() {
//put your code here
});

Selector for filtered items with jQuery tableSorter plugin [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
This got into my head lately and honestly I think its worth asking. Here is the thingy..
I have a table , just like any other ordinary table with jquery tablesorter plugin with the filter widget. On the very right of the table columns I've put a checkbox and above that column, on the table headers on that columhn I have another checkbox which has a function linked to it, so that when it gets clicked all the checkboxes get updated with this checkbox's value .
This is not very fancy or sophisticated and I have two way of accomplishing this .. either using a jquery selector or plain old javascript.
so here is what I want todo .. I want to filter elements of the table, then click the checkbox on the header , and I want to affect the row's checkboxes that were filtered with the plugin.
anyone has something to say about this?
thanks .

I already have a demo set up for that here
$( function() {
// using .on() which requires jQuery 1.7+
$( 'table' ).on( 'tablesorter-initialized', function() {
// class name to add on tr when checkbox is checked
var highlightClass = 'checked',
// resort the table after the checkbox is modified?
resort = true,
// if a server side database needs to be updated, do it here
serverCallback = function( table, inputElement ) {},
$table = $( this ),
c = this.config,
wo = c && c.widgetOptions,
// include sticky header checkbox; if installed
$sticky = c && wo.$sticky || '',
doChecky = function( c, col ) {
$table
.children( 'tbody' )
.children( 'tr:visible' )
.children( 'td:nth-child( ' + ( parseInt( col, 10 ) + 1 ) + ' )' )
.find( 'input[type=checkbox]' )
.each( function() {
this.checked = c;
$( this ).trigger( 'change' );
});
};
$table
.children( 'tbody' )
.on( 'change', 'input[type=checkbox]', function() {
// ignore change if updating all rows
if ( $table[0].ignoreChange ) { return; }
var col, $this = $( this );
$this.closest( 'tr' ).toggleClass( highlightClass, this.checked );
$this.trigger( 'updateCell', [ $this.closest( 'td' ), resort ] );
// if your server side database needs more parameters, add them here sent to the callback
serverCallback( $table[0], this );
// uncheck header if any checkboxes are unchecked
if ( !this.checked ) {
$table.add( $sticky ).find( 'thead input[type=checkbox]' ).prop( 'checked', false );
}
})
.end()
.add( $sticky )
.find( 'thead input[type=checkbox]' )
// Click on checkbox in table header to toggle all inputs
.on( 'change', function() {
// prevent updateCell for every cell
$table[0].ignoreChange = true;
var c = this.checked,
col = $( this ).closest( 'th' ).attr( 'data-column' );
doChecky( c, col );
// update main & sticky header
$table.add( $sticky ).find( 'th[data-column=' + col + '] input[type=checkbox]' ).prop( 'checked', c );
$table.children( 'tbody' ).children( 'tr:visible' ).toggleClass( highlightClass, c );
// update all at once
$table[0].ignoreChange = false;
$table.trigger( 'update', [ resort ] );
})
.on( 'mouseup', function() {
return false;
});
});
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'stickyHeaders','filter'],
headers: {
0: { sorter: 'checkbox' }
}
});
});
Just make sure to include the parser-input-select.js file

jQuery multiple toggle hide all / show only one

Hello Dear Programmers,
I have a header menu, with "Search", "Language", "Time" toggle functions.
Regarding display onClick it works correctly, but I need If I Click on "Search" show only "Search" and hide all "Language", "Time".
My code
.js
$( '.search-toggle' ).on( 'click.twentyfourteen', function( event ) {
var that = $( this ),
wrapper = $( '.search-box-wrapper' );
that.toggleClass( 'active' );
wrapper.toggleClass( 'hide' );
if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
wrapper.find( '.search-field' ).focus();
}
} );
$( '.language-toggle' ).on( 'click.twentyfourteenn', function( event ) {
var that = $( this ),
wrapper = $( '.language-box-wrapper' );
that.toggleClass( 'active' );
wrapper.toggleClass( 'hide' );
} );
$( '.time-toggle' ).on( 'click.twentyfourteennn', function( event ) {
var that = $( this ),
wrapper = $( '.time-box-wrapper' );
that.toggleClass( 'active' );
wrapper.toggleClass( 'hide' );
} );
and html
<div class="search-toggle">
<?php _e( 'Search', 'twentyfourteen' ); ?>
</div>
<div class="language-toggle">
<?php _e( 'Search', 'twentyfourteenn' ); ?>
</div>
<div class="time-toggle">
<?php _e( 'Search', 'twentyfourteennn' ); ?>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
<div id="language-container" class="language-box-wrapper hide">
<div class="language-box">
language
</div>
</div>
<div id="time-container" class="time-box-wrapper hide">
<div class="time-box">
time
</div>
</div>

If I understand what you mean you want to hide two different elements when clicking search you want the others to hide?
By using add you can group elements together then add classes to show or hide:
$('#element1_id').add('#element2_id').removeClass('show');
$('#element1_id').add('#element2_id').addClass('hide');
or just straight up hide them with jQuery.
$('#element1_id').add('#element2_id').hide();
You could also give the element you want to hide together a common class name:
ie: toggle
then you can simply use the class toggle to hide them:
$('.toggle').removeClass('show');
$('.toggle').addClass('hide');
or
$('.toggle').hide();

i think this will hide other parts, i have not tried this but hope will work for u
$( '.search-toggle' ).on( 'click.twentyfourteen', function( event ) {
var that = $( this ),
wrapper = $( '.search-box-wrapper' );
that.toggleClass( 'active' );
$( '.search-box-wrapper' ).hide();
$( '.time-box-wrapper' ).hide();
$( '.language-box-wrapper' ).hide();
if ( that.is( '.active' ) || $( '.search-toggle .screen-reader-text' )[0] === event.target ) {
wrapper.find( '.search-field' ).focus();
}
} );
$( '.language-toggle' ).on( 'click.twentyfourteenn', function( event ) {
var that = $( this ),
wrapper = $( '.language-box-wrapper' );
$( '.search-box-wrapper' ).hide();
$( '.time-box-wrapper' ).hide();
$( '.language-box-wrapper' ).hide();
that.toggleClass( 'active' );
} );
$( '.time-toggle' ).on( 'click.twentyfourteennn', function( event ) {
var that = $( this ),
wrapper = $( '.time-box-wrapper' );
$( '.search-box-wrapper' ).hide();
$( '.time-box-wrapper' ).hide();
$( '.language-box-wrapper' ).hide();
that.toggleClass( 'active' );
} );

This should solve the problem. You can view working demo with this link Working Demo
Summary of what I did.
I added some text as link in the html (just for testing)
I added .hide() Jquery class to hide the three wrapper classes before the click events
I added a little bit of animation to wrapper.toggle('slow')
I changed wrapper.toggleClass('slow') to wrapper.toggle('slow')
$('.search-box-wrapper').hide();
$('.language-box-wrapper').hide();
$('.time-box-wrapper').hide();
$('.search-toggle').on('click.SearchLink', function (event) {
var that = $(this),
wrapper = $('.search-box-wrapper');
that.toggleClass('active');
wrapper.toggle('slow');
if (that.is('.active') || $('.search-toggle .screen-reader-text')[0] === event.target) {
wrapper.find('.search-field').focus();
}
});
$('.language-toggle').on('click.LangLink', function (event) {
var that = $(this),
wrapper = $('.language-box-wrapper');
that.toggleClass('active');
wrapper.toggle('slow');
});
$('.time-toggle').on('click.TimeLink', function (event) {
var that = $(this),
wrapper = $('.time-box-wrapper');
that.toggleClass('active');
wrapper.toggle('hide');
});

How to use SpyOnEvent to spy on events with jquery-jasmine

I'm using the jQuery-Jasmine extension to spy on events but i can't get the correct syntax.
// Get a button
var $button = $( '#ai1ec_subscribe_users' );
// Call the function
utility_functions.block_all_submit_and_ajax( $button.get(0) );
// check that all submit are disabled
var first_multi = $( '.ai1ec-facebook-refresh-multiselect:first' );
spyOnEvent( '.ai1ec-facebook-refresh-multiselect:first', 'click' );
first_multi.click();
expect( 'click' ).toHaveBeenTriggeredOn( '.ai1ec-facebook-refresh-multiselect:first' );
This gives me back
Expected event click to have been triggered on
.ai1ec-facebook-refresh-multiselect:first
but i clicked it on the row before the check so i must be doing something wrong.

The problem was that I wasn't triggering the event in the right way.
This worked:
it( "Prevent all ajax functionality", function() {
// Get a button
var $button = $( '#ai1ec_subscribe_users' );
// Call the function
utility_functions.block_all_submit_and_ajax( $button.get(0) );
// check that all submit are disabled
spyOnEvent( $( '.ai1ec-facebook-refresh-multiselect:first' ), 'click' );
$( '.ai1ec-facebook-refresh-multiselect:first' )[0].click();
expect( 'click' ).toHaveBeenTriggeredOn( $( '.ai1ec-facebook-refresh-multiselect:first' ) );
} );