in an Xpage , I'm looking for a message box like p.notify that gives a personalised message that fade's in and out automatically in my onclick of a button event.
in client side I put : $.pnotify({ pnotify_title: 'Test',pnotify_text: 'personalised message'});
Which works , but how do I put a personalised text in it from for example a viewScope
in server side I put : view.postScript("$.pnotify({ pnotify_title: 'Test',pnotify_text: 'personalised message'});"); Which gives an error : Uncaught TypeError: Cannot read property 'top' of undefined
at Function.pnotify (jquery.pnotify.min.js:37)
at demo.xsp:306
So my question : How can I put a personlised message (from for example a viewScope into the client side script , or is there a way to make my server side script to work or is there another way to get the same result ( I don't think there's a way to autoclose xpages dialogs after some time?)
In the a clientside event of any XPages control you can add serverside code, for example:
<xp:button
value="Show message"
id="button1">
<xp:eventHandler
event="onclick"
submit="false">
<xp:this.script><![CDATA[
$.pnotify({
pnotify_title: 'Test',
pnotify_text: '#{javascript:viewScope.yourVar}'
});]]></xp:this.script>
</xp:eventHandler>
</xp:button>
Does that work in your situation?
Related
What do I have:
Laravel 5.5
Laravel Dusk 2.0.14
How can I test (assert) that browser tooltip
was shown, when I'm trying to submit a form without filling required field?
What I've tried:
$browser
->assertSee('Please fill out this field');
But it didn't work.
You can get the message with JavaScript:
$message = $browser->script("return document.querySelector('input[name=foo]').validationMessage")[0];
$this->assertEquals('Please fill out this field.', $message);
Note that the message will always be set as long as the input's value is invalid. This assertion also works before you press the submit button.
I have a dojoFilteringSelect field which I want to put a dojo tootltip for. If the user hovers over the field (or I could put an icon next to the field) I want the contents of a computed field to show up.
Looked around and saw various examples but what I cannot find is how to connect the tool tip to the hover action? I am running this in the Lotus client.
My code is below.
<xe:djFilteringSelect id="djFilteringSelect3"
rendered="true" value="#{document1.loc}" tabIndex="1">
<xe:this.defaultValue><![CDATA[""]]></xe:this.defaultValue>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:getComponent("lookupLocs").getValue();}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onClick" submit="false">
<xe:this.script><![CDATA[XSP.openTooltipDialog("#{id:tooltipDialog1}", "#{id:label1}")]]></xe:this.script>
</xp:eventHandler></xe:djFilteringSelect>
<xe:valuePicker dialogTitle="Locs with Loc Manager"
for="djFilteringSelect1">
<xe:this.dataProvider>
<xe:simpleValuePicker>
<xe:this.valueList><![CDATA[#{javascript:getComponent("lookupLocs2").getValue();}]]></xe:this.valueList>
</xe:simpleValuePicker>
</xe:this.dataProvider>
</xe:valuePicker>
<xe:tooltipDialog id="tooltipDialog1"></xe:tooltipDialog></xp:td>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[XSP.addOnLoad(function(){
XSP.getElementById("#{id:djFilteringSelect1}").focus();
});]]></xp:this.value>
</xp:scriptBlock>
<xp:td style="width:229.0px">
<xp:message id="message1" for="loc"></xp:message>
</xp:td>
</xp:tr>
<xp:tr>
<xp:td>
<xp:label id="label3" value="Work Category" style="font-weight:bold"></xp:label>
</xp:td>
<xp:td>
<xe:djFilteringSelect id="djFilteringSelect2"
rendered="true" value="#{document1.workCategory}" tabIndex="2">
<xe:this.defaultValue><![CDATA[""]]></xe:this.defaultValue>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:var db = new Array(#DbName()[0], 'TSCTT.nsf');
#DbColumn(db, "workCategoryView", 1)
}]]></xp:this.value>
</xp:selectItems>
</xe:djFilteringSelect>
You are very close to the solution you are looking for.
It is not really useful to set the hover tooltip function on dojoFilteringSelect field itself as it is then impossible to select a value there. Instead, like you suggested already, let the tooltip work on an icon or the field's label.
This is an example for a tooltip dialog appearing on hovering over label:
<xp:label value="Label" id="label1">
<xp:eventHandler event="onmouseover" submit="false">
<xp:this.script><![CDATA[
XSP.openTooltipDialog("#{id:tooltipDialog1}", "#{id:label1}")
]]></xp:this.script>
</xp:eventHandler>
<xp:eventHandler event="onmouseout" submit="false">
<xp:this.script><![CDATA[
XSP.closeTooltipDialog("#{id:tooltipDialog1}")
]]></xp:this.script>
</xp:eventHandler>
</xp:label>
<xe:djFilteringSelect id="djFilteringSelect1" rendered="true"
value="#{document1.loc}">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
["abc","def","xyz"]
}]]></xp:this.value>
</xp:selectItems>
</xe:djFilteringSelect>
<xe:tooltipDialog id="tooltipDialog1" title="This is the dialog title">
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:
"This is the computed value"
}]]></xp:this.value>
</xp:text>
</xe:tooltipDialog>
Label's event "onmouseover" (not "onMouseOver"!) opens the tooltip dialog box. This event works only if you don't use the parameter for="djFilteringSelect1" ( I don't know why).
I added an event "onmouseout" which closes the tooltip dialog when mouse no longer hovering over label.
Instead of event "onmouseout", you can add same CSJS code to a close button inside tooltip dialog box. This is useful if you have things on tooltip dialog box you want to click on like links or editable fields.
If you use the tooltip and not the tooltipdialog than just use the for property and it will happen automatically, no code needed. Very simple.
In your code above you are using the onclick event, that will not work onMouseOver (which would be the event you need?)
Howard
I'm trying to do a partial update on an Edit Box ("Room") on the server onChange event of a dojo filteringselect control ("From_Name") on an xpage.
So, I use a simple Modify Field action with the computed value:
nm = getComponent("From_Name").value;
#DbLookup("names.nsf", "Full Name", nm, 10);
The onChange event also does a Partial Update to the "Room" element.
The problem is that there are a couple of more filteringselect controls on the form, and as I try to do the partial update to do the lookup into the address book to get the person's room number, it gives me the yellow exclamation point error for the other filteringselects on the xpage. If all the other filteringselect controls on the page are filled out first, then the partial update works. How do I get around this and update the Room field when, the From_Name is changed?
The code for my control:
<xe:djFilteringSelect id="From_Name" value="#{document1.From_Name}"
readOnly="# {javascript:!document1.isNewNote()}">
<xe:this.defaultValue><![CDATA[#{javascript:
#Name("[CN]", #UserName())}]]>
</xe:this.defaultValue>
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:
db = new Array("SERVER", "names.nsf");
#Unique(#DbColumn(db, "Full Name", 1))
}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler event="onChange" submit="true"
refreshMode="partial" refreshId="Room">
<xe:this.action>
<xp:modifyField name="Room">
<xp:this.value><![CDATA[#{javascript:
nm = getComponent("From_Name").value;
#DbLookup("names.nsf", "Full Name", nm, 10);
}]]></xp:this.value>
</xp:modifyField>
</xe:this.action>
</xp:eventHandler>
</xe:djFilteringSelect>
Add a Dojo attribute required with value false to the other djFilteringSelect controls:
<xe:this.dojoAttributes>
<xp:dojoAttribute
name="required"
value="false">
</xp:dojoAttribute>
</xe:this.dojoAttributes>
With this additional client side attribute you won't get the yellow exclamation point errors anymore.
In a Windows store app using Javascript, I have a listview defined in the html.
<div id ="menuListView" data-win-control="WinJS.UI.ListView" data-win-options="{
itemDataSource: viewModel.items.dataSource,
itemTemplate: menuItemTemplate,
layout: {type: WinJS.UI.GridLayout}}"></div>
I could define a click event handler in Javascript something like this:
menuListView.addEventListener("selectionchanged", clickEventHandler, false);
But since, I'm trying to use the MVVM pattern, I would like to put this piece of code in the html view and let a viewmodel handle the click event. Would it be possible?
For full NVVM functionality in your WinJS app I would recommend using a framework like http://knockoutjs.com
You can probably try something like this if you are keep to declare an event handler in HTML view :
"<button id="button1" onselectionchange="clickEventHandler(event)">An HTML button</button>"
Hope this helps :)
I want to show a popup dialog containing a dijit.ComboBox with data populated using ajax request or data store.
The problem I am facing is that the combobox is always disabled.
My selected code is:
<div dojoType="dojo.data.ItemFileReadStore" id="osTypeStore" data-dojo-id="osTypeStore" url="/AjaxPopulateOS.json">
</div>
<select id="osType" data-dojo-type="dijit.form.ComboBox"
data-dojo-props="
id:'osType',
store: osTypeStore,
placeHolder: 'Select a schdule type'" >
</select>
Any ideas
I believe it is because there are no items in it? Is it grayed out totally - and have the Disabled class parameter set?
Check that dijit.byId('osTypeStore') returns a store and that it has items in it.
If this is the case, change your code to
store: 'osTypeStore'
Note the quotes. This forces parser to evaluate the string into a dijit - and the store might not have been initialized correctly as a true variable at the point it is read. In other words, in combobox constructor - the javascript variable is undefined.
If this does not help, try forcing to set store after onShow has run for your dialog.
dialog.onShow = function() {
dijit.byId('osType').set('store', dijit.byId('osTypeStore'));
}
Try forcing it to enabled using the property of the combo
enabled: true,
Other than that, check it using Firebug or debug bar or something similar :)