When I write a GreaseMonkey script, if I create a div and set onclick to alert it works:
var btn = document.createElement('div');
btn.setAttribute('onclick',"alert('clicked!');");
However, if I ask it to do something else that was defined earlier then it fails:
function graphIt() {...};
var btn = document.createElement('div');
btn.setAttribute('onclick',"graphIt();");
Is there any way I can bind a function to the onclick event of a div?
Your problem is that since you're seting the attribute to a string, it's evaluating the string in the context of the page itself, which doesn't have a graphIt function.
You should call the addEventListener method, like this:
function graphIt() {...}; var btn = document.createElement('div');
btn.addEventListener("click", graphIt, false);
Related
In the content script, I'm dynamically adding a button. And I want to execute a function that already exists in the page when a button is clicked. I tried to do:
<button onClick="test();">Test</button>
But when I click on it, I'm getting error test() is not defined.
How can I execute this function?
As far as i understand your question, these lines would work for you
function oldFunc(){
console.log("Hello");
}
var btn = document.createElement('button');
btn.onclick = oldFunc;
btn.innerHTML = "Dynamic Button";
document.body.appendChild(btn);
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
I am working on a JavaScript based UWP app. Now I need to dynamically show a html page(with a url) in a pop-up window.
I did some search, there is a ContentDialog I can probably use:
var object = new WinJS.UI.ContentDialog(element, options);
but I cannot find any JavaScript sample code for it. I couldn't figure out what should I pass as "element" and how I put the html in ContentDialog.
Thanks in advance for any help.
The WinJS playground shows you how to use the ContentDialog: http://winjs.azurewebsites.net/#contentdialog
The element you pass is the Html element you want to initiate as the dialog.
<div id="myDialog">I am the going to be the dialog content.</div>
var element = document.getElementById('myDialog');
var options = {
title: 'Main instruction',
primaryCommandText: 'Ok',
secondaryCommandText: 'Cancel'
};
var dialog = new WinJS.UI.ContentDialog(element, options);
If you want to set the dialog content dynamically you can do so with
var webview = document.createElement('x-ms-webview');
webview.src = 'http://stackoverflow.com';
dialog.element.querySelector('.win-contentdialog-content').appendChild(webview);
dialog.show();
I have a computed field on an xpage the result of which is HTML. In that HTML I want to compute a link that will trigger some server side js function followed by a partial refresh.
My current code looks like this:
Click Here
This will work if my js function is a client-side function but I want to use this function to set the value of a field on the document so I need SSJS.
Static links that are created from the controls pallet in an xpage allow the link to call SSJS with partial refreshes. How can I do this with a computed HTML link?
Another option could be creating your own event handler and executing that via client side JavaScript code described in this article. So suppose you create an event handler something like this:
<xp:eventHandler event="name" id="eventhandler1a">
<xp:this.action>
<xp:saveDocument />
</xp:this.action>
</xp:eventHandler>
You can then create a function to call this event handler via JavaScript code:
XSP.executeOnServer = function () {
// the event handler id to be executed is the first argument, and is required
if (!arguments[0])
return false;
var functionName = arguments[0];
// OPTIONAL - The Client Side ID that is partially refreshed after executing the event handler
var refreshId = (arguments[1]) ? arguments[1] : "#none";
var form = (arguments[1]) ? this.findForm(arguments[1]) : dojo.query('form')[0];
// catch all in case dojo element has moved object outside of form...
if (!form)
form = dojo.query('form')[0];
// OPTIONAL - Options object containing onStart, onComplete and onError functions for the call to the
// handler and subsequent partial refresh
var options = (arguments[2]) ? arguments[2] : {};
// OPTIONAL - Value to submit in $$xspsubmitvalue. can be retrieved using context.getSubmittedValue()
var submitValue = (arguments[3]) ? arguments[3] : '';
// Set the ID in $$xspsubmitid of the event handler to execute
dojo.query('[name="$$xspsubmitid"]')[0].value = functionName;
dojo.query('[name="$$xspsubmitvalue"]')[0].value = submitValue;
this._partialRefresh("post", form, refreshId, options);
}
You can then call the event handler via this client side JavaScript code:
XSP.executeOnServer('#{id:eventhandler1a}', '#{id:panel1}')
Here panel1 refers to control which would be partially refreshed.
You can stick with your code if you use the XSP Object in the myFunction() client side function. This allows you to call a partial refresh. The other option is to call a Extlib JSON control and have your logic there. Depends a little on your coding style
The link control is not static. You can compute whatever you want, for example:
<xp:link escape="true" id="lnk">
<xp:this.value><![CDATA[#{javascript:"#"}]]></xp:this.value>
<xp:this.text><![CDATA[#{javascript:"Label here"}]]></xp:this.text>
</xp:link>
Is it possible to print just the contents of <rich:modalPanel>?
Wrap all the content of rich:modalpanel in a div then use following javascript snippet to do your work, of course it is not standard. add a print button in richmodal panel on click call this function of javascript
function PrintContent()
{
var DocumentContainer = document.getElementById('divtoprint');
var WindowObject = window.open("", "PrintWindow",
"width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.close();
setTimeout(function(){
WindowObject.focus();
WindowObject.print();
WindowObject.close();
},6000);
}
source: http://www.isolutionteam.co.uk/printing-contents-of-a-div-using-javascript/