Below is the stuff which is included in field descirption so, i could have summary row appear.
<script type="text/javascript">
var table = AJS.$('<table style="margin-left: 130px;">').append(
AJS.$('<tr>').append(
"<td style='border: 0px; width: 90px; margin-left: 1px; font-weight: bold; background-color: rgb(204, 255, 255);'><div id='customfield_summary_2:input1'>0</div></td>"
).append(
"<td style='border: 0px; width: 90px; margin-left: 1px; font-weight: bold; background-color: rgb(204, 255, 255);'><div id='customfield_summary_2:input2'>0</div></td>"
)
);
if(AJS.$("#edit-issue-dialog").length)
{
AJS.$("#customfield_11278\\:input1").parent().parent().parent().parent().parent().before(table);
}
else
{
AJS.$("#customfield_11278\\:input1").parent().parent().parent().parent().before(table);
}
</script>
<script type="text/javascript">
AJS.$("#customfield_summary_2\\:input1").text(
"$" + (
parseInt(AJS.$
("#customfield_11278\\:input1").val()
) +
parseInt(AJS.$
("#customfield_11279\\:input1").val()
) +
parseInt(AJS.$
("#customfield_11280\\:input1").val()
)+
parseInt(AJS.$
("#customfield_11281\\:input1").val()
)+
parseInt(AJS.$
("#customfield_11282\\:input1").val()
)+
parseInt(AJS.$
("#customfield_11283\\:input1").val()
)+
parseInt(AJS.$
("#customfield_11284\\:input1").val()
)+
parseInt(AJS.$
("#customfield_11285\\:input1").val()
)
).toString()
);
</script>
couple of issues:
1. get duplicate summary row (field that added through jquery) when close the edit screen. How it should be resolve.
2. This summary custom field which appears on view screen and edit screen. Now, In View screen, when i do inline edit for other field and save then this summary custom field (appear through client side javascript) gets disappear and need to refresh screen then after it gets appear and value gets updated.
please let me know on above queries.
Thank You
Found solution as follow #Kuf in comment How to develop custom field (plugin) having multiple input fields.
remove duplicated - have every time - remove table before appending and kept all in setInterval which resolve the issue.
setInterval(function()
if(AJS.$("#edit-issue-dialog").length)
{
AJS.$("#customfield_11278\:input1").parent().parent().parent().parent().parent().before(table);
}
else
{
AJS.$("#customfield_11278\:input1").parent().parent().parent().parent().before(table);
},2000)
refresh inline editing:
ave used setInterval as below:
setInterval(function() {
AJS.$("#customfield_summary_2\:input1").text(
"$" + (
parseInt(AJS.$
("#customfield_11278\:input1").val()
) +
parseInt(AJS.$
("#customfield_11279\:input1").val()
) +
parseInt(AJS.$
("#customfield_11280\:input1").val()
)+
parseInt(AJS.$
("#customfield_11281\:input1").val()
)+
parseInt(AJS.$
("#customfield_11282\:input1").val()
)+
parseInt(AJS.$
("#customfield_11283\:input1").val()
)+
parseInt(AJS.$
("#customfield_11284\:input1").val()
)+
parseInt(AJS.$
("#customfield_11285\:input1").val()
)
).toString()
);, 2000);
Thanks
Related
I followed this stack thread to capture a double-click event on my grid. Interestingly though, my grid no longer highlights rows whose check-box's have been selected, as outlined in the gif below
Before I added the row template, everything was fine and worked correctly, as seen in the gif below
Here is the row template code:
Controller:
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>' +
'</div>';
}
As part of $scope.gridOptions:
, rowTemplate: rowTemplate()
Inside $scope.gridOptions
$scope.rowDblClick = function(row) {
console.log('double click event');
var thisRow = gridApi.selection.getSelectedRows() //gets the clicked row object
$log.log(thisRow);
$('.item').on('click', function(){
//if user clicks on grid tab, should go to grid view else go to patient view
if ($(this).hasClass('not')){
console.log('item has .not')
$state.go('list.patient.patient-information');
} else {
console.log('item has .grid')
$state.go('list.grid');
}
//
$('.item').css('cssText', 'border-radius: 0px !important; background-color: #4B6A89; font-family: Roboto; font-size: 14px; color: white; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;')
$(this).closest('.item').css('cssText', 'border-radius: 0px !important; color: #4B6A89; background-color: white; font-family: Roboto; font-size: 14px; color: #4B6A89; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase;');
});
//after a 2click, deselect the row, so a user can edit another cell
$scope.gridApi.selection.clearSelectedRows();
};
UPDATE: when I remove the <div ng-dblclick="grid.appScope.rowDblClick(row)" > from the template, the line highlight comes back (although I lose the double click functionality
Problem solved after much trial and error!
The problem started when I added the ng-dblclick option for grid rows with the suggested syntax:
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>' +
'</div>';
}
I simply removed the div that the ng-dblclick was in, and moved it into the main row template div so it now looks like this:
function rowTemplate() {
return ' <div ng-dblclick="grid.appScope.rowDblClick(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>';
}
I faced the same issue before.
Apparently, when we add the outside div for double-click, it messes up the CSS for highlighting. So in your example, on selecting the checkbox, row gets selected, but the highlighting doesn't happen.
Solution for this is:
Row Template:
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader}" ui-grid-cell></div>' +
'</div>';
}
And add CSS for that specific grid, adding Grid Id or style:
#gridStyle .ui-grid-row.ui-grid-row-selected > [ui-grid-row] .ui-grid-cell {
background-color: #c9dde1;
}
My plunker working sample
function rowTemplate() {
return '<div ng-dblclick="grid.appScope.rowDblClick(row)" >' +
' <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>' +
'</div>';
}
css:
/* --- ui-grid ------- row hover highlight ----- */
.ui-grid-row:hover .ui-grid-cell {
background-color: #ff8476;
}
/* ==== both works ===== */
/*
.ui-grid-row:nth-child(odd):hover .ui-grid-cell{background:red}
.ui-grid-row:nth-child(even):hover .ui-grid-cell{background:red}
*/
/* --- End ----- ui-grid ------- row hover highlight ----- */
Hi I am trying to get all this content in a string variable which I then used to create a text file
The problem is that it always fails when you use this code:
html: = '
<title> test </ title>
<STYLE type=text/css>
body, a: link {
background-color: black;
color: red;
Courier New;
cursor: crosshair;
font-size: small;
}
input, table.outset, table.bord, table, textarea, select, fieldset, td, tr {
font: normal 10px Verdana, Arial, Helvetica,
sans-serif;
background-color: black;
color: red;
border: 1px solid # 00FF0red0;
border-color: red
}
a: link, a: visited, a: active {
color: red;
font: normal 10px Verdana, Arial, Helvetica,
sans-serif;
text-decoration: none;
}
</ style>
';
What I have to do to make it work ?
You have to properly concatenate the string, using the + string concatenation operator.
html: = '<title> test </ title>' + sLineBreak +
'<STYLE type=text/css>' + sLineBreak + sLineBreak +
'body, a: link {' + sLineBreak +
'background-color: black;' + sLineBreak +
'color: red;' + sLineBreak +
'Courier New;' + sLineBreak +
'cursor: crosshair;' + sLineBreak +
'font-size: small;' + sLineBreak +
'}'; // Keep going with the rest of your text
Or, simply use a TStringList:
var
html: TStringList;
begin
html := TStringList.Create;
try
html.Add('<title> test </ title>');
html.Add('');
html.Add('<STYLE type=text/css>');
html.Add('body, a: link {');
html.Add('background-color: black');
html.Add('color: red;');
html.Add('Courier New;');
html.Add('cursor: crosshair;');
html.Add('font-size: small;');
html.Add('}'; // Keep going with the rest of your text
html.SaveToFile('YourFileName.html');
finally
html.Free;
end;
end;
The latest version of the tablesorter pager plugin seems to be missing page number support and # of items per page. With the older version (v2.0), it was possible to do so. The reason for asking this is because we need to take advantage of the ajax fetching of the rows, introduced in the newer versions (since fetching all the data at once is causing a performance hit) while keeping the look and feel of the table same as before. However, a lot has changed from v2.0 to v2.10. I also couldn't find any examples of modifying the updatePageDisplay function that would help in achieving this.
The image below shows what I'm trying to accomplish:
Thanks in advance.
The latest version is much more flexible than the original. So, if we start with this pager HTML (page size numbers reduced to match this demo; also notice the second pager block at the top only showing the visible and total record numbers)
<div class="pager">
<span class="left">
# per page:
5 |
10 |
20 |
50
</span>
<span class="right">
<span class="prev">
<img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" /> Prev
</span>
<span class="pagecount"></span>
<span class="next">Next
<img src="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" />
</span>
</span>
this css
.left { float: left; }
.right {
float: right;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
}
.pager .prev, .pager .next, .pagecount { cursor: pointer; }
.pager a {
color: black;
}
.pager a.current {
text-decoration: none;
color: #0080ff;
}
and this script
var $table = $('table')
.on('pagerInitialized pagerComplete', function (e, c) {
var i, pages = '', t = [],
cur = c.page + 1,
start = cur > 1 ? (c.totalPages - cur < 3 ? -3 + (c.totalPages - cur) : -1) : 0,
end = cur < 3 ? 5 - cur : 2;
for (i = start; i < end; i++) {
if (cur + i >= 1 && cur + i < c.totalPages) { t.push( cur + i ); }
}
// make sure first and last page are included in the pagination
if ($.inArray(1, t) === -1) { t.push(1); }
if ($.inArray(c.totalPages, t) === -1) { t.push(c.totalPages); }
// sort the list
t = t.sort(function(a, b){ return a - b; });
// make links and spacers
$.each(t, function(j, v){
pages += '' + v + '';
pages += j < t.length - 1 && ( t[j+1] - 1 !== v ) ? ' ... ' : ( j >= t.length - 1 ? '' : ' | ' );
});
$('.pagecount').html(pages);
})
.tablesorter({
theme: 'blackice',
widgets: ['zebra', 'columns']
})
.tablesorterPager({
// target the pager markup - see the HTML block below
container: $(".pager"),
size: 5,
output: 'showing: {startRow} to {endRow} ({totalRows})'
});
// set up pager controls
$('.pager .left a').on('click', function () {
$(this)
.addClass('current')
.siblings()
.removeClass('current');
$table.trigger('pageSize', $(this).html());
return false;
});
$('.pager .right .pagecount').on('click', 'a', function(){
$(this)
.addClass('current')
.siblings()
.removeClass('current');
$table.trigger('pageSet', $(this).html());
return false;
});
please see the live demo and download the customized code.Using this extended version you can add multiple tables in one page.
http://www.pearlbells.co.uk/table-pagination/
jQuery Mobile offers a simple loader, but it does not offer a way to disable elements on the page while the loading process is occurring.
my wishlist:
1 - if the $.mobile.loading method offered a overlay-theme option (like the jqm popup)
2 - if the $.mobile.loading method accepted a target element to put the spinner into, such as a <div> set to fullscreen
$.mobile.loading( 'show', { text : "loading" ,
textVisible : true ,
theme : 'b' ,
html : ""
}) ;
However, I want to avoid the solution where I have to make my own <div> and toggle it separately but in synch with the $.mobile.loading( 'show/hide' , ... ) calls such as this SO suggests.
After playing with the ui-loader class in Firebug for a while, I finally gave up that approach and decided to do the fullscreen-div approach:
//-------------------------------------------------
var gvn_loader_bg_class = "jqm_loader_bg" ;
//--------------------------------------------------
function gf_jqm_loader_setup()
{
var lvo_loader = jQuery( ".ui-loader" ) ;
var lvi_loader_z = lvo_loader.css('z-index') ;
var lvs_style = "" ;
lvs_style += "position : fixed ;" ;
lvs_style += "left : 0% ;" ;
lvs_style += "top : 0% ;" ;
lvs_style += "width : 100% ;" ;
lvs_style += "height : 100% ;" ;
lvs_style += "background-color : white ;" ;
lvs_style += "opacity : .3 ;" ;
lvs_style += "display : none ;" ;
lvs_style += "z-index : " + ( lvi_loader_z - 1 ) + " ;" ;
lvo_loader.before( "<div class='" + gvn_loader_bg_class + "' style='" + lvs_style + "'></div>" ) ;
}
//-------------------------------------------------
function gf_toggle_jqm_loader( argb )
{ if( argb )
{ jQuery.mobile.loading( 'show') ;
jQuery( "." + gvn_loader_bg_class ).css( 'display' , 'block' ) ;
}
else
{ jQuery.mobile.loading( 'hide') ;
jQuery( "." + gvn_loader_bg_class ).css( 'display' , 'none' ) ;
}
}
This is my changes for jquery mobile css (Version 1.4.2) so that the loading div is filled fullscreen
.ui-loader .ui-icon-loading {
background-color: #000;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -1.375em;
margin-top: -1.375em;
width: 2.75em;
height: 2.75em;
padding: .0625em;
-webkit-border-radius: 2.25em;
border-radius: 2.25em;
}
.ui-loader-default {
background: none;
filter: Alpha(Opacity=18);
opacity: .18;
}
.ui-loader {
display: none;
z-index: 9999999;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
}
here is my code (html)
<div id="navig" style="font-family: arial; font-size: 12px; font-weight: normal;">
<div id="navfirst">First</div>
<div id="navnum">1</div>
<div id="navnum">2</div>
<div id="navnum">3</div>
<div id="navnum">4</div>
<div id="navnum">5</div>
<div id="navlast">Last</div>
$( document ).ready(function( ) {
$('div #navnum').click( function ( ) {
var divtext = $(this).text( ) ;
$( this ).css('background-color', '#f99');
$( this ).prevAll( ).css('background-color', '');
$( this ).nextAll( ).css('background-color', '');
$('#pgnum').html( '<p>clicked page number ' + divtext + '</p>' ).fadeIn( 100 );
});
});
works fine on firefox and chrome, but not in IE 8, how to make it work in IE
You shouldn't be declaring the same id on multiple elements in a HTML page. id is supposed to be unique to the document. Instead, try switching your divs that are using navnum for an id to use them as a class. class names can be shared throughout your page. For example:
<div class="navnum">1</div>
Then for your click handler:
$('div.navnum').click( function ( )
I made a jsFiddle you can test in IE.