I am using version 4 and I am trying to have a button to add a blank row.
When I use the example in the documentation. I get and error message:
ReferenceError: $ is not defined
//Add row on "Add Row" button click
$("#add-row").click(function(){
table.addRow({});
});
From what I have read, they all state to add jQuery reference.
How is a button created in version 4, without jQuery.
Thanks
That error suggests that you don't have jQuery included in your project any more.
If you have removed it completely from your site when you have transitioned over to version 4.0 of Tabulator then you will need to use the vanilla JS method for adding an event listener:
var button = document.getElementById("add-row");
button.addEventListener("click", function(){
table.addRow({});
});
Related
Im using the headerContext-Callback on specific columns for the purpose of hiding/showing a set of additional columns. This worked fine in Tabulator 5.1.8 but somehow lost its functionality since I updated to version 5.2. Instead of calling the specified function it just opens the browsers default right-click-popup.
{title: exampleColumnGroup, columns:[
{title:"exampleAdditionalColumn", field:"xxx", visible:false},
{title:"exampleToggleColumn", field:"yyy", headerContext:headerClickfunc},
],},
Additional info: I chose to use a callback on specific columns instead of tableEvents because I couldn't get tableEvents to work in combination with ColumnGroups.
Any thoughts what im doing wrong or maybe overlooked some deprecated functionality?
edit:
i forgot to show an example of the function that should be called on rightclick:
function headerClickfunc(e, column){
e.preventDefault();
switch(column.getField()) {
case "yyy":
table.toggleColumn("xxx");
}};
Problem is, that this function is never called via headerContext:headerClickfunc since i upgraded to Tabulator 5.2
I can manage to get the function called via:
table.on("headerContext", function(e, column){
headerClickfunc(e, column);
});
but in this case the colum.getField() results in "undefined" which is somehow related to the use of a columngroup (tested it whithout the use of columngroups which works fine).
edit2:
Here is a jsfiddle of the not working Code (headerContext does nothing) with Tabulator 5.2.7
Here is a jsfiddle of the working code (headerContext calls the intended function) with Tabulator 5.1.8
The Code on both jsfiddles is exactly the same. Only difference is the version of tabulator.min.js i used as external ressource (via cdn-link in the ressoruces tab on the left).
The headerContext option, is simply a click listener, if you want to prevent the default browser context menu from opening then you need to call the preventDefault function on the event
{title:"exampleToggleColumn", field:"yyy", headerContext:function(e){
e.preventDefault() ///prevent browser context menu from opening
}},
If you were using Tabulators built in Menu System then you should be using the headerContextMenu option, not the headerClick option.
Also the 5.2 release introduced the concept of popups to allow the built in triggering of custom popup elements. Checkout the Popup Documentation for more info on these
I can't seem to "click" on these select boxes using vue-test-utils and Vue 2. I am using mocha + webpack.
I am determining this by seeing that the visible-change event is never triggered as it should on click. Here is how my spec file is like:
...
const wrapper = mount(EntityItem, { propsData });
const selectBox = wrapper.find("el-select");
// I tried these:
selectBox.trigger("click");
selectBox.trigger("click.native");
As last resort if this doesn't work, I'd have to manually change the model attribute to simulate the component change.
----UPDATE----
When I set up a callback for the click event I see something, but I am unable to "select" anything in this select input component.
the component you are using does not use select input element. In order to simulate selecting an option, you would do something like this.
wrapper.findAll('.el-select-dropdown__item').at(1).trigger('click'); // simulates clicking of one of the options
if you want to simulate clicking of select element itself(to show the dropdown). you could do the following.
wrapper.find('.el-select-dropdown').trigger('click');
Whitespace's answer above helped, however also needed to ensure you use
await Vue.nextTick()
before your expect statement. Like so:
wrapper.findAll('.el-select-dropdown__item').at(1).trigger('click');
await Vue.nextTick();
expect(enterResultBtn.is('[disabled]')).toBe(true);
This allows the DOM to update it's cycle, more info here
I'm trying to add nodes dynamically to an Extension Library Accordion control. The whole idea is to build a menu with its options being brought from a view (view entries). I started with a very basic logic which I got from here (thanks to this guy Kraeven X BTW). I declared a variable of type accordion, and then created a new instance of BasicContainerNode, and BasicLeafNode. Everything worked fine, I was able to add the the BasicLeafNode as a child of the BasicContainerNode and set the labels for both.
The problem started when I tried to add the newly created node (and its child) to my accordion control using the addNode(ITreeNode node) method.
The page crashes with an Error 500 (HTTP Web Server: Command Not Handled Exception).
Any Ideas why the addNode(ITreeNode node) method ain't working?? What am I doing wrong???
Here's the SSJS code in my afterPageLoad:
try{
var newContainer:com.ibm.xsp.extlib.tree.impl.BasicContainerTreeNode = new com.ibm.xsp.extlib.tree.impl.BasicContainerTreeNode();
newContainer.setLabel("Dynamic Container Node");
var newNode:com.ibm.xsp.extlib.tree.impl.BasicLeafTreeNode = new com.ibm.xsp.extlib.tree.impl.BasicLeafTreeNode();
newNode.setHref("http://www.google.com");
newNode.setLabel("Dynamic Basic Node");
newContainer.addChild(newNode);
var acc = getComponent("accordion1");
acc.addNode(newContainer);
}catch(e){
print(e.toString);
}
Thanks in advance for any help.
:)
Your code works well.
Look for some other issue on your XPage. Activate "Display XPage runtime error page" or look at the log file on server to find out what causes the error.
I'm writing a Primefaces 5.1 portlet.
It consists in a unique page containing a panelMenu, and I need that it starts with any panel collapsed everytime a user change page (on page loading).
But, if I open a panel, then change page, it will start showing that panel still opened.
I wasn't able to find any option to achieve this goal (e.g. collapsed=true, ignoreCookie=true or something similar).
The only solution I found was the following Javascript code:
PrimeFaces.widgets.myPanelMenu.collapseRootSubmenu(PrimeFaces.widgets.myPanelMenu.headers);
The problem is that this code will collapse any opened panel (so on page loading user is able to see panel menu collapsing animation) but it seems it doesn't store this state in its cookie/localstorage... the result is that on any page loading user can see this animation.
I'm sure it doesn't save its state, because the only way to "solve" the problem is to manually re-open and re-collapse the panels... then, on following page change, these menus start closed (and there is no animation).
I also tried to use PrimeFaces.widgets.sideMenuPanel.saveState() after collapsing, but with no success.
Do you have any idea about?
Thank you...
I found a solution to the problem.
If you read my discussion with Kukeltje (comments on my question), you will find that latest Primefaces' versions will solve the problem.
Otherwise, if you want to avoid upgrade or modify sources, and you need a quick fix based on Javascript only please read the following part of the answer.
It directly works on the component's state using JavaScript.
First of all you need to have a variable reference to your component:
<p:panelMenu model="#{menuBackingBean.menuModel}" widgetVar="sidePanelMenu" />
Then you should add the following JS code on document ready:
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
// following line is commented because it never should be necessary is not necessary (unless unexpected situation I never verified)
//clearSidePanelMenuPreferences();
// 2. Call the "clear preferences" actions on click on two tpe of links: first level are the panel link (used to open/close the menu) and second level are the destination links
// We need to fork also on the first level links to be sure it works after user clicks there then exit from the page in another way
panelMenu.headers.children("a").click(function(){setTimeout(clearSidePanelMenuPreferences, 500)}); // setTimeout is necessary because this event should be fired after preferences are written
panelMenu.headers.siblings().find("a").click(function(){clearSidePanelMenuPreferences();});
The function called to clear preferences are the following:
function clearSidePanelMenuPreferences() {
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState(); // store this information
}
Hope it helps
Please check this block of code
PF('myPanelMenu').headers.each(
function(){
var header = jQuery(this);
PF('myPanelMenu').collapseRootSubmenu(header);
header.removeClass('ui-state-hover');
}
);
I prefer to do this in order to execute this method only once and keep the menu option selected.
$(document).ready(function() {
if(location.pathname == "/cotizador/" || location.pathname == "/cotizador/faces/login.xhtml"){
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState();
}
});
Is there any way to display an extension pages dialog box when my page loads?
Add a <xp:scriptBlock /> with the following client-side code as its value:
XSP.addOnLoad(function(){XSP.openDialog("#{id:dlgMessage}");});
...just be sure to place the component outside any refresh targets, or it will launch the dialog again after every partial refresh event with a target that includes it.
Try adding a dojo.addOnLoad() (in a xp:scriptblock) that displays the dialog using CSJS: XSP.openDialog()
Bruce,
You could use jQuery to 'push' the button on page load.
Try putting this clientside js code in your onClientLoad event
$(document).ready(function(){
$('a.btn').trigger('click');
});
You will have to load jQuery to use this if you don't already have it loaded. You might also be able to do the same thing with dojo.
EDIT: You might have to modify the selector (the tag and class in the parens line 2) above if not using bootstrap. I would give it a unique class so as not to 'push' any other buttons at the same time.