So on the left hand side of this page I will have an html table which already has a function to add rows dynamically. On the right hand side I would like to have a bunch of pictures that can be dragged onto the html table and that will trigger the addRow() function adding a new row into the table containing the id from the picture. Can someone please tell me how to accomplish this?
EDIT: (answer to GrailsDev)
Well I haven't tried it yet because my research wasn't conclusive. I'm sure I want to do something like this:
$("#draggable").draggable(); $("#droppable").droppable({ drop: function() { alert('dropped'); } });
where the draggable would be the div encasing the images, however, I need to know how to get some information from the picture to put it into that drop function.
Okay, so the basic idea is that you'll want a tbody and thead in your html, that way it's possible to make tr tags in the tbody droppable slots while the header will not accept the images being dragged. Then you make the images draggable and the tr tags in the rows droppable elements that accept img.
For this working example in fiddle, I put the ID in row 1, the title tag in as the name, and a copy of the image in as a thumbnail.
Here is the jQuery code to get it running:
jQuery(function($) {
$('#rightcol img').draggable({
helper: 'clone'
});
var dropProps = {
accept: "img",
activeClass: 'active',
hoverClass: 'hover',
drop: function(ev, ui) {
console.log(ui);
var $im = $(ui.draggable);
var $row = $('<tr />').append(
$('<td />').html($im.attr('id'))
).append(
$('<td />').html($im.attr('title'))
).append(
$('<td />').append($im.clone().attr('id', null))
).droppable(dropProps);
$(this).after($row);
}
};
$('#leftcol table tbody tr').droppable(dropProps);
});
Related
Currently I'm working with exporting reports using Aspose Words in Java. I'm populating table with dynamic data but my main problem is when data reaches next page there is no header in exported docs. How can I get header for all pages in the exported file. Any suggestions will be appreciated.
We can solve this issue in JAVA in the following way:
1.Load the document
Document doc = new Document(getMyDir() + "Table.SimpleTable.doc");
2.Get the first table
Table table = doc.getChild(NodeType.TABLE, 0, true); //i.e. second parenthesis as index of table in doc file
3. Get the rows which is used for heading of table
Row rows = (Row) table.getRows().get(0);//we can set multiple rows as heading by passing it's index
4. set the rows as HeadingFormat = true
rows.getRowFormat().setHeadingFormat(true);
Select the header portion (row/rows) to be repeated in the template.
Right click it. Go to table properties and select row tab where there is a second option as "Repeat as header row at the top of each page".
I am trying to align a column in my cell table to the right. Therefore I use the "setHorizontalAlignment" of my column object. The resulting cell is actually rendered with the "align=right", but it is not aligned to the right because the cell contains another div that fills the complete cell.
Is this a bug in GWT or am I doing it wrong?
TextColumn<String> myColumn = new TextColumn<String>() {
#Override
public String getValue(String myObj) {
return myObj;
}
};
myColumn.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
myCellTable.addColumn(myColumn, "anyColumnName");
I know I can also align it right via CSS, but I hope, I can get this approach working because it seems to be the cleaner solution.
You can do it using css and Column#setCellStyleNames().
Sample code:
myColumn.setCellStyleNames("rightAlign");
css:
.rightAlign{
text-align: right;
}
Note: change css as per your requirement
I have the same code, and it renders the same way - with a div element that takes 100% of the width. And the text inside this cell is displayed aligned to the right - as it should. So this is not a GWT bug.
There is another style in your CSS that interferes here. Most likely, you have something like this in your CSS:
td {
text-align: left;
}
Alright, so I'm creating a script to avoid activating a link in a parent div. I've added an image of the website to give you an idea of what it looks like and to make it easier for me to explain. The white tabs are controlled by Ajax and all of them are loaded when the Orders/Subscriptions page is loaded.
All the rows in the table are clickable, and the blue cogwheel shows a dropdown when you hover over it. This dropdown contains several links that need the javascript/jquery code to not activate the row link instead. The problem is that when you switch tabs, the js code won't run unless you reload the page (the active tab stays when reloaded), but the users of the website shouldn't have to reload the page every time they switch between the tabs.
I have absolutely no idea why the .js file only works on the active tab. Everything is written in Wicket/Java using a lot of Ajax events for this page.
JavaScript:
$(document).ready( function () {
$('.dropdown-menu > li > a').on('click', function(event) {
event.stopPropagation();
alert('Propagination Stopped');
});
EDIT:
Alright, so I now know it works if I add
location.reload();
when the tabs are clicked, but I kinda want to avoid this since that adds unnecessary loading time.
I figured out what the problem was. Since I use Ajax for the tabs I had to add
$(document).ajaxComplete(function { myFunction });
and put the onClick in there. That way it would load properly every time I switched tabs.
The invisible tables in the inactive tabs had display: none; which mean when they are set to display: visible; it isn't part of the DOM. So the script won't run unless page is reloaded.
Don't like answering my own question, but felt like the info should be shared.
Thanks for the help anyways guys!
You haven't shown how your script elements are defined and added to the DOM, so it's hard to be specific.
Once a script element has been added to the DOM (directly, or via markup), it is run once. If you want any functions defined by that script to be run again, you have to run them. So in your tab-switching code, add code to call a function if you want it to be run for that tab.
You also haven't shown how you're loading the tab content, or whether the tab content defines script tags. It's best not to have the tab content contain any more script than necessary. Instead, have a main script file loaded with the page that defines the main functions, and then at most have a single script in the dynamically-loaded tab content that executes a single function call to that already-loaded code. If you're loading via jQuery's load, it'll call the scripts for you unless you use a fragment identifier with load. (If you use a fragment identifier with load, it disregards scripts in the content entirely.)
I think this will help you!
the html code example
<ul id="ajaxContainer">
<li>the default content in your app</li>
</ul>
<nav id="pagination">
<ul>
<li><a class="active" href="/ajaxpath1">1</a></li>
<li>2</li>
<li>2</li>
</ul>
</nav>
<script src="jquerypath/jquery.js"></script>
<script src="appjspath/app.js"></script>
Code in your app.js as bellow
$(function() {
var $ajaxContainer = $('#ajaxContainer'),
CLSA = "active",
DOT = ".",
$pagination = $('#pagination'),
hasElMakeShow = function($el) {
//just make elment show hide
$el.show().siblings().hide();
},
appendNewEl = function($el) {
//new data requested should be append to container element
$ajaxContainer.append($el);
hasElMakeShow($el);
},
initBindEl = function(){
//init bind first active pagination el with its data elment
var $li = $ajaxContainer.find('>li'),
$active = $pagination.find(DOT + CLSA);
$active.data('el', $li);
},
switchNavA = function($el) {
//do some pagination switch active class work
$el.addClass(CLSA).closest('li').siblings().removeClass(CLSA);
};
initBindEl();//first bind current pagination
$pagination.delegate('>li a', 'click.page', function(e){
e.preventDefault();//prevent default jump
var $me = $(this),
isActive = $me.is(DOT + CLSA),
$targetEl = $me.data('el');
if(!isActive) {
if($targetEl.length) {
hasElMakeShow($targetEl);
} else {
var url = $me.attr('href');
$.get(url, function(data){
var $respondEl = $(data);
$me.data('el', $respondEl);
appendNewEl($respondEl);
switchNavA($me);
});
}
}
});
});
I know its a basic question and please bear with this.
I'm new to struts frame work and I'm creating a sample application using struts 1.2. I've inserted few values into the database using form beans. And i'm displaying all the database records in the jsp page using function. and i also placed the radio button for each row..
Now my question is, i want to select a particular data from the records displayed in the jsp page by clicking the radio button and i need to store the selected records into the another table.
Give me some suggestion regarding the condition specified above...
Thanks in advance..
Once you set those unique values in radio button, you can get the values for your purpose. Like using jquery,
var selRadio = $('input:radio[name=cname]:checked').val();
You can find out fiddle explains how to get checked value.
Use some ajax for send that value to server (servlet) and add the values to new table without refresh entire page.
$.ajax({
url : "ur_servlet_url" + selRadio,
type : "POST",
async : false,
success : function(data) {
alert("success");
}
});
Let me know if this helps.
I m working on a Spring MVC java web application . The app contains a JSP page , on it I have a table in which I display data from the DB. The data is diplayed in text inputs which belong to the class .editable
I implemented a script that does the following :
-select the text inputs from the table ,
-create a span with the data from the text inputs
-hides the text input
function editableInput() {
$('.editable').each(function() {
var input = $(this);
input.before("<span class='spanEditable'>" + input.val() + "</span>");
input.hide();
});
}
I later use a script to display the text input for a row , when the row is selected from a radio input.
All of this for making a good looking table that permits CRUD operations , on a row , when the row is selected , when no row is selected , it displays all the table content like plain text , not using a text input.
The problem i am facing : When the page is loading it displays all the table rows like it is initially made , with all the data in text inputs , after the script is being completed all the data is displayed in the spans. This looks really bad , until all the stuff is loaded.
How can i use a loading gif , until the function editableInput() is completed ?
If i would use a AJAX call i would know how to add the loading gif , but this is how i`m calling the function :
$(document).ready(function() {
editableInput(); )};
You may experiment with jQuery BlockUI Plugin (v2)
Well you can try this one, though rather crude but will work. On loading the page wrap your table into another div using:
$("table#table1").wrap("<div id='dvWrapp' style='background-color:#000;'/>");
then after completing the editableInput call just unwrap it:
$("table#table1").unwrap();
You can set style for the wrapper div to show loading image or some message also.
Please try this example: http://jsfiddle.net/amantur/FkjkR/