JQuery Modal Dialog Form Submission - dialog

I have a JQuery Modal Form and when i add the submit event, it cannot display as dialog but rather than embedded into browser window. If I uncomment the click event below, it will embedded into browser window rather than show as dialog.
$(document).ready(function(){
//$("#moveTicketBtn").click() {
// $("#moveUnknownTicket").submit();
//};
$("#moveUnknownTicketDialog").dialog(
{
title: "Move Unknown Ticket",
autoOpen: true,
modal: true,
resizable: true,
stack: true,
width: 500,
height: 350
});
});
Does anyone have any idea why it is like this? Please help. Thanks.
EDIT Question:
I have a form inside this dialog and upon submission(onsubmit, onblur) the javascript is not called. What is the reason?

try
$("#moveTicketBtn").click(function() {
$("#moveUnknownTicket").submit();
});
you have to insert your function within the () of the click event.
more information here: http://api.jquery.com/click/

That should do the trick:
http://jsfiddle.net/uQCKJ/
As you can see the form is submitted, since the alert box is triggered
$("#moveTicketBtn").click(function() {
$("#moveUnknownTicket").submit();
});
I have put submit inside click function though works great.

Related

Show cytoscape qtip on right click

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
}
}
});

Jquery UI dialog does not appear. It says $(...).dialog is not a function

http://ramin.azerizone.net/qiymet.html
Here is my demo webiste. In right side if I click red button, it says "dialog is not function". Although I have included jquery, and jquery ui. My script as below:
$(document).ready(function() {
$('#order_services_button').on("click", function() {
$("#dialog-form").dialog({
height : 320,
width : 350,
modal : true
});
});
});
This is because you are including two jQuery/jQueryUI files.Remove the duplicate script tags and the dialog should work.

Not able to open a portlet in liferay dialog

I have a dialog in my portal which opens a portlet. When I click on the link and the dialog opens, the dialog shows
You do not have the roles required to access this portlet.
However, if I add the same portlet on the page, the portlet opens without any hitch, both on the page and the dialog. What am I missing here? Anybody got any idea ?
My Codes are :
#set ($profile_url = $portletURLFactory.create($request, "profile_WAR_profileportlet", $getterUtil.getLong($plid), "RENDER_PHASE"))
$profile_url.setParameter("p_p_state", "exclusive")
Profile
window,
'openDialog', //function name
function(url, popupID, wd, ht) { // parameters to the function
var A = AUI();
popupDialog = new A.Dialog({
id: popupID, // popupId passed so that it would be easy to close it through events other than the close button
centered: false, // all the different parameters function you can check in the Alloy API
draggable: true,
resizable: false,
width: wd,
stack: true,
modal: true,
height: ht,
scrollbars: true,
xy: [getWidth()/2-wd/2,10]
}
).plug(
A.Plugin.IO,
{
uri: url
}
);
popupDialog.render();
},
['aui-dialog','aui-dialog-iframe']
);
Thanks in advance for any help that anyone can provide.
I think you are missing the following configuration in the liferay-portlet.xml of the profile_WAR_profileportlet portlet:
<add-default-resource>true</add-default-resource>
This should be set to true for the portlet which is accessed inside the dialog pop-up, here is the documentation for this element.
For more information you can look at this answer the points 4 & 5 of the answer would be of help to you.
Could it be that you're setting $profile_url but actually open the dialog on $preferences_url? I guess that the preferences_url has been defined earlier - and preferences (e.g. portlet edit mode) typically require more permissions than just the regular render phase. Crosscheck by accessing this as administrator..
Add the below two lines in your portal-ext.properties file
portlet.add.default.resource.check.enabled=true
portlet.add.default.resource.check.whitelist=3,56_INSTANCE_0000,58,82,86,103,113,145,164,166,170,33,---here append the portlet id which you want to display

How do you prevent a jquery.qtip2 tooltip from hiding when the mouse is over the tip?

Using jquery qTip2 for tooltips.
I have a tooltip with a link in it. I want the tip to stay open if the user's mouse enters the tip (not the trigger). Can't seem to figure out how to do that in the documentation....
If you want it to remain visible when you mouse over and into the tip, but still want it to dismiss on mouseout, use the fixed and delay options as described in the documentation here:
$('.selector').qtip({
content: {
text: 'I hide on mouseout, but you can mouse into me within 500ms',
},
hide: {
fixed: true,
delay: 500
}
});
The hide parameter has many options. For example, if you just want to not hide it indefinitely, simply set hide to false:
$('.selector').qtip({
content: {
text: 'I never hide',
},
hide: false
});
If you want it to hide on a different event, such as clicking anywhere outside the tip, set the event explicitly:
$('.selector').qtip({
content: {
text: 'I hide when you click anywhere else on the document',
},
hide: {
event: 'unfocus'
}
});
If you want it to hide when the trigger is clicked, specify the click event:
$('.selector').qtip({
content: {
text: 'I hide when you click the tooltip trigger',
},
hide: {
event: 'click'
}
});
See specifically the "hide" options documentation for more info.
If you want the tip to stay open and then hide it when the user clicks outside the target or leaves the target:
show: {
event: 'mouseover'
},
hide: {
event: 'click mouseleave'
}

Jqgrid in a dialog window is not showing on the second calling

I have this script below that will call my browse window;
var $dialog = $('<div></div>')
.load('scripts/browsecharges.jsp')
.dialog({
width: 800,
height: 500,
modal: false,
title: 'Browse Charges',
buttons: {
Ok: function() {
$(this).dialog('destroy');
}
},
close: function(event, ui) {
$(this).dialog('destroy').remove();
}
});
$dialog.dialog('open');
This browse window contains a jqgrid in it. At first my jqgrid works fine, I can see the data. But calling this browse window for the second time, my jqgrid will not show anymore. What should I do to open it as many times as I want?
Perhaps you need to call GridUnload prior to creating the grid, to ensure any elements from the previous grid are cleaned up.
I had this problem when a page was load via a .ajax call. The page contained dialogs with grids. On the first call everything worked great, on the second call (loaded another page and then reloaded the page) I would get an empty jqGrid, event though msg.d was clearly being set properly. The answer was when I left the page (loaded another page via .ajx) to destroy and remove the grid ($(this).dialog('destroy').remove()).

Resources