I am dispaying the book details from database. I want to get details of a user who has checked out the book on onclick of the button.
My AUI script:
<aui:script>
function displayUserDetails(userId,userName)
{
var details="<table><tr><td>"+userId+"</td><td>"+userName+"</td></tr></table>";
AUI().use('liferay-util-window','aui-io-deprecated',function(A)
{
var dialog=Liferay.Util.Window.getWindow(
{
dialog: {
title:'userdetails',
bodyContent:details,
centered:true,
modal: true,
width: 500,
height: 400
}
}).render();
});
}
</aui:script>
I am calling the function here
<aui:button name="button9" value="details" id='getMoreInfo_<%=bookId %>' onclick="displayUserDetails(<%=userId %>,<%=un %>);" />
I am getting syntax error that while calling the function on button click (above line)
If i call the function like this...
onclick="displayUserDetails('<%=userId %>','<%=un %>');"
output will be like <%=userId%><%=un%> (in table)
onclick="displayUserDetails(<%=userId %>,<%=un %>);"
Below code is working.....:-)
onClick='<%="displayUserDetails(\'"+userId+"\',\'"+un+"\');"%>'
credits to
Nishikant sapkal # http://www.liferay.com/community/forums/-/message_boards/message/27640265
Related
I added this AUI date picker to my JSP:
<aui:input
type="text"
id="myDate"
name="my-date"
value="2017-12-14"
placeholder="yyyy-mm-dd"
onChange="javascript:alert('date changed');"/>
<aui:script>
AUI().use(
'aui-datepicker',
function(A) {
new A.DatePicker(
{
trigger: '#<portlet:namespace/>myDate',
mask: '%Y-%m-%d',
popover: {
zIndex: 1000
}
}
);
}
);
</aui:script>
Problem: Changing the date using the calendar widget that pops up does not display the alert.
If I ignore the widget and change the date manually (using the keyboard), the alert correctly shows up as soon as the input loses focus.
What am I doing wrong?
How to have onChange be called whenever the date is changed, be via mouse or keyboard?
As the guys in the comments mentioned use the js callback definitions. There are a couple of examples in the documentation.
https://alloyui.com/examples/datepicker
If you really want to have the onChange also there, you can trigger the change event from the js callback code.
<button class="btn btn-primary"><i class="icon-calendar icon-white"></i> Select the date</button>
<script>
YUI().use(
'aui-datepicker',
function(Y) {
new Y.DatePicker(
{
trigger: 'button',
popover: {
zIndex: 1
},
on: {
selectionChange: function(event) {
console.log(event.newSelection)
}
}
}
);
}
);
</script>
I am trying to show a qtip when the user right-clicks on a node using the following code:
cy.on("cxttap", "node", function (evt) {
evt.cyTarget.qtip({
content: {
text: "test"
}
});
});
When I right-click a node no tooltip is shown, but as soon as I left-click on the same node then the tooltip shows.
I have made sure that cytoscape-qtip is working and I have not added any event handlers for the click or tap events.
qTip handles events itself, so you have to specify something like cxttap for the show event. If you want to write your own listeners, like you have above, then your call to qtip will need a call to the qtip API to manually show.
Set show property for right click
cy.elements().qtip({
content: '<p> [SUM Outgoing call :42, THUVAPPARA</p><button id="add-to-report" class="btn btn-success">Add to report</button><br><button class="btn btn-danger">Remove</button>',
show: { event: 'cxttap' },
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
});
I am new to using backbone in parse.com environment. I simply want to edit the second model object but I dont know how to open the edit box for the second object.
The current working model is the following, I have added "dblclick label.todo-job" : "edit1" and can get it started by double clicking it.
events: {
"click .toggle" : "toggleDone",
"dblclick label.todo-content" : "edit",
"dblclick label.todo-job" : "edit1",
"click .todo-destroy" : "clear",
"keypress .edit" : "updateOnEnter",
"blur .edit" : "close"
},
The following is the function to allow editing my object.
edit1: function() {
$(this.el).addClass("editing");
this.input.focus();
},
However, it only opens this object "label.todo-content" to edit while I want to edit "label.todo-job". How can I change the focus to the new object.
Thats the whole code if you need.
// The DOM element for a todo item...
var TodoView = Parse.View.extend({
//... is a list tag.
tagName: "li",
// Cache the template function for a single item.
template: _.template($('#item-template').html()),
// The DOM events specific to an item.
events: {
"click .toggle" : "toggleDone",
"dblclick label.todo-content" : "edit",
"dblclick label.todo-job" : "edit1",
"dblclick label.todo-phone" : "edit2",
"dblclick label.todo-email" : "edit3",
"dblclick label.todo-website" : "edit4",
"dblclick label.todo-address" : "edit5",
"click .todo-destroy" : "clear",
"keypress .edit" : "updateOnEnter",
"blur .edit" : "close"
},
// The TodoView listens for changes to its model, re-rendering. Since there's
// a one-to-one correspondence between a Todo and a TodoView in this
// app, we set a direct reference on the model for convenience.
initialize: function() {
_.bindAll(this, 'render', 'close', 'remove');
this.model.bind('change', this.render);
this.model.bind('destroy', this.remove);
},
// Re-render the contents of the todo item.
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
this.input = this.$('.edit');
return this;
},
// Toggle the `"done"` state of the model.
toggleDone: function() {
this.model.toggle();
},
// Switch this view into `"editing"` mode, displaying the input field.
edit: function() {
$(this.el).addClass("editing");
this.input.focus();
},
edit1: function() {
$(this.el).addClass("editing");
this.input.focus();
},
edit2: function() {
$(this.el).addClass("editing");
this.input.focus();
},
edit3: function() {
$(this.el).addClass("editing");
this.input.focus();
},
edit4: function() {
$(this.el).addClass("editing");
this.input.focus();
},
edit5: function() {
$(this.el).addClass("editing");
this.input.focus();
},
// Close the `"editing"` mode, saving changes to the todo.
close: function() {
this.model.save({content: this.input.val()});
$(this.el).removeClass("editing");
},
// If you hit `enter`, we're through editing the item.
updateOnEnter: function(e) {
if (e.keyCode == 13) this.close();
},
// Remove the item, destroy the model.
clear: function() {
this.model.destroy();
}
});
Below is the objects added in the HTML.
<script type="text/template" id="item-template">
<li class="<%= done ? 'completed' : '' %>">
<div class="view">
<li><label class="todo-content"><%= _.escape(content) %></label></li>
<li><label class="todo-job"><%= _.escape(job) %></label></li>
<li><label class="todo-phone"><%= _.escape(phone) %></label></li>
<li><label class="todo-email"><%= _.escape(email) %></label></li>
<li><label class="todo-website"><%= _.escape(web) %></label></li>
<li><label class="todo-address"><%= _.escape(address) %></label></li>
<li><label class="todo-postcode"><%= _.escape(postcode) %></label></li>
<button class="todo-destroy"></button>
</div>
<input class="edit" value="<%= _.escape(content) %>">
<input class="edit" value="<%= _.escape(content) %>"> /*I need to edit this instead of the object above this*/
</li>
</script>
An event triggers on the deepest possible element.which means this of Event handler function is not element you select for event listener but element where the actual event occurs.
I don't know about parse.com though,I assume that label.todo-content is inside of label.todo-job. And that makes Event handler's callback this into label.todo-content.
So If you explicitly select element to focus,It should work.
FYI, Backbone View has $(http://backbonejs.org/#View-dollar) and $el (http://backbonejs.org/#View-$el) parameters to use jQuery methods for elements in side of the View.Since global $ is able to edit any elements over each controller's View area, using this.$ is always recommended.
edit1: function() {
this.$el.addClass("editing");
this.$("label.todo-job").focus();
},
EDITED
I got what you asked about.
I do not know how you wrote your HTML code but the code you provided is pointing first input if your input tags have class name,
edit1: function() {
this.$el.addClass("editing");
this.$(".yourClassNameForInput").focus();
},
or if you do know have class/id name,You can also do this.
edit1: function() {
this.$el.addClass("editing");
this.$("input").eq(0).focus();
},
....
edit5: function() {
this.$el.addClass("editing");
this.$("label.todo-job").eq(4).focus();
}
I want to get render parameter.
I wrote the following aui:script for opening new dialog. In that script I set parameter.
<input type="text" name="<portlet:namespace/>weburl" size="75: id="weburl" label="" inlineField="true" />
<aui:button name="btnPreview" id="btnPreview" value="Preview"/>
<aui:script>
AUI().use('aui-base','aui-io-plugin-deprecated','liferay-util-window','liferay-portlet-url', 'aui-dialog-iframe-deprecated', function(A) {
A.one('#<portlet:namespace />btnPreview').on('click', function(event){
alert(document.getElementById('weburl').value)
var strUrl=document.getElementById('weburl').value;
var renderURL =Liferay.PortletURL.createRenderURL();
renderURL.setParameter("nameUrl",strUrl);
renderURL.setParameter("mvcPath",'/html/view2.jsp');
renderURL.setPortletId("Portlets_WAR");
renderURL .setWindowState("pop_up");
alert(renderURL.toString());
var popUpWindow=Liferay.Util.Window
.getWindow({
dialog: {
centered: true,
constrain2view: true,
modal: true,
resizable: false,
width: 500
}
})
.plug(A.Plugin.DialogIframe, {
autoLoad: true,
iframeCssClass: 'dialog-iframe',
uri:'<%=portletSettingsURL.toString()%>'
})
.render();
popUpWindow.show();
popUpWindow.titleNode.html("Image Preview");
popUpWindow.io.start();
});
});
</aui:script>
Using this script i redirect to my view2.jsp and open that page in dialog succesfully. Here I also set the parameter using :
var strUrl=document.getElementById('weburl').value
var testurl =Liferay.PortletURL.createRenderURL();
testurl.setParameter("name",strUrl);
My portal:renderURL is as follow
<portlet:renderURL var="portletSettingsURL"
windowState="<%=LiferayWindowState.POP_UP.toString()%>">
<portlet:param name="mvcPath" value="/html/view2.jsp"/>
</portlet:renderURL>
My view2.jsp file is as follow
<%
String str1=renderRequest.getParameter("nameUrl");
System.out.print("value " +str1);
%>
I want to send my weburl textbox value to view2.jsp file
I just want the value of name in my view2.jsp file
How can I get my value in view2.jsp file?
Have you tired the ParamUtil class?
ParamUtil.get(request, param, defaultValue).
For putting params to the URL you can check this. This is for scriptlet but you can use it in AUI script too.
https://www.liferay.com/community/forums/-/message_boards/message/43775763
Edit:
You can add your parameter to the URL like this:url = url + '&<portlet:namespace/>yourParamName=yourParamValue'
Try with renderRequest.getParameter("name"), it shoud work.
I am using select2 plugin inside a jquery dialog but in does not work. When dropping down, the focus moves to the input control but immediately get out from it,not allowing me to type anything.
This is the HTML:
<div id="asignar_servicio" title="Asignar servicios a usuarios">
<input type="hidden" class="bigdrop" id="a_per_id" />
</div>
And this is the javascript code:
$( "#asignar_servicio" ).dialog({
autoOpen: false,
height: 500,
width: 450,
modal: true,
buttons: {
"Cancelar": function () {
$('#asignar_servicio').dialog('close');
}
}
});
$("#a_per_id").select2({
placeholder: "Busque un funcionario",
width: 400,
minimumInputLength: 4,
ajax: {
url: "#Url.Action("Search", "Personal")",
dataType: 'json',
data: function (term, page) {
return {
q: term,
page_limit: 10,
};
},
results: function (data, page) {
return { results: data.results };
}
}
}).on("change", function (e) {
var texto = $('lista_personal_text').val().replace(/ /g, '');
if (texto != '')
texto += ',';
texto += e.added.text;
var ids = $('lista_personal_id').val().replace(/ /g, '');
if (ids != '')
ids += ',';
ids += e.added.id;
});
I have this same code in other page and it works.
Any help will be appreciated,
thanks
Jaime
jstuardo's link is good, but there's a lot to sift through on that page. Here's the code you need:
$.ui.dialog.prototype._allowInteraction = function(e) {
return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
};
Just add it next to wherever you are setting the select2 drop down.
An easy way:
$.ui.dialog.prototype._allowInteraction = function (e) {
return true;
};
add this after whereever you set select2
Or try this from:
Select2 doesn't work when embedded in a bootstrap modal
Remove tabindex="-1" from the modal div
I have found this workaround. https://github.com/ivaynberg/select2/issues/1246
Cheers
Jame
There's a new version of the fix for select2 4.0 from the github issue thread about this problem:
if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(e) {
if ($(e.target).closest('.select2-dropdown').length) return true;
return ui_dialog_interaction.apply(this, arguments);
};
}
Just run this before any modal dialogs that will have select2 in them are created.
JSFiddle of this fix in action
The best solution I found was just making the dialog not be a modal dialog by removing modal:true. Once you do this the page will function as desired.
After a while of battling with this I found another option that allows you to keep the dialog as a modal. If you modify the css for select2 to something like the following:
.select2-drop {
z-index: 1013;
}
.select2-results {
z-index: 999;
}
.select2-result {
z-index: 1010;
}
keep in mind that this works however if you open a lot of dialogs on the same page it will eventually exceed the z-index specified, however in my use case these numbers got the job done.
Not enough reputation to comment on a previous post, but I wanted to add this bit of code:
$('#dialogDiv').dialog({
title: "Create Dialog",
height: 410,
width: 530,
resizable: false,
draggable: false,
closeOnEscape: false,
//in order for select2 search to work "modal: true" cannot be present.
//modal: true,
position: "center",
open: function () { },
close: function () { $(this).dialog("distroy").remove(); }
});
$("#displaySelectTwo")select2();
Updating to the newer version of JQuery and Select2 is not an option in our application at this time. (using JQueryUI v1.8 and Select2 v1)
Add this after your select2() declaration.
$.ui.dialog.prototype._allowInteraction = function (e) {
return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-dropdown').length;
};
I've used the following fix with success:
$.fn.modal.Constructor.prototype.enforceFocus = function () {
var that = this;
$(document).on('focusin.modal', function (e) {
if ($(e.target).hasClass('select2-input')) {
return true;
}
if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
that.$element.focus();
}
});
}
I could fix this by removing the option: 'modal: true' from the dialog options.
It worked fine.
For anyone stumpling upon this with Select2 v4.0.12
I was using the Select2 option dropdownParent
i set the dropDownParent value, and still had the issue.
dropdownParent: $("#ReportFilterDialog")
What fixed it for me, was setting the value to, to select the outer layer of the modal dialog:
dropdownParent: $("#ReportFilterDialog").parent()