My fiddle does not work like it does on my machine locally. I can actually drag the elements. Nevertheless, it can work as a visual for what I am trying to acheive.
I can already drag and drop the units to the divs below the pool but I want to be able to save their location. To be more specific: I want to send an ajax request back to a php file with the location of the units, the container it was dragged into so I can save it my categories table I have in a database so when the page is loaded back it will load the units in their respected categories which I am referring to as containers.
I just do not know how to get the data I want. Here is a rough pseudo code of what I am attempting
var array_for_container1[]; //to hold the units in the first container
var array_for_container2[]; //to do the same
//etc
//loop through each container and get the units inside
//place each unit into the array it needs to be in
//send to php with ajax request
Now I am creating the containers dynamically so I will have to somehow have an array to hold the units for each of them. Basically I'll have to find out how many containers there are so I can get a number of arrays to create and the number of containers to loop through. If anyone has suggestions on how to do that I would greatly appreciate it, however, that isn't the goal of this post. My goal in this post is to know what units are in which containers
Well, with this FIDDLE, I've simplified your code just down to the html.
Then I've written a little script that goes through all of the labels, counts them and puts their html contents into an array.
The number of labels and the array are then printed out into two test divs.
Here is the js:
var counter = 0;
var contentarray = new Array();
$('label').each(function(index){
contentarray[counter] = $(this).html();
counter = counter +1;
});
$('.output1').html(counter);
$('.output2').html(contentarray);
Seems to work.
Related
Im in need of some inspiration on how to solve the following:
I'm making an information monitor using AngularJS.
The monitor should list a maximum of 6 rows of information.
A new row will always be put on top of the others and pushed in from the top. If there are already 6 rows, the last row will be pushed out from the bottom.
A row may disappear from the list at any given time.
Visually, I would very much like it to be sort of scrolling, so when a new row is to be displayed, it will slide in from the top, and all the items will slide a row down.
I'm not sure how to implement the above. I've thought about ng-repeat, but I don't know how to move the items when an element appears or is deleted.
I hope somebody can give me some advice.
For add new item in top list, use a unshift method of javascript. For example:
var list = [0,1,2]
list.unshift(3)
// results [3,0,1,2]
remember, add and remove items in $scope of list for update her.
$scope.list = [1,2,3,4,5,6];
$scope.list.unshift(9); // [9,1,2,3,4,5,6];
$scope.list.pop(1); // [9,2,3,4,5,6];
In HTML, continue using ng-repeat normally
You're going to want to look at ngAnimate. It has built-in support for working with ng-repeat including animations on the addition and deletion of items from a list.
https://docs.angularjs.org/api/ngAnimate
The docs for the integrations with ngRepeat are here: https://docs.angularjs.org/api/ng/directive/ngRepeat#animations
I have an app that has a status screen that is meant to be displayed at all times in various places around the organization. There are probably 50 different users inputting different pieces of data into it, and the status screen updates every 10 seconds with the new information. It's pretty much a tracking board for widgets flowing through a process.
Currently, I do a refresh every 10 seconds which empties all the divs and then loops through the active widgets and places them where every they should go and color codes based on status and stuff like that. However, there's a fraction of a second of a blink from when the javascript empties the divs and when they repopulate, and it's pretty annoying honestly.
My question is how to best update the status screen where there is no blink and things just empty out and pop in as needed.
My thinking at first is there a way to "freeze" the screen for 2 seconds and let it rewrite in the background then unfreeze so there isn't a blink.
OR, which would be MUCH MUCH MUCH cooler, is that some how I only update pieces that get updated within the 10 second intervals. So if a widget goes from staging area to molding, it fades out of staging and fades into molding and none of the other divs are touched. This would be cool because I could add some animations this way. However, I'm not sure how to "efficiently" do this. Maybe I have an "active array" that stores how everything is, and then the AJAX pulls a new array and executes changes where the two doesn't match?
Anyway, I'd like to know if there's a screen freeze, update in the background answer and if there's an like the second one described.
Sorry for the novel =(
This blink or flashing effect is consequence of the asynchronous behavior of ajax.
what is happening is that your divs are emptying, but your new data is not yet ready to fill them.
the solution is to house your divs' emptying and refilling in a callback that is passed to the successful completion of your ajax request.
I think a lot of your problem comes when you clear all the data out before repopulating it.
You could try two methods for fixing this.
Solution 1
Build a string of html when you get your new results back. Do this in a loop, adding to the string variable each time and then replace the html of a "wrapper" div with the new html. You could make it fancy and do a fade in/fade out too.
var htmlString = '';
for(var i=0; i < jsonReturn.length; i++)
{
htmlString += "<p>" + jsonReturn[i].data + "</p>";
}
$('#wrapper-div").empty().append(htmlString);
Solution 2
Give your html id's that are based on an id value from the data you're repopulating. This will be considerably more complicated but it would let you update single items in your display individually or only if they change.
<p id="data-spot-<?php echo $data['id']; ?>">Some display data</p>
Then in your javascript you would do
for(var i=0; i < jsonReturn.length; i++)
{
$('#data-spot"+jsonReturn.id).empty().append("Some html string or data");
}
I am using the "sortable" script (http://farhadi.ir/projects/html5sortable/) to have a sortable list of items on my web application. The sorting part works great. But now, I need to be able to ping back to my server to set the order when things change.
The way to capture that event is:
$('.sortable').sortable().bind('sortupdate', function() {
//Triggered when the user stopped sorting and the DOM position has changed.
});
How do I understand the new position in order to inform my server?
Since the lists are small, I thought of two approaches:
1 - Understand in which position the item was dragged, look at the position right below and send some sort of "insert" update function to my server to insert the new item in that position.
2 - Just go through all the items on the list, capture their IDs in order and send the new ID list to the server and have the server re-build the index based on that list.
I can handle the ruby code but I am a disaster with JS/Jquery.
So, if I go with option 1 - how do I identify the position of the new item and how do I identify which is the item right below it?
If I go with option 2 - how do I iterate on all li items in the exact order they are positioned (their DOM order) so that I can build this list and send it back to the server?
Read the ids of the lis when the update is fired
var ids = $(".sortable").find("li").map( function(txt, elem){
return elem.id
} ).get();
console.log(ids);
I'm working on a printable form in HTML that is designed to pull data from a database application and display it as a wepage configured for printing. I have a number of tables set up to pull in various data from the database and display them in a printable format. The number of printable pages must always be even, as the page must support double sided printing.
I'm having an issue where, when there is a lot of data to display in a field, the tables spill over onto the following page, thus creating 3 pages. My solution to this is to insert a page break at the bottom of the form to maintain the even number of pages. I'm thinking to use Javascript to calculate the size of the tables and add in the break where necessary.
The code I've got at the moment is
<script type="text/javascript">
var compleHeight= document.getElementById("complete").scrollHeight;
var incomHeight=document.getElementById("incomplete").scrollHeight;
var totalHeight= compleHeight+incomHeight;
if(totalHeight>300)
{
var newdiv = document.createElement('div');
newdiv.setAttribute('style', 'page-break-after:always');
}
</script>
I know the calculation and the if are working OK, but the page break isn't being generated. Any ideas?
You didn't append newly created element anywhere.
document.body.appendChild(newdiv);
I have a page with a large table. At the top of the table I've added several filters for eliminating rows in the table. When someone changes a filter, jQuery processes the changes and shows/hides rows in the table that match the filters.
The processing code starts by showing all the rows in the table. Then, it steps through each filter, and wherever necessary, it hides rows in the table. So, each time the user changes a filter, they will see the entire table momentarily and then watch as the rows disappear until the filtering is complete.
Is there a JavaScript or jQuery function for delaying output to the browser until all processing is complete?
You can clone the table, perform whatever operations you need to on the clone, and replace the original table once you're done:
var newTable = $("#yourTable").clone();
//Do whatever you need to do to newTable
$("#yourTable").replaceWith(newTable);
Here's a working example.
Here is a crude example: http://jsfiddle.net/YNZJf/
Basically use jquery to change the html, then once finished set it back to you table.
$tmp = $( $('#table').html()));
$tmp.filter(); // do work;
$('#table').html($tmp.html());
I know you've already accepted an answer, but cloning the table is not how I would choose to implement this. I'd prefer to change the code that modifies the table to not modify it directly. Instead, create an output array that contains the list of modifications you will make to the actual visible table. Then, run your code and have it create this output array (which rows are shown and hidden or any other modifications). Then, when the lengthy part of the code is all done and you have this output array, you simply loop through the final output array and apply the changes. If this last part is all done in one synchronous piece of JS, the viewer will not see the intermediate steps, just the final result.
You should note that there are some characteristics of cloning and operating on it before it's inserted into the document to be aware of:
There could be issues cloning and operating on something with ids assigned to elements in it (since you can only have one object with a given id).
Non-jQuery event handlers may not get copied onto new objects.
You should specify the appropriate parameters to the .clone([withDataAndEvents], [deepWithDataAndEvents]) function
If your table is large, cloning might be slow (lots of duplicate objects and properties to create).
If any of your operations to modify the table assume it's in the document, they might not work on the cloned table until it's inserted.