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

Prevent A Parent Action With Bootstrap Popover

I have the following JavaScript:
$( ".aa-list-menu-item-heading" ).click(
function()
{
$( this ).find( ".aa-collapse" ).toggleClass( "glyphicon-chevron-left glyphicon-chevron-down" );
$( this ).next( ".row" ).slideToggle();
}
);
$("[data-toggle=popover]").popover();
The popover link is within a child div with class .aa-list-menu-item-heading
When I click the popover, it works, but the $( ".aa-list-menu-item-heading" ).click() runs
How can I prevent the parent child popover actioning the parent .click()?

You "can't", but you could check if the target of your click is the popover in your DIV click event handler and skip the execution just in case.
$( ".aa-list-menu-item-heading" ).click(
function(e)
{
if ($(e.target).data('toggle') !== 'popover'){
$( this ).find( ".aa-collapse" ).toggleClass( "glyphicon-chevron-left glyphicon-chevron-down" );
$( this ).next( ".row" ).slideToggle();
}
}
);

Using jQuery .click() method makes page jump to top, and returning false doesn't work

I have a few canvas elements and their appropriate jQuery:
$( "#myCanvas" ).click(function() {
$( "#myHistogram" ).fadeToggle( 0 );
$("#myCanvas").fadeToggle( 0 );
});
$( "#myHistogram" ).click(function() {
$( "#myHistogram" ).fadeToggle( 0 );
$("#myCanvas").fadeToggle( 0 );
});
$( "#stdDevCanvas" ).click(function() {
$( "#stdDevCanvas" ).fadeToggle( 0 );
$("#stdDevHistogram").fadeToggle( 0 );
});
$( "#stdDevHistogram" ).click(function() {
$( "#stdDevCanvas" ).fadeToggle( 0 );
$("#stdDevHistogram").fadeToggle( 0 );
});
Basically you can just toggle between a time chart and a histogram. When I click however, it sends me to the top of the page. I tried:
$( "#myCanvas" ).click(function(e) {
e.preventDefault();
$( "#myHistogram" ).fadeToggle( 0 );
$("#myCanvas").fadeToggle( 0 );
});
And had no success. What is causing the page jump? I've never dealt with this before.
Here's a live page:
http://lavancier.com/brockCharts/aa-research-data.php
Thanks!
EDIT: Upon further inspection, this problem only happens when both times are set to zero. If I change them to 1, it doesn't scroll to the top automatically.
I solved it by getting rid of the ( 0 ).
This works:
$( "#myCanvas" ).click(function() {
$("#myCanvas").hide( );
$( "#myHistogram" ).show( );
});
$( "#myHistogram" ).click(function() {
$( "#myHistogram" ).hide( );
$("#myCanvas").show( );
});
$( "#stdDevCanvas" ).click(function() {
$("#stdDevCanvas").hide( );
$( "#stdDevHistogram" ).show( );
});
$( "#stdDevHistogram" ).click(function() {
$( "#stdDevHistogram" ).hide( );
$("#stdDevCanvas").show( );
});

The reason this happens is because of fading order. The moment you click on a canvas, it fades out leaving a gap then the next canvas is faded in, however the browser sees this gap and scrolls the document to the top because there is no more content below. Of course this happens extremely fast and it's only programatically noticeable.
You can fix this by changing the order
$("#myCanvas").click(function () {
$("#myHistogram").fadeToggle(0);
$("#myCanvas").fadeToggle(0);
});
$("#myHistogram").click(function () {
$("#myCanvas").fadeToggle(0);
$("#myHistogram").fadeToggle(0);
});
$("#stdDevCanvas").click(function (e) {
$("#stdDevHistogram").fadeToggle(0);
$("#stdDevCanvas").fadeToggle(0);
});
$("#stdDevHistogram").click(function (e) {
$("#stdDevCanvas").fadeToggle(0);
$("#stdDevHistogram").fadeToggle(0);
});
Note how the next canvas fades in first then the clicked on fades out, this prevents from the element of leaving a 0 height in the body.

Set html from 1 div to another using jQuery

I have 1 div and 1 text input field, the div is visible and the input is hidden. The input one gets its value from a range slider, I want to use jQuery somehow to take the value from this input area and populate the div on the fly, I've tried the following with no luck, can anybody see where i may be going wrong?
$( ".value-slider" ).val( $( "#val-slider" ).slider( "value" ) );
$( ".price" ).html( $( ".value-slider" ).html() );

Assuming I've understood you correctly, .value-slider is an input element, and .price is a div element. If that's right, then you need to get the value of the input, rather than the HTML:
$( ".price" ).html( $( ".value-slider" ).val() );
However, since you've just set the value of .value-slider, why not just store the value of the slider and use that?
var sliderValue = $( "#val-slider" ).slider( "value" );
$(".value-slider" ).val(sliderValue);
$( ".price" ).html(sliderValue);

To update the div whenever the input changes, do this
$(".value-slider" ).change(function() {
var sliderValue = $( "#val-slider" ).slider( "value" );
$(".value-slider" ).val(sliderValue);
$( ".price" ).html(sliderValue);
});

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