i have this problem. I have a dialog running on jquery mobile. With this dialog i perform a search and if the search is successful with knockout i update my view-model. The problem is that i would reuse the dialog to update items that have same json structure but are placed in different position in my vm (in other words i would not create a specific function and specific search dialog for the same type of object but use always the same and at runtime update the correct/current item). My idea was to pass, when open dialog, the context of current elemet to update but i have no success in this.
Is this possible. What is the best practice to perform this?
Thanks in advance
I have made a custom binding for this, in combo with the native template binding of knockout you can get this behaviour, please see my bindings here
https://github.com/AndersMalmgren/Knockout.Bindings
Examples http://jsfiddle.net/H8xWY/7/
Code
<div id="dialog" data-bind="dialog: { autoOpen: false, modal: true, title: dialogTitle }, template: { name: 'dialog-template', data: dialogItem, 'if': dialogItem }, openDialog: dialogItem"></div>
Related
As the title mentions, I was wondering whether there's a relatively simple way to use the functionality to edit the portlet title inside a portlet.
That is, when clicking a span contained in a portlet, it would then become editable (through an input box) in order to, then, update a portler preference.
This can probably be done from scratch, but since the functionality is already present in Liferay, there might be a way to make use of it.
Yes, you can update a Portlet title with a simple ajax call.
PFB the examplejQuery code and mandatory parameters to be sent to update the Portlet title.
$.ajax({
url: "/c/portlet_configuration/update_title",
method: "POST",
data: { p_auth:'vcYb1DvX',
p_l_id:'10187',
portletId:'56_INSTANCE_hbJBswwx0rYg',
title:'My Webcontent'
},
success: function(data){
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
Sounds like you want an "In Place Editor". For YUI (which is the underlying JS library for AlloyUI, bundled in Liferay), the first hit I get is this project, but with this search term you'll be able to find the component that suits your needs best.
I didnt clearly understand your question. Still, i am answering your question.
In my project, we provide custom title where we will update the custom portlet title for the portlet by getting the name entered in the text box in my preference page using below code:
// write this code in action method
PortletPreferences preferences = actionRequest.getPreferences();
String portletTitle= actionRequest.getParameter("portletTitle"); (title entered in text box)
preferences.setValue("portlet-setup-title-en_US",portletTitle); // update the portlet title of the portlet
preferences.setValue("portlet-setup-use-custom-title","true");// setting to receive custom title
preferences.store(); //stores the preference
Hope this helps
I am struggling with the following.
On my XPage I have a viewpanel component, but it is not bound to a notesview datasource, but to a hashmap stored in viewScope. Reasons for this is beyond scope of my question.
Since the lines in my view are not actually linked to the documents I cannot use the standard checkboxes and the related getSelectedDocIds. I do however want a way to remove the selected documents. I have a column with checkboxes containing the unid of the corresponding row.
So long story short. I have an array of unids and want to perform an action that does the following:
Display a dijit.Dialog asking for confirmation
If OK clicked call a function that does the following:
Remove the documents based on the unids
Refresh the viewpanel
I am thinking of the following 2 solutions, but in doubt what would be best (maybe a third, even simpler solution?)
Have the OK button of the dojo dialog call a function that does an XmlHttpRequest to an XAgent or plain old LS agent
Have the OK button trigger an eventhandler that runs on the server as described by JeremyHodge here. But how would I pass the unids as parameter and refresh the view afterwards?
Thanks!
Cant you just make use of the extension library dialog with the dialog button control. In this button control you can then
A third option would be to add a column to your datatable/view which contains checkboxes. On the onchange event of these boxes you add an eventhander which adds the value to a viewScope variable.
A button on the bottom (or top.) of the page you add the code you need to remove the selected items from the hashmap, delete the documents associate with the selected id's. this button can be a ordinary button with a partial refresh on the viewpanel. When you run into the bug that you cant use buttons in a dialog please use the extension library dialog control because this fixes that issue for you.
If the current user does not have the correct access level to delete documents you could use the sessionAsSigner global (assuming the signer of the design element has the correct access levels).
This way you dont need to go call an xAgent by xmlthttprequest and can stay with the default xpage methodology.
I hope this helps in some way
I would second #jjbsomhorst in the use of the extension library for the dialog box - if you use one at all. Usually users don't read dialog boxes. So the approach would be add the column with the checkboxes, but don't bother with an event handler, but bind them ALL with their value to ONE scopeVariable. On submission that variable will then hold an array with the selected UNID.
Then render a page that lists these documents and have a confirm button. While the new page affords a server round-trip the likelihood, that users actually pay attention is way higher. What you can do:
Have the normal page that renders the dialog with editable checkboxes and when the user clicks "Delete" you set something like viewScope.confirmDeleteMode=true; and use that as condition for the checkboxes and make them read-only AND set the class of the selected rows to "morituri" which in your CSS would have something like .morituri { color: white; background-color : red; font-weight: bold } and a new button "Confirm Delete" (and hide the Delete button).
This way you only have one page to deal with.
I went for option 2, which has the possibility to provide the partial refresh id. I passed the unids as a submitvalue like:
function doRemove(unids){
XSP.executeOnServer(ISP.UI.removeEventID, ISP.UI.removeRefreshID, {
params: {
'$$xspsubmitvalue': unids
},
onComplete : function() {
//alert('test')
}
});
}
The ISP.UI.removeEventID performs the following code:
var unids = context.getSubmittedValue();
removeDocuments(unids); //SSJS function performing the actual delete
viewScope.reload = 'reload' //triggers the hashmap to be rebuild based on new documentcollection
I have a button, In Button on click event has set of codes,
I want to update two particular element using Server side Javascript.
But these are in different tags...
I want to update an element using SSJS code.
I am using Lotu notes 8.5.2.
Please check out this blog by Tim Tripcony, It will show you how to update two panels via partial refresh.
http://www.timtripcony.com/blog.nsf/d6plinks/TTRY-84B6VP
basically the code for two refreshes looks like below.
XSP.partialRefreshGet("#{id:div3}", {
onComplete: function() {
XSP.partialRefreshGet("#{id:div4}");
}
});
You should update the datasource for the components and dont try to 'refresh' them. If you realy want to update their values you use
getComponent(x).setValue();
Another approach would be to just use the partialrefreshget()..
I am writing an app with node.js and coffee-script and coffeekup as template engine. I have a form where I'd like to enable or disable a button depending on whether there are values in some input fields. I am wondering whether there is a straightforward mechanism like in Sproutcore or Ember, where just a binding will do. How should I go about it?
No, there is no such binding out of the box. You have to either implement something like Ember, Knockout or Serenade.js, or roll it yourself. If it's just this one form, I would just have a small script (jQuery below):
function validateForm() {
// Check if form fields are valid, return true if valid, false if not.
}
// Update the disabled attribute on a button inside "formId" anytime an input field is changed.
$("#formId").on("change", "input", function(event) {
$("#formId button").attr("disabled", !validateForm());
});
google-chrome-extension
I´m having trouble with an extension I´m trying to build.
The thing is that I want to allow a user to highlight a word in some tab and get a translation of that word in another window by calling a Translator web page.
The part I have so far and works, is roughly as follows:
I created a context menu item which user selects to get the translation, calling a translate function.
chrome.contextMenus.create({
title: 'Translate',
contexts: [context],
onclick: translate
});
In the translate function I create window and send over the selected word.
chrome.windows.create({
url: 'http://www.TranslatingPage.com/index.asp?Translateword=' + info.selectionText
});
The question is: How do I update the newly created window? e.g. If I want to translate another word.
Do I fetch all windows or tabs and check if the part of the url holds the value
'http://www.TranslateExamplePage.com/index.asp?Translateword='
or do i update LastFocused tab?
Any ideas greatly appreciated.
Best regards
Hal
You can store the tabId of the tab in the new window you created for easy access.
chrome.windows.create() passes a Window object to the callback function. Among other things, this object contains an array of the tabs in it. Since you have just created this window, it will only have one tab. So:
var theTab;
chrome.windows.create({ url: 'http://www.TranslatingPage.com/index.asp?Translateword=' + info.selectionText }, function(window) {
theTab = window.tabs[0]
});
When you want to modify this tab again, use chrome.tabs.update():
chrome.tabs.update(theTab, { url: 'http://www.TranslatingPage.com/index.asp?Translateword=' + info.selectionText });