I have code:
<div class="addButton col-lg-6">
<button type="button" class="btn btn-primary" data-toggle="modal">BTN</button>
</div>
<div class="table-responsive">
<div id="PositionDataTable2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div id="PositionDataTable2_processing" class="dataTables_processing" style="display: none;">Processing...</div>
// place where <div class="addButton"> should appear
<div id="PositionDataTable2_filter" class="dataTables_filter"></div>
<div class="dataTables_paginate paging_simple_numbers" id="PositionDataTable2_paginate"></div>
</div>
</div>
I want to take first div, which has addButton class and put into div PositionDataTable2 and place it between the processing and filter parts. But append and prepend only does it inside div start or end.
Also it would be great, if someone would suggest how to place it correctly and make a copy or so that my button wouldn't disappear on datatable fndestroy and recreate.
You could try using the $.after() insert like:
$(".dataTables_processing").after($(".addButton").html());
Jquerys insertAfter() should work.
Try something like this:
$('div.addButton').insertAfter('div#PositionDataTable2_wrapper');
EDIT: If you don't want that the first addButton disappears you could use .clone()
$('div.addButton').clone().insertAfter('div#PositionDataTable2_wrapper');
Related
how are you guys I have a question if anyone can help me, I'll be grateful.
at the moment I was using some bootstrap functionality, for example, this code below.
I'm using bootstrap version 3
<div class="col-lg-12 col-md-12 col-xs-12 div_challenger" style="background-color: #somecolor; color:someTextColor;"
data-toggle="tooltip" data-placement="right" title="some text here!!!">
<span class="some icon"></span>
<b>some title</b>
<input type="hidden" value="somevalue" name="inputChallengerSelected">
</div>
this code works well in html file.
But when I use Jquery append element this doesn't work the same way
code using jquery append.
<button id="someid" onclick="addElement()"> ADD element </button>
<div id="addhere"> </div>
script tags
<script>
function addElement(){
let ElementToAdd = ` <div class="col-lg-12 col-md-12 col-xs-12 div_challenger" style="background-color: #somecolor; color:someTextColor;"
data-toggle="tooltip" data-placement="right" title="some text here!!!">
<span class="some icon"></span>
<b>some title</b>
<input type="hidden" value="somevalue" name="inputChallengerSelected">
</div>`
$('#addhere').append(ElementToAdd)
}
if someone tells me why this occurs I will be totally grateful
Take a look at this:
How to bind bootstrap tooltip on dynamic elements
In order to make a dynamically injected tooltip work, you must initialize a tooltip plugin using an element, which exists already after the page is loaded, e.g. body. It should then work.
A simple answer is Bootstrap = CSS + JS.
Try to hide element onload and when you need show.
I am dynamically giving elements IDs with *ngFor like this:
<div *ngFor="let section of questionsBySubCat" class="col-md-12">
<div class="subcat-container">
<h4 class="sub-cat">{{ section?.subcategory }}</h4>
</div>
<div *ngFor="let question of section?.questions; let i = index" class="row">
<div class="col-md-11 col-xs-10">
<h5 (click)="toggleAnswer(question)" class="question">{{ question?.question }}</h5>
<div class="answer-div" id="ques-{{question?.subcategory.split(' ').join('')}}-{{question?.num}}">
<br> // DYNAMIC ID HERE ^^
<p [innerHtml]="question?.answer" class="answer-text"></p>
<hr>
<br>
</div>
</div>
</div>
</div>
When I check the elements in the console the IDs are created correctly. When I use jQuery to log out the inner html of the element it works perfectly but when I use jQuery to change the elements css (display to none) it does not work at all. Why is this?
Put your jQuery code for changing css elements in setTimeOut() function.
It is not working because you are trying to access dom element and modify their css before they gets created dynamically. So you should let your jQuery code(which change css element) in setTimeOut().
setTimeout(function () {
$('your dynamic dom element').addClass('in');
}, 1000);
Hope this helps.
I have a page hierarchy like this:
<div class="panel" attribute-id="1">
<button class="delete">
<div class="panel" attribute-id="2" association-id="20">
<button class="delete">
</div>
</div>
....
So I have a bunch of these panels with nested panels inside, and I'm trying to create on on click handler for the delete buttons of the top level panels only (so the ones immediately inside panels that do not have an association id). The only different between the parent and child panels is that the child ones have the extra attribute "association-id".
So I can select the top level panels only like so:
$('.panel[attribute-id]:not([association-id]')
But if I try to get the delete buttons from from these like:
$('.panel[attribute-id]:not([association-id] .delete')
Obviously I'm still going to get the child buttons.
I can't modify the html in anyway, how could I go about doing this?
$(':not(.panel[attribute-id][association-id]) > .delete')
seems to do the trick.
jsfiddle
I've changed .panel-group to .panel to get it to work with the HTML provided.
Wrap them all in a div and assign that div a unique class. Then you can use jquery selector ".panel-group > .panel" to get only direct children of top level.
<div class="panel-group">
<div class="panel" attribute-id="1">
<button class="delete">
<div class="panel" attribute-id="2" association-id="20">
<button class="delete">
</div>
</div>
<div class="panel" attribute-id="11">
<button class="delete">
<div class="panel" attribute-id="12" association-id="120">
<button class="delete">
</div>
</div>
</div>
You can use the children method:
$('.panel-group[attribute-id]').children('button').first()
I am having some trouble on making a button only to show one div, not all of them.
Here's my JS code:
$('.show_avatar').click(function(){
$('.avatar').toggle('slow',function() {
});
});
Here's my HTML:
<input class="show_avatar" type="button" value="Show"></input>
<div class="avatar" style="display:none" class="text-center">
<%= image_tag d.avatar.url(:medium) %>
</div>
My HTML is in a loop, so it generates multiple buttons with multiple images. When I click in any of the buttons (.show_avatar), all the divs appear (.avatar). I know why this happens, but I don't know how to fix it.
I thank you in advance.
Demo
Without needing any changes to the given HTML, you want to target the element that is the first match of .avatar after the button that you click. You can use next().
$('.show_avatar').click(function(){
$(this).next('.avatar').toggle('slow',function() {
});
});
You could wrap each in a wrapper
<div class="wrap">
<input class="show_avatar" type="button" value="Show"></input>
<div class="avatar" style="display:none" class="text-center">
<img src="http://placehold.it/150x150">
</div>
</div>
and change it to only call it's sibling:
$('.show_avatar').click(function(){
$(this).siblings('.avatar').toggle('slow',function() {
})
});
http://jsfiddle.net/e629orfb/
I would like to link the scrolling of the wrapper1 and wrapper2:
<div class="wrapper1">
<div class="div1">
</div>
</div>
<div class="wrapper2">
<div class="div2">
<div data-ng-class="{'hidden': loading!=0 }"
data-ng-form="gridForm">
<table class="form grid table" style="height: 600px; width: 1500px;">
</table>
</div>
</div>
</div>
The above is loaded dynamically and from what I have read I cannot use the .on jQuery method with scroll. So I would like to use something like this:
<div id="mydiv" onscroll='myMethod();'>
function myMethod(){ alert(1); }
Can someone give me some suggestions as to how I can make the scrolls work at the same time using the onscroll call and methods?
Please note that this is not a duplicate question to:
How can I get two scroll bars to scroll at the same time with jQuery and .on?