How to make the data table rows change color as hover over it. The YUI example is here link text
I tried something like
<script>
GRAILSUI.myDataTable.subscribe("rowMouseoverEvent", GRAILSUI.myDataTable.onEventHighlightRow);
GRAILSUI.myDataTable.subscribe("rowMouseoutEvent", GRAILSUI.myDataTable.onEventUnhighlightRow);
GRAILSUI.myDataTable.subscribe("rowClickEvent", GRAILSUI.myDataTable.onEventSelectRow);
</script>
thanks,
ok.. got it working.. for anyone interested, you need to wrap the above statements in
YAHOO.util.Event.onDOMReady(function () { });
so that the table is initialized.
Related
I want to change the style of my Google Maps. I am using jQuery-UI-Map, but I can't figure out how.
Here's the code I am using right now:
$(document).ready(function(){
$("#changeMap").click(function(){
alert('About to change style...');
$('#map_canvas').gmap({styles: mapStyleRed});
});
});
The message box is being fired, but the map is not being updated to my "mapStyleRed".
It's always nice to find the answer a few minutes after posting a question...
$(document).ready(function(){
$("#changeMap").click(function(){
alert('About to change style...');
$('#map_canvas').gmap('get','map').setOptions({styles: mapStyleRed});
});
});
I have been trying to implement the autocomplete and have come across a problem that has stumped me. The first time I call .autocomplete it all works fine and I have no problems. If, however, I call it after I have removed some (unrelated) elements from the DOM and added a new section to the DOM then autocomplete does nothing and reports no errors.
Code:-
$.ajax({
type : 'get',
dataType : 'json',
url : '/finance/occupations',
cache:true,
success:function(data){
occupationList = data;
$('.js-occupation').autocomplete({
source: occupationList,
messages: {
noResults: '',
results: function(){}
},
minLength : 2,
select:function(event, ui){
$('.js-occupationId').val(ui.item.id);
}
});
}
});
The background to this page is that it contains multiple sections that are manipulated as the user moves through them. Hide and show works fine and does not impact on the autocomplete. However, if I do the following:-
var section = $('.js-addressForm:last').clone();
clearForm(section);
$('div.addressDetails').append(section);
$('.js-addressForm:first').remove();
Which gives the user the bility to add multiple addresses on the previous section then the autocomplete stops working.
Any suggestions or pointers on something obvious I am missing?
I have tried to put the initialisation of the autocomplete on an event when the element gets focus and it still does not work.
You have to create the autocomplete after all other underlying objects. If you F12, you will see that the list is "visible", however it is below and hidden by all instances created after it.
If you created a div with inputs (one input being the autocomplete), then you create the automplete then the dialog instances, the autocomplete will never show. If you create the dialog then the autocomplete, no problem. The problem is the z-order
I have faced the same issue. For now to fix this, i'm creating widget on the input once input is in focus. It will help you solve the issue.
You can look for the help on
making sure some event bing only when needed
Sample code will look like this
$( "#target" ).focus(function() {
//I don't care if you manipulated the DOM or not. I'll be cautious. ;)
(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
})();
// use a flag variable if you want
});
This solved my problem. Hope its the solution you were looking f
I'm using draggable with connectToSortable to allow <tr>s from my tables to be dragged and added to other tables.
It works great, but once I drag a <tr> to another table, it cannot be moved again, except for within its own (new) table. Is this an inherent limitation of jQuery UI or did I do something wrong?
Sortable:
$("#sem1").sortable({
receive: function (event, ui) {
ui.item.remove();}
});
$("#sem2").sortable({
receive: function (event, ui) {
ui.item.remove();}
});
Draggable:
$("#sem1 tr").draggable({ connectToSortable: "#sem1, #sem2",helper:"clone"});
$("#sem2 tr").draggable({ connectToSortable: "#sem1, #sem2",helper:"clone"});
I had to use the clone helper and then remove because otherwise the drag would do funky things like overlap rows... open to any suggestions!
Thanks in advance for any help!
P.s, this is a follow-up to a question I had previously gotten answered:
Are dynamically created table rows not targetable by jQuery?
Got it - I just added the exact same code above to be executed on a onmouseup handler attached to my <tr>s
In my application I have a <p:datatable> with rowExpansion column. I have a requirement to open a single row at a time. If anyone tries to expand second row, remaining first row expanded then one message will be generated saying First close the expanded row and then open another row.
How this can be implemented ? Any pointer will be very helpful to me. Thanks
As of 2015, and this question is first in Google search results, I want to add that for PrimeFaces 5.1, there is dataTable attribute rowExpandMode, when set to single - allows only one row to be shown. Example:
<p:dataTable var="line" value="#{bean.lines}" rowExpandMode="single">
It's not exactly what was asked, but I hope that it'll help to others.
You can use (I have tested it in mojarra 2.1.20 and Primefaces 3.5 and it works fine) the following solution which calls a JavaScript function when the row is expanded. When clicking on a second row, and there is another expanded row, it will trigger a click event, which will in turn collapse the previously opened row.
xhtml:
<p:ajax event="rowToggle" onstart="test();"/>
Javascript:
<script type="text/javascript">
function test(){
var i = $('.ui-row-toggler.ui-icon-circle-triangle-s').length;
if(i == 1){return;}
$('.ui-row-toggler.ui-icon-circle-triangle-s').trigger('click');
}
</script>
Check out the datatable.js file in Primefaces here. There is a javascript function called toggleExpansion.
Maybe you can override this function and call the original one when no row is expanded and show a message when another row is already expanded (and not call the original one).
Just an idea...
you can achieve this with the help of this custom method.
give 'togglerClass' this class like
<pou:column styleClass="togglerClass" style="width:16px">
<pou:rowToggler/>
</pou:column>
JavaScript code here;
function prodsToggler() {
$('.togglerClass div').click(function () {
var currentTr = $(this).closest("tr");
var $trs = $('.togglerClass').closest("tr").not(currentTr);
$trs.each(function (index, el) {
var $this = $(el),
$next = $this.next(".ui-expanded-row-content");
$this.removeClass("ui-expanded-row");
$next.remove();
$this.find(".ui-row-toggler").removeClass("ui-icon-circle-triangle-s");
});
});
}
call this method in windows ready.
I'm populating a table with PHP code that talks to my database. The PHP echo's code back into the table as separate rows. Each row has a delete button and I want to make that delete button remove the row from the DOM.
echo "<tr><td data-creator='$creator'>{$comment}<a class='deleteComment'
data-role='button' data-icon='delete' data-iconpos='notext';></a></td></tr>";
// php code ends
<script type='javascript'>
$(".deleteComment").click(function () {
$(this).parent().remove();
});
</script>
This won't work. And when I put a console.log statement into the .deleteComment function, nothing prints to the console when I click on the delete button within a row.
I set up a quick example. Works like a charm for me. I don't see any mistake. A more complete example of your code would be good.
Did you try to log like this? What will it show?
$(".deleteComment").click(function (err) {
console.log(err);
});