SharePoint Modal - paste value back to parent when closing - javascript

I've created a custom ribbon button where i load external content into a Modal Dialog. I want to insert some text on the editor and close the dialog. The function OnPopClosed is running when I click something on my dialog but I'm having an error: RTE is not defined, so I can't insert anything on the editor. Any ideas?
function init(){
var options = SP.UI.$create_DialogOptions();
options.title = "Sharepoint Plugin";
options.width = 600;
options.height = 400;
options.url = '/_Layouts/Test/Test.aspx';
options.dialogReturnValueCallback = OnPopClosed;
SP.UI.ModalDialog.showModalDialog(options);
}
function OnPopClosed(test) {
var range = RTE.Cursor.get_range();
range.deleteContent();
var selection = range.parentElement();
if (!selection) {
return;
}
range.insertNode(elem);
RTE.Cursor.get_range().moveToNode("test");
RTE.Cursor.update();
SP.UI.ModalDialog.commonModalDialogClose(1, "test");
}

Place RTE actions in SP.SOD.executeOrDelayUntilScriptLoaded in order to execute the specified function if the file containing it is loaded (in your case sp.ui.rte.js):
ExecuteOrDelayUntilScriptLoaded(RTEActions, "sp.ui.rte.js");
Example:
function RTEActions()
{
var range = RTE.Cursor.get_range();
//Remaining code goes here...
SP.UI.ModalDialog.commonModalDialogClose(1, "test");
}
then declare the dialog handler like this:
function OnPopClosed() {
ExecuteOrDelayUntilScriptLoaded(RTEActions, "sp.ui.rte.js");
}

Related

What's Wrong With My Javascript Code? It Won't Run

var malediv = document.querySelector('.male');
var femalediv = document.querySelector('.female');
var male_sources = [
"/images/m1.png",
"/images/m2.png",
"/images/m3.png",
"/images/m4.png",
"/images/m5.png",
"/images/m6.png",
"/images/m7.png",
"/images/m8.png",
]
var female_sources = [
"/images/f1.png",
"/images/f2.png",
"/images/f3.png",
"/images/f4.png",
"/images/f5.png",
"/images/f6.png",
"/images/f7.png",
"/images/f8.png",
]
function displayRandMaleImage() {
malediv.innerHTML = "";
var malerandom_number = Math.floor(Math.random() *
male_sources.length);
var random_male_image_source = male_sources[malerandom_number];
maleimg = document.createElement('img');
maleimg.setAttribute('src', random_male_image_source);
malediv.append(maleimg);
alert('maleimagedisplayed');
}
function displayRandFemaleImage() {
femalediv.innerHTML = "";
var femrandom_number = Math.floor(Math.random() * female_sources.length);
var random_female_image_source = female_sources[femrandom_number];
femaleimg = document.createElement('img');
femaleimg.setAttribute('src', random_female_image_source);
div.append(femaleimg);
}
function displayRandImages(){
displayRandMaleImage();
displayRandFemaleImage();
alert('SKEEET');
}
none of my display random image fundtions are working in my html page that this is embedded in. I even added a test function "anAlert" that works perfectly. Please help me to understand what i can do to make this work.
There are two reasons why it isn't working.
1) You haven't defined the button. Which should've been done like:
var button = document.querySelector('.button_class');
or using the id:
var button = document.getElementById('button_id');
2) Your function to call the other two display functions is named displayRandImages()
function displayRandImages(){
displayRandMaleImage();
displayRandFemaleImage();
alert('SKEEET');
}
whereas, you've used the function displayRandomImage() in your click event:
button.addEventListener('click', displayRandomImage);
displayRandImages() != displayRandomImage()
button is not defined
button.addEventListener('click', displayRandomImage);
You should use it like
document.getElementById('buttonid').addEventListener('click', displayRandImages);
where 'buttonid' is id of your button, should be defined in html.
One more thing, as you are accessing button outside any other js function, So it'll be called on page load.
So you have to write this javascript after your html code so that it'll be called after button element rendered in HTML.

Put image and content into jQuery dialog box

