Fancybox2 api open() ignores options? - fancybox-2

The fancybox2 docs for the API call open() says
$.fancybox.open( [group], [options] )
However the docs go into detail about [ group ] and say nothing about the format expected for the [ options ]
Furthermore the options seem to be ignored.
When I use
$.fancybox.open([{ href : '#popup_panel' }], [ { 'title' : 'Title Two', 'minWidth' : 500 }] );
or
$.fancybox.open([{ href : '#popup_panel' }], [ { title : 'Title Two', minWidth : 500 }] );
Fancybox seems to ignore the options... it opens, but there is no title and the minWidth is ignored.
I'm using v2.1.5 if the fancybox javascript.

The fancybox documentation is wrong; options go inside the [group] apparently:
$.fancybox.open([{ href : '#popup_panel', title : 'Title Two', minWidth : 500 }], [] );

Related

How to visual/text toolbar button in ckeditor5

ClassicEditor.create( document.querySelector( '.editor' ), {
// extraPlugins: [ AnnotationsUIs ],
// plugins: [ Mention,],
removePlugins:['Title'],
toolbar: {
items: [
"alignment:left", "alignment:right", "alignment:center", "alignment:justify", "alignment", "undo", "redo", "blockQuote", "bold", "link", "ckfinder", "selectAll", "heading", "horizontalLine", "htmlEmbed", "indent", "outdent", "italic", "numberedList", "bulletedList", "mediaEmbed", "pageBreak", "specialCharacters", "restrictedEditingException", "strikethrough", "subscript", "superscript", "insertTable", "tableColumn", "tableRow", "mergeTableCells", "tableCellProperties", "tableProperties", "textPartLanguage", "todoList", "underline"
],
shouldNotGroupWhenFull: true,
},
mention: {
feeds: [
{
marker: '#',
feed: [ '#test' ],
// itemRenderer: customItemRenderer
},
],
},
language: 'en',
} )
.then( editor => {
window.editor = editor;
} )
.catch( error => {
console.error( error );
} );
});
Which toolbar or plugin is missing?
I have added almost plugging and toolbar items.
CKEditor 5 doesn't have any documentation about the text/visual button. I want to add a toggle button which show me HTML view and text in editor.
It looks like this feature was added in May 2021, a couple of weeks after your question!
There is a SourceEditing feature which adds a 'Source' toggle button - https://ckeditor.com/docs/ckeditor5/latest/features/source-editing.html (scroll down for a demo and how to install it).
But it is considered experimental currently, has some limitations of which editors it works with, and note that some HTML will be ignored (e.g. for HTML features you don't have a plugin loaded for).

Datatable : Ordering on two columns and then show only first 10 rows

I am using DataTables 1.10.11 version.
I have a requirement. I have almost 1000 data list. From that list I need to order on two columns by default and then need to show only first 10 rows.
Please help me to achieve this requirement.
You can try like this:
$(document).ready(function() {
$('#example').dataTable( {
"bPaginate": true,
"sPaginationType": 'full_numbers',
"iDisplayLength": 10,
columnDefs: [ {
targets: [ 0 ],
orderData: [ 0, 1 ]
}]
} );
} );
Finally I am able to implement this requirement.
$('#id').DataTable({
dom : 't',
"processing" : true,
"deferRender" : true,
"data" : data,
"columns" : getColConfg(),
"language" : {
"emptyTable" : "No data available"
},
"pageLength" : 10
"order" : [ [ 2, "desc" ], [1, "desc"] ]
});
dom : 't',
Adding dom as 't' only served my requirement.

Setting custom colors when fetching events data using FullCalendar does not seem to work

I am using the FullCalendar JQuery plugin and fetching the events data via a simple array of events. That works fine, however, I can't seem to set custom colors for those events. I've followed the official documentation. What am I doing wrong? I am trying to set the 'color' and 'textColor' options to be yellow and black like so:
$('#calendar').fullCalendar(
{
events: [
{
title: 'Event1',
start: '2015-05-04'
},
{
title: 'Event2',
start: '2015-05-05'
}
],
color: 'yellow', // an option!
textColor: 'black' // an option!
}
)
But, when you visit the demo link here, you can see that it does not take effect. Can someone point me in the right direction? The official documentation about doing this method is here.
I tried locally, its working fine...
$('#calendar').fullCalendar(
{
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventSources: [
{
events: [ // put the array in the `events` property
{
title : 'event1',
start : '2015-05-01'
},
{
title : 'event2',
start : '2015-05-05',
end : '2015-05-07'
},
{
title : 'event3',
start : '2015-05-09T12:30:00',
}
],
color: 'yellow', // an option!
textColor: 'black' // an option!
}
// any other event sources...
],
});
http://fullcalendar.io/docs/usage/ states:
The above code should be in a tag in the head of your page
Have you tried moving the <script /> code to the head of your page? Currently you have it below your calendar.

remove upload button from toolbar

I have integrated ckeditor with ckfinder. I want to remove the upload button from tool bar. When u click images/links from ckeditor, a file browser opens and then click "browse server" button. It opens another browser when you can browse the folders. On the top there is a tool bar section where we can find "Settings, Help and upload" buttons. I have to remove that upload button. i am using javascript. Please help
For removing ckfinder upload button then you need to add some code in ckfinder config.js
CKFinder.config.toolbar_Full = [['Refresh', 'Settings', 'Maximize']];
hope it is works
Set on main config.js (ckfinder 3 root folder):
config.removeModules = 'UploadFileButton';
Use this way of customizing toolbars
editor_edit = CKEDITOR.replace( 'e_notification', {
uiColor: '#888888',
height: '250px',
filebrowserBrowseUrl : 'http://localhost/SUServer1/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'http://localhost/SUServer1/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : 'http://localhost/SUServer1/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : 'http://localhost/SUServer1/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'http://localhost/SUServer1/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'http://localhost/SUServer1/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash',
filebrowserWindowWidth : '1000',
filebrowserWindowHeight : '700',
toolbar :
[
{ name: 'document', items : [ 'Source','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv',
'-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] }
]
});

How to send data from jsp page to controller using jqgrid in spring

var pid = $('#byId').val();
jQuery("#patient").jqGrid({
mtype: 'GET',
url : "totalPatientList.html",
postData :{pid:pid},
datatype : "json",
colNames : [ 'Patient Id', 'Name', 'BirthDate', 'Address','City','Mobile' ],
colModel : [ {
name : 'patientId',
index : 'patientId',
width : 55
}, {
name : 'name',
index : 'name',
width : 200
}, {
name : 'birthdate',
index : 'birthdate',
width : 100,
editable : true
}, {
name : 'address',
index : 'address',
editable : true,
width : 80
}, {
name : 'city',
index : 'city',
editable : true,
width : 80
}, {
name : 'mobile',
index : 'mobile',
editable : true,
width : 80
} ],
rowNum : 10,
rowList : [ 5, 10, 30 ],
pager : '#pager',
sortname : 'id',
viewrecords : true,
sortorder : "desc",
caption : "Search Patient's List",
width : 800,
cellEdit : true,
});
I have a code like above.
I want to send pid from this JSP page to controller.I am getting pid , but when I reload my web page. I want it without reloading the page when i click the button.
How can I do that?
plz plz help me....
You should use the "function" style of postData:
url: "totalPatientList.html",
postData: {
pid: function () {
return $('#byId').val();
}
}
In the case the value for the pid parameter will be new evaluated on every request to the server. See the answer for more details. In the way you can send multiple parameters to the server by including multiple methods in postData object.

Resources