I have a div structure as
<div class="hours_logged">
<div class="time_item">
<div class="record_id"></div>
<div class="time_logged">0</div>
<div class="desc"></div>
</div>
</div>
I am adding new items dynamically. When I add new time I save that via AJAX call and update my DOM. The above is the DOM that I want to update. If user adds 2 new times I want to add another "time_item" DIV and populate values in that. I am already using jquery each function and I get the index number right for the DIV but how do I check like if index is 2 then
if(!$('.hours_logged').eq(index))
{
$('.hours_logged').append(' <div class="time_item">
<div class="record_id"></div>
<div class="time_logged">0</div>
<div class="desc"></div>
</div>');
}
try this:
if($('.hours_logged').length < 1)
{
$('.hours_logged').append(' <div class="time_item"><div class="record_id"></div><div class="time_logged">0</div><div class="desc"></div></div>');
}
Related
so, I'm working on a project that has 2 tables in database that are related!
I need via JavaScript Hide and Show the divs containing the right information.
I got a main product Stone, and each Stone has 2 other Stone Types
So if I click on the img that has Stone1, I want to show Stone1.1, Stone1.2, etc and hide all the other StoneTypes.
This is what I got now on JS
jQuery('.Pedras').click(function(){
jQuery('.SubPedras').hide();
jQuery('#div'+$(this).attr('target')).show();
});
The problem here is that I only get the first div to show, eventhough I have 2 divs with the same Name example:
<div id="div{IdPedra}" class="SubPedras">
<div id="div{IdPedra}" class="SubPedras">
<div id="div{IdPedra}" class="SubPedras">
And {IdPedra} Is the id of the stone in the database, so I will get "div1" two or 3 times, etc.
Can anyone pls help me, I'm not able to find a suitable solution for my need.
Thank you!
You could use data-attributes to accomplish this. In your change my code to;
<div data-id="{IdPedra}" class="SubPedras">Stone 1.1</div>
<div data-id="{IdPedra}" class="SubPedras">Stone 1.2</div>
<div data-id="{IdPedra}" class="SubPedras">Stone 2.1</div>
<div data-id="{IdPedra}" class="SubPedras">Stone 2.2</div>
You can access an element's data-attribute by using $(element).data("name"); this is equivalent to data-name. I also stored the Pedras
Loop through the SubPedras and check if they match the button where the parent category or value you wish to use as filter. Run the snippet, thanks!
(You could also store them to class attribute instead of data)
jQuery('.Pedras').click(function() {
// store button value to variable
var pedraValue = $(this).val();
// loop through the SubPedras
$(".SubPedras").each(function() {
// get the value from data attribute
if ($(this).data("id") == pedraValue) {
// if match show
$(this).show();
}
else{
// else hide
$(this).hide();
}
});
});
.SubPedras{
line-height:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-id="Stone1" class="SubPedras">Stone 1.1</div>
<div data-id="Stone1" class="SubPedras">Stone 1.2</div>
<div data-id="Stone2" class="SubPedras">Stone 2.1</div>
<div data-id="Stone2" class="SubPedras">Stone 2.2</div>
<button class="Pedras" value="Stone1">Stone 1</button>
<button class="Pedras" value="Stone2">Stone 2</button>
I'm working on a listing page and I am trying to create a "Load More Items" functionality. I'm attempting to use .load() to append all ".vehicleListing" elements from another page url (the second listing page) and add them after the last occurrence of a a div with the class of "vehicleListing".
Page 1:
<div class="overview-feature-1">
<div class="vehicleListing">1</div>
<div class="vehicleListing">2</div>
<div class="vehicleListing">3</div>
<div class="vehicleListing">4</div>
<div class="vehicleListing">5</div>
<div class="vehicleListing">6</div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
Page 2:
<div class="overview-feature-1">
<div class="vehicleListing">7</div>
<div class="vehicleListing">8</div>
<div class="vehicleListing">9</div>
<div class="vehicleListing">10</div>
<div class="vehicleListing">11</div>
<div class="vehicleListing">12</div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
Desired Result:
Page 1 after "Load More" functionality is executed:
<div class="overview-feature-1">
<div class="vehicleListing">1</div>
<div class="vehicleListing">2</div>
<div class="vehicleListing">3</div>
<div class="vehicleListing">4</div>
<div class="vehicleListing">5</div>
<div class="vehicleListing">6</div>
<div class="vehicleListing">7</div>
<div class="vehicleListing">8</div>
<div class="vehicleListing">9</div>
<div class="vehicleListing">10</div>
<div class="vehicleListing">11</div>
<div class="vehicleListing">12</div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
This is what I have so far, but it keeps adding it inside the last vehicleListing div instead of after it.
$(".vehicleListing").after().last().load('page2url' + ' .vehicleListing');
Can someone point out why it's inserting inside the last div instead of after it, and how I can correct this?
Here is what worked for me:
Add an empty div after the last vehicleListing in your first file
<div class="overview-feature-1">
<div class="vehicleListing">1</div>
<div class="vehicleListing">2</div>
<div class="vehicleListing">3</div>
<div class="vehicleListing">4</div>
<div class="vehicleListing">5</div>
<div class="vehicleListing">6</div>
<div id="container"></div>
<div class="controls"></div>
<div class="additional-controls"></div>
</div>
And change your JS
$("#container").load('http://aba.bbtj.dev/test2.html' + ' .vehicleListing', function(){
$('#container').replaceWith(function() {
return $('.vehicleListing', this);
});
$( '<div id="container"></div>' ).insertAfter( ".vehicleListing:last" );
});
This will load the new vehicles in the empty div, and then remove that div and keep the new vehicles (using the replaceWith function).
Then we re-add the empty div to be able to add more vehicule.
Load documntation:
Description: Load data from the server and place the returned HTML into the matched element.
$(".vehicleListing").after().last()
Targets the last vehicleListing div.
You can try smething like:
$.load('page2url' + ' .vehicleListing').insertAfter(".vehicleListing:last");
Your probably going to have to go about this differently. As mentioned, load() takes the response and loads it into the element it is operating upon. Since it replaces the contents, it doesn't really fit what you are trying to do which is to append additional content to an existing element. Your best bet is to probably use an ajax method instead.
$.get('page2url' + ' .vehicleListing', function(data){
$(".vehicleListing").last().after(data);
});
I implemented drag 'n' drop on my application using Dragula, but I need to set it so I can drop my elements to more than one div.
I tried to use a class to achieve it, but it just activates the first one of my divs.
THe HTML:
<div role="presentation" class="table table-striped">
<div class="files" id="upload-file"></div>
</div>
<div class="col-md-4">
<div class="drag-container">Test 1</div>
<div class="drag-container">Test 2</div>
<div class="drag-container">Test 3</div>
</div>
The JS calling Dragula:
dragula([document.querySelector('#upload-file'), document.querySelector('.drag-container')]);
How can I drop te items to more than one div?
You can define an array containers:
var containers = $('.drag-container').toArray();
containers.concat($('#upload-file').toArray());
And then, pass the var 'containers' to dragula initializer:
dragula(containers, {
isContainer: function (el) {
return el.classList.contains('drag-container');
}
});
For those without jQuery or $ you can use:
dragula([].slice.call(document.querySelectorAll("drag-container")));
This converts the NodeList to an array and passes it to dragula.
querySelector only returns a single element, you would need to use querySelectorAll in order to get a list of elements. Not sure how dragula would handle getting a two element array, with the second element being an array. You may want to generate the array first, add the '#upload-file' to that array, and then pass the array. Or you could generate the array after initializing, and cycle through the array, adding the elements dynamically using something like "drake.containers.push(container);". I got this construct directly from the github site https://github.com/bevacqua/dragula
HTML:
<div className="wrapper">
<div className="container col-md-4" id="A">
<div className="panel panel-white">
</div>
<div className="panel panel-white">
</div>
</div>
<div className="container col-md-4" id="B">
<div className="panel panel-white">
</div>
<div className="panel panel-white">
</div>
</div>
</div>
JS:
dragula([document.querySelector('#A'), document.querySelector('#B')]);
You can drag each item in one column to the other. You can add more columns with the class name of container.
If you want to specify a custom class name, you should define option like this :
Option:
let options = {
isContainer: (el) => {
return el.classList.contains('drag-container'); // The immediate elements in this container will be draggable
}
i am using IPB and i am going to put each category into a new tab the category div is something like this:
<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>
and my tabs content is like this:
<div class="content">
<div id="content-1" class="content-1">
</div>
</div>
and the categories divs is already showing but i want it to be moved to the content-1 div without duplicate so i want it to move from its div to this div with jjava script how?
<script>
document.getElementById('content-1').appendChild(
document.getElementById('category_100')
);
</script>
this worked for me but how can i add more than id to category_100
i want it to be like this in one script code so i would not repeart the scrip code four times:
<div class="content">
<div id="content-1" class="content-1">
<div id='category_100'>
<div id='category_104'>
<div id='category_102'>
<div id='category_101'>
</div>
</div>
using my two lines the suggested things here is not working!
Try this code :
$('div[id^="category_"]').appendTo('#content-1')
Have a look to this fiddle : http://jsfiddle.net/lulu3030/sjEPx/2/
"using my two lines the suggested things here is not working!"
You just get a single element with an ID and trying to append it...
Live Demo
If you want to append multiple elements, there are many ways...
Wrap those elements and then append...
<div id="categories">
<div id='category_100'></div>
<div id='category_104'></div>
<!-- etc. -->
</div>
document.getElementById('content-1').appendChild(document.getElementById('categories'));
or add same class to all elements that you want to append...
<div id='category_100' class="myClass"></div>
<div id='category_104' class="myClass"></div>
[].forEach.call(document.getElementsByClassName("myClass"), function (value, index, array) {
document.getElementById("content-1").appendChild(value);
});
or get elements with query selector that match some pattern...
[].forEach.call(document.querySelectorAll("div[id^='category_']"), function (value, index, array) {
document.getElementById("content-1").appendChild(value);
});
and etc.
I have something like this in my page:
<div id="test">
<div class="item">Test</div>
<div class="item">Test</div>
<div class="item">Test</div>
<div class="item">Test
<div class="container">
<div class="item">Test2</div>
<div class="item">Test2</div>
<div class="item">Test2</div>
</div>
</div>
</div>
Now I want to do something like this:
$.each(this.find(".item"), function(index, value) {
$(value).html("Test" + $(value).html());
});
Of course I want to do some more stuff inside the loop, but this is only an example. When I do this, all "Test" change into "TestTest", but "Test2" does not change into "TestTest2". Is there a way to select these items, even if there are inside another one? Btw: There could be a conatiner in every item. Even in those who are already nested.
The call to $(value).html("Test" + ...) actually removes and re-adds elements, so any descendent elements (with class item) that are iterated over have already been removed from the DOM.
Try the following:
this.find(".item").each(function(index, value) {
$(value).prepend("<span>Test</span>");
});