I want to make a dialog box where the user can see the image that he/she has just uploaded. The file uploading systems works fine but when I want to put the image into the dialog box dynamically only an empty box appears.
HTML Code:
<div id="dialogbox">{I want to change this conetent here to an image}</div>
jQuery/Javascript Code:
function completeHandler(event){
var data = event.target.responseText;
var datArray = data.split("|");
if(datArray[0] == "upload_complete_msg"){
hasImage = datArray[1];
$(function() {
$("#dialogbox").dialog();
$("#dialogbox").html('sadasdasd');
});
} else {
_("uploadDisplay_SP_msg_"+datArray[2]).innerHTML = datArray[0];
_("triggerBtn_SP_"+datArray[2]).style.display = "block";
}
The datArray[] is a response text from the PHP validation. datArray[0] is equal to upload_complete_msg if it succeeded, datArray[1] is the image file name and extension like filename123.jpg and darArray[2] is just an id. So as I said if the user has successfully uploaded the image a dialog box should appear. I tried to add more content with the .html() function but it didn't show me anything again just an empty dialog box. How would it be possible to put an image into this dialog box like $("#dialogbox").html('<img src="imgfolder/myimage.jpg">');?
Try something like this?
function completeHandler(event) {
var data = event.target.responseText;
var datArray = data.split("|");
if (datArray[0] == "upload_complete_msg") {
hasImage = "tempUploads/"+datArray[1];
// Create a jQuery image object, and assign the src attribute.
var imgEl = $("<img>").attr("src", hasImage);
// stick that imgEl into the dialog.
$("#dialogbox").html(imgEl);
$("#dialogbox").dialog();
} else {
_("uploadDisplay_SP_msg_" + datArray[2]).innerHTML = datArray[0];
_("triggerBtn_SP_" + datArray[2]).style.display = "block";
}
}

Onclick - Multiple JavaScript Queries

I've read and tried numerous suggestions from Stack Overflow but none worked for me, forcing me to ask in person.
Currently I use this code to show and hide some content, the id tb1 is the div tag my content is wrapped in.
<input type="button" value="Information" onclick="javascript:sizeTbl('block');" />
(<i>Close</i>)
The button is "Information" and I've added a clickable link that closes the content, because I can't get the button to register the javascript:sizeTbl('none');">(<i>Close</i>)
Can someone please tell me how to do this, I've tried simply adding the javascript:sizeTbl('none');">(<i>Close</i>) after the first onclick command like so:
onclick="javascript:sizeTbl('block');javascript:sizeTbl('none');"
but it doesn't work and I've also tried the below linked fixes but to no avail.
How to call multiple JavaScript functions in onclick event?
Two onClick actions one button
In case it's needed here is the main JS that defines tb1 etc.. I've also tried adding a new function directly in to that script (as I thought calling tb1 outside might cause an issue)
function sizeTbl(h) {
var tbl = document.getElementById('tbl');
tbl.style.display = h;
}
function sizeTb2(h) {
var tb2 = document.getElementById('tb2');
tb2.style.display = h;
}
function sizeTb3(h) {
var tb3 = document.getElementById('tb3');
tb3.style.display = h;
}
function sizeTb4(h) {
var tb4 = document.getElementById('tb4');
tb4.style.display = h;
}
$('#toggle-view').on('click', function()
{
var button = $(this);
if ( button.hasClass('view-page') )
{
ViewPage();
button.removeClass('view-page');
}
else
{
ViewMenu();
button.addClass('view-page');
}
});

TypeError: Object doesn't support this property or method in IE8 / IE9

I am embedding a flex swf inside a html/dojo popup dynamically. It works fine in FF and Chrome but in IE8/IE9 I am getting "TypeError: Object doesn't support this property or method". In IE the first time the popup with the swf is created everything works fine. However once I hide the popup and open it again and then try and call the actionscript function inside flex it throws error. Any help will be appreciated. Following is the code snippet:
var srchSuggestDlg;
var srchDlg;
var isSuggSwfInit = false;
/* Called on key up for the search box widget or when search arrow button is clicked
* Displays search suggestions inside popover below the search widget
*/
cpm.home.index.searchKeyUp = function(evt) {
var srchInput = dojo.byId('xwt_widget_uishell_Header17_0_search_searchTextAP');
if(srchInput.value.length<3)
return;
if(srchSuggestDlg && srchSuggestDlg.isShowingNow)
{
try
{
swfobject.getObjectById("srchSuggSwf").updateSearchInFlex(srchInput.value);
}
catch(e){
console.error("swf may not be ready 1",e);
}
return;
}
if(srchSuggestDlg == null)
{
srchSuggestDlg = new xwt.widget.layout.Popover({pinnable: false, title: "Suggestions", sideAlign: false, autofocus: false, showHelp: false});
var divx=dojo.create("div");
divx.innerHTML="<div id='srchSuggDiv'></p></div>";
srchSuggestDlg.containerNode.appendChild(divx);
srchSuggestDlg.openAroundNode(srchInput);
var flashvars = {swfId:"srchSuggSwf", searchString:srchInput.value};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "srchSuggSwf";
attributes.name = "srchSuggSwf";
attributes.align = "middle";
params.wmode="window";
var cachecontrol = Math.floor(Math.random()*99999);
swfobject.embedSWF("pages/modules/monitor/flex/SearchSuggestion.swf?"+cachecontrol,"srchSuggDiv","200","140","9.0.0","playerProductInstall.swf",flashvars, params, attributes);
swfobject.createCSS("#srchSuggDiv", "display:block;text-align:left;");
}
else
{
srchSuggestDlg.openAroundNode(srchInput);
try
{
var srchInput1 = dojo.byId('xwt_widget_uishell_Header17_0_search_searchTextAP');
//dojo.byId("srchSuggSwf").updateSearchInFlex(srchInput1.value);
swfobject.getObjectById("srchSuggSwf").updateSearchInFlex(srchInput1.value);
}
catch(e) {
console.error("swf may not be ready 2",e);
}
}
};
/* Called from flex once flex swf is initialized
*/
cpm.home.index.suggSwfInit = function(value){
var srchInput = dojo.byId('xwt_widget_uishell_Header17_0_search_searchTextAP');
try
{
dojo.byId("srchSuggSwf").updateSearchInFlex(srchInput.value);
}
catch(e){
console.error("swf may not be ready in 3",e);
}
};
Common issue, download and install Node.js = https://nodejs.org/en/download/

popup in a popup, second popup has no focus?

Ok I know this is going to sound weird but it is what the client wants. I am working within a popup and when a user clicks on a datagrid cell within a certain column it will popup a html table with data. I have the second popup to display but it does not get focus. This is currently the code I am using to create the second popup. Any help to get the focus on this second popup would be great.
function onCellClick() {
var cmGrid = igtbl_getGridById("countermeasureDetailsGrid");
var cmCellID = cmGrid.ActiveCell.split("_");
if (cmCellID[3] === "3") {
var countermeasureID = igtbl_getCellById("countermeasureDetailsGrid_rc_" + cmCellID[2] + "_0").getValue();
var recordType = igtbl_getCellById("countermeasureDetailsGrid_rc_" + cmCellID[2] + "_4").getValue();
_crfPopupWindow = new crfPopupWindow(countermeasureID, recordType);
_crfPopupWindow.open();
_crfPopupWindow.focus();
}
}
function crfPopupWindow(countermeasureID, recordType) {
var crfPopup = new WindowDef();
crfPopup.target = "CRF_Popup.aspx?countermeasureID=" + countermeasureID + "&" + "recordType=" + recordType;
crfPopup.windowName = "CRFPopup";
crfPopup.toolBar = "no";
crfPopup.resizable = "yes";
crfPopup.scrollbars = "yes";
crfPopup.location = "yes";
crfPopup.width = 350;
crfPopup.height = 400;
return crfPopup;
}
EDIT: Solution
<script type="text/javascript" language="javascript">
function init() {
window.focus();
}
</script>
Have you checked that the 2nd popup has higher z-index CSS property?
First popup can have z-index of, say, 1000, but the second should have then 1001.
window.focus on page load This works

Categories