The following code, included in $(document).ready of the modal window, does not work. Apparently the iframe of the SharePoint modal window has not yet been loaded into DOM, when the addEventListener fires out.
What would be the correct approach to handle this?
window.addEventListener("message", function(event) {
if(event.data == "openpi");{
alert(1)
}
});
Thank you!
There is dialogReturnValueCallback option in SP.UI.ModalDialog.showModalDialog, you could get the value from dialog and then used in parent window.
<script type="text/javascript">
//******** Dialog with Data from Pop Up Starts Here ***********/
function openDialogAndReceiveData(tUrl, tTitle) {
var options = {
url: tUrl,
title: tTitle,
dialogReturnValueCallback: onPopUpCloseCallBackWithData
};
SP.UI.ModalDialog.showModalDialog(options);
}
function onPopUpCloseCallBackWithData(result, returnValue) {
if(result== SP.UI.DialogResult.OK)
{
SP.UI.Status.removeAllStatus(true);
var sId = SP.UI.Status.addStatus("Data successfully populated to text boxes from Pop-up");
SP.UI.Status.setStatusPriColor(sId, 'green');
document.getElementById('<%= txtData1.ClientID %>').value = returnValue[0];
document.getElementById('<%= txtData2.ClientID %>').value = returnValue[1];
}else if(result== SP.UI.DialogResult.cancel)
{
SP.UI.Status.removeAllStatus(true);
var sId = SP.UI.Status.addStatus("You have cancelled the Operation !!!");
SP.UI.Status.setStatusPriColor(sId, 'yellow');
}
}
//******** Dialog with Data from Pop Up Ends Here ***********/
</script>
Check here for details
Related
I have a p:accordionPanel and inside of each tab of the panel there is some info that the user can manipulate, what i need to do is if the user close the tab show a confirm dialog (before the tab get closed) whit something like "are you sure you wanna close the tab? if you do your changes will be lost". here is what i tried
<p:ajax event="tabClose" onstart="return myFunction()"
listener" {myBean.myMethod}" process="#this" />
function myFunction() {
var answer = confirm("are you sure you wanna close the tab? if you do your changes will be lost");
if(answer){
//some logic
return true;
}else{
//some logic
return false;
}
}
The problem is that if i choose cancel on the confirm dialog the tab get close anyway. Shouldn't the tab closing be canceled by the onStart="return false"? is there a way to achieve what i'm trying to do?
Finally I solved my problem, apparently the onStart="return false" does not prevent the tab from change its statatus but the onTabChange attribute of the p:accordionPanel does, the only problem is that for some reason the onTabchange event of the accordion don't get execute when the tab is been closed just when the tab is been opened so i have to override the acordionPanel unselect function of primefaces to call the onTabChange event
PrimeFaces.widget.AccordionPanel.prototype.unselect = (function(index) {
var cached_function = PrimeFaces.widget.AccordionPanel.prototype.unselect;
return function() {
var panel = this.panels.eq(index);
if(this.cfg.onTabChange) {
var result = this.cfg.onTabChange.call(this, panel);
if(result === false)
return false;
}
var result = cached_function.apply(this, arguments);
return result;
};
})();
then i only had to placed myFunction(); on the onTabChange event of the accordiong panel (onTabChange="return myFunction()")and it works.
I am trying to render and append a template (ticket_edit) to the body. I need to set a context to the newly appended template, and the events of ticket_edit should be bound to that template.
The code:
Template.ticket.events = {
'click a.edit' : function (event) {
//when the edit button has been clicked, load template 'ticket_edit'
//with the current context. Please see situation 1 and 2.
}
}
Template.ticket_edit.events = {
'click a.save' : function (event) {
//this won't do anything when i have supplied a context!
}
}
So the problem is:
-I can set the context, but then the events are not bound to the newly added template.
-If I don't set the context the events are bound properly.
But i need both the events and the context.
Situation 1:
'click a.edit' : function (event) {
//applying a context to the template will result in events not being bound.
$('body').append(Meteor.render(Template.ticket_edit(this)));
}
Sitation 2:
'click a.edit' : function (event) {
//this way, the events will execute properly and i can save my ticket.
//However, no context is supplied!
$('body').append(Meteor.render(Template.ticket_edit));
}
Does anybody have a good method for doing this? I'm fairly new to Meteor, so maybe you have a better method of dynamically loading templates.
Don't use jQuery for this, just do it directly with the template and a #with block. Something like this:
<body>
{{> tickets}}
</body>
<template name="tickets">
{{#each tickets}}
{{> ticket}}
{{/each}}
{{#with currentTicket}}
{{> editTicket}}
{{/with}}
</template>
Template.tickets.tickets = function() {
return Tickets.find();
};
Template.tickets.currentTicket = function () {
return Tickets.findOne({ _id: Session.get( "currentTicket" ) });
};
Template.ticket.events({
'click a.edit' : function () {
Session.set( "currentTicket", this._id );
}
});
Because we're using a #with block, the editTicket template won't get rendered until you click the edit button (setting the "currentTicket" in the Session).
It's also possible to just do this (no #with block):
{{> editTicket currentTicket}}
But that causes editTicket to always be rendered, just without any context until the Session var gets set.
Note that because we're using Session, the user won't be interrupted by reloads/hot code pushes.
I want to assign value to the element and auto submit after page completely load.I encounter some question.
1.How to get the element in the tab?
2.How to fire submit event when assigned value?
I want to fire as the follow code:
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
var url = tab.url;
var config = null;
if (tab.status !== "complete") {
return;
}
else {
// assign value and fire submit event
}
});
Help!!
I wouldn't do it this way. Why not use jQuery in a content script and trigger your action on ($document).ready()? That way you'll have the document and can use jQuery selectors to get the elements that interest you. To submit, just get button using a selector and call click().
I am using the tooltipDialog from extlib and want to position the tooltip to the left and right instead of the default which seem to be below.
any idea how to do this?
== Update ==
Found the following code in extlib
eclipse\plugins\com.ibm.xsp.extlib.controls\resources\web\extlib\dijit\TooltipDialog.js
so I tried a few different options, but could not get it to work
http://dojo-toolkit.33424.n3.nabble.com/dijit-TooltipDialog-orientation-of-popup-td1007523.html
XSP.openTooltipDialog("#{id:tooltipDialog1}","#{id:link2}","orient:{BR:'BL',BL:'BR'}")
XSP.openTooltipDialog("#{id:tooltipDialog1}","#{id:link2}","orient:[BR:'BL',BL:'BR']")
XSP.openTooltipDialog = function xe_otd(dialogId,_for,options,params) {
dojo.addOnLoad(function(){
var created = false
var dlg = dijit.byId(dialogId)
if(!dlg) {
options = dojo.mixin({dojoType:"extlib.dijit.TooltipDialog"},options)
dojo.parser.instantiate([dojo.byId(dialogId)],options);
dlg = dijit.byId(dialogId)
created = true;
} else {
if(dlg.keepComponents) {
dijit.popup.open({
popup: dlg,
around: dojo.byId(_for)
});
return;
}
}
if(created) {
dojo.connect(dlg, 'onBlur', function(){
dijit.popup.close(dlg);
})
}
dlg.attr("content", "<div id='"+dialogId+":_content'></div>");
var onComplete = function() {
dijit.popup.open({
popup: dlg,
around: dojo.byId(_for)
});
dlg.focus();
}
var axOptions = {
"params": dojo.mixin({'$$showdialog':true,'$$created':created},params),
"onComplete": onComplete,
"formId": dialogId
}
XSP.partialRefreshGet(dialogId+":_content",axOptions)
})
}
btw: I also need to set the showDelay
also found these usefull links
http://dojotoolkit.org/api/1.6/dijit/TooltipDialog
I think you need to set the following dojo attribute:
<xp:dojoAttribute name="data-dojo-props" value="position:['before']">
</xp:dojoAttribute>
Atleast in dojo-1.8.1,
dijit.popup.open({
popup: dlg,
around: node,
orient: ["after-centered"]
});
places the ToolTipDialog to right of node.
The "position" attribute of the tooltip control supports values of "above", "below", "left", and "right".
I have an SVG canvas with text that I would like to respond to clicks. The code below isn't getting the job done:
var MyView = Backbone.View.extend({
tagName : "text",
events : {
"click" : "clickhandler"
},
initialize : function() {
this.centerX = this.options.centerX;
this.centerY = this.options.centerY;
this.svg = this.options.svg;
this.tagText = this.model.get("tag_name");
this.render();
},
clickhandler : function(event) {
console.log("I was clicked!"); //This is not firing on click
},
render : function() {
this.el = this.svg.text(this.centerX, this.centerY, this.tagText, {});
return this;
}
});
This is being called in the render function of another view as such :
container.svg({
onLoad : function(svg) {
for ( var i = 1; i < that.relatedTags.length; i++) {
tagView = new MyView({
model : this.relatedTags.at(i),
centerX : 100,
centerY : 200,
svg : svg
});
}
container.append(tagView);
}
});
It shows up just fine and if I throw this in at the end of the for loop :
$(tagView.el).click(function() {
alert("xx");
});
Then the clicking works but I need to access the Backbone Model associated with the view so I'd much prefer the backbone event to a straight JQuery event.
The problem here is, that you set the element of the view in the render method. But backbone tries to add the events on initialization. So when backbone tries to add the events there is no element in you case. So either you have to start your view with your svg text, or you add the events by hand in your render method.
Maybe you can add the events on the svg itself and jquery is clever enough to handle the delegation. But I'm not sure in this case.