Develop Reference

Load a TinyMCE editor inside a TinyMCE modal in wordpress

I'm using TinyMCE to open a modal. And inside that modal i would want to add an instance of tinyMCE. I'm opening the modal passing some objects. I followed this guide
editor.windowManager.open(
// Properties of the window.
{
title: "TDSK's Dumb Shortcode Creator", // The title of the dialog window.
file: url + '/tinymce-dialog.html', // The HTML file with the dialog contents.
width: 1000, // The width of the dialog
height: 600, // The height of the dialog
inline: 1 // Whether to use modal dialog instead of separate browser window.
},
// Parameters and arguments we want available to the window.
{
editor: editor, // This is a reference to the current editor. We'll need this to insert the shortcode we create.
jquery: $, // If you want jQuery in the dialog, you must pass it here.
tinymce: tinymce
}
);
In the tinymce-dialog.html
var passed_arguments = top.tinymce.activeEditor.windowManager.getParams();
var $ = passed_arguments.jquery;
var jq_context = document.getElementsByTagName("body")[0];
$( function() {
passed_arguments.tinymce.execCommand( 'mceAddEditor', false, $( '#sectionContent_1', jq_context )[0] );
} );
This actually creates an instance of TinyMce which is not working though
probably the reason is an error
TypeError: elm is undefined
which points to
aria: function(name, value) {
var self = this, elm = self.getEl(self.ariaTarget);
if (typeof value === "undefined") {
return self._aria[name];
}
self._aria[name] = value;
if (self.state.get('rendered')) {
elm.setAttribute(name == 'role' ? name : 'aria-' + name, value);
}
return self;
},
what could be causing this?

In the end, I had to stop using TinyMce modal and use bootstrap modals.

Show JqueryUI tooltip based on parsley validation

I am having some trouble with getting the JQueryUI Tooltip Widget working with parsley validation. This is my code:
$.listen('parsley:field:error', function (fieldInstance) {
var messages = ParsleyUI.getErrorsMessages(fieldInstance);
if(fieldInstance.$element.tooltip('instance') != undefined) {
fieldInstance.$element.tooltip('destroy');
}
fieldInstance.$element.tooltip({
items: fieldInstance.$element,
content: messages,
show: 'pulsate'
});
fieldInstance.$element.tooltip('show');
});
My methology is:
Check if a tooltip exists (as multiple validation occur), if it does destroy it.
Create the tooltip with the appropriate message
Show the tooltip
But I just get a consol error:
Uncaught Error: no such method 'show' for tooltip widget instance
Also, if anyone thinks there is a better way of doing this please don't hesitate to answer!

You have a few issues with your code:
The main issue is that you're calling .tooltip('show'); but there is no such method or event, according to the API documentation. You have to use .tooltip('open').
The content option accepts a function or string and you're passing an array. You need to implode the messages array with something like messages.join('<br />')
In order to show the errors only within the tooltip, you need to change the default options of parlsey, specifically errorsContainer and errorsWrapper.
Your final code will be something like this (test in this jsfiddle):
$(document).ready(function() {
$("#myForm").parsley({
errorsContainer: function (ParsleyField) {
return ParsleyField.$element.attr("title");
},
errorsWrapper: false
});
$.listen('parsley:field:error', function (fieldInstance) {
var messages = ParsleyUI.getErrorsMessages(fieldInstance);
if(fieldInstance.$element.tooltip('instance') != undefined) {
fieldInstance.$element.tooltip('destroy');
}
fieldInstance.$element.tooltip({
content: messages.join('<br />'),
items: fieldInstance.$element,
show: 'pulsate'
});
fieldInstance.$element.tooltip('open');
});
});

How to close SP.UI.ModalDialog from button click in sharepoint?

I want to show Confirmation Dialog when user saves any document from EDITForm.aspx. So I have written following JavaScript code.
function PreSaveAction() {
var _html = document.createElement();
_html.innerHTML = " <input type=\"button\" value=\"Submit\" onclick ='javascript:SubmitDlg();' /> <input type=\"button\" value=\"Cancel\" onclick =\"javascript:CloseDlg();\" /> </td> </tr> </tbody> </table>";
var options = {
title: "Confirm",
width: 400,
height: 200,
showClose: false,
allowMaximize: false,
autoSize: false,
html: _html
};
SP.UI.ModalDialog.showModalDialog(options);
}
function SubmitDlg() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK);
}
function CloseDlg() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel);
}
Now I have following queries.
SubmitDlg and CloseDlg is not fired when clicking on Submit or
Cancel.
Is this right way to Submit form (SubmitDlg method ) and Cancel dialog (CloseDlg method) from modal dialog ?
Also this modal dialog-box should be only appeared if no validation errors while saving record, means if any field-value is required and we have not put any value then it should display in-built red colored messages.
Thanks

in the options for the modal dialog you need to pass a reference to your call back function like this:
var opt = SP.UI.$create_DialogOptions();
opt.width = 500;
opt.height = 200;
opt.url = url;
opt.dialogReturnValueCallback = MyDialogClosed;
SP.UI.ModalDialog.showModalDialog(opt);
Then in your callback function you can check the status:
function MyDialogClosed(result, value) {
if (result == SP.UI.DialogResult.Cancel) {
//Cancel. Do whatever
}
else { //SP.UI.DialogResult.OK
//User clicked OK. You can pickup whatever was sent back in 'value' }
}
If you need to send stuff back from your dialog you can use this:
function okClicked()
{
SP.UI.ModalDialog.commonModalDialogClose(1, someobject);
}
To make this work you'd need to hook-up a function to the OK button in your server side code using something like this:
protected override void OnLoad(EventArgs e)
{
if (Master is DialogMaster)
{
var dm = Master as DialogMaster;
if(dm != null) dm.OkButton.Attributes.Add(#"onclick", #"return okClicked();");
}
base.OnLoad(e);
}

add class "CloseSPPopUp" to the btn u want to click to close
Add This Script to Page which has "CloseSPPopUp" btn
$('.CloseSPPopUp').click(function(){
window.top.CloseSPUIPopoup();
});
$('.CloseSPPopUp').click(function(){
window.top.CloseSPUIPopoup();
});
Now on Main Page where u are calling popup
function CloseSPUIPopoup{
$(".ms-dlgContent").hide();
}
Reason:
ms-dlgContent class is in Parent Page & CloseSPPopUp is in Iframe which is created at runtime

Unobtrusive client side validation in partial view not working

I have read most of the posts on here relating to this issue and I still can't see what's wrong. Can someone have a looksy please? I am getting an error "Cannot read property 'unobtrusive' of undefined" If I comment out that line then I get "cannot read property 'options' of undefined" So obviously I have something referenced improperly but I can't see it. If I take all the validation code out the form pops up and works fine, but of course no validation. Also, I've tried putting "#updateContactForm" in place of "#updateDialog" and got the same results. Hoping this is something simple that I just can't see from looking at it for too long. Thanks in advance!
<div id="updateDialog" title="Update Contact"></div>
<script type="text/javascript">
var linkObj;
$(function () {
$(".editLink").button();
$("#updateDialog").dialog({
autoOpen: false,
width: 400,
resizable: false,
modal: true,
buttons: {
"Update": function () {
$("#update-message").html(''); //make sure there is nothing on the message before we continue
$("#updateContactForm").submit();
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$(".editLink").click(function () {
//change the title of the dialog
linkObj = $(this);
var dialogDiv = $("#updateDialog");
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#updateContactForm");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse($("#updateDialog"));
// Re add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
//open dialog
dialogDiv.dialog("open");
});
return false;
});

Just to check, have you correctly referenced the jquery validation scripts in the cshtml or master page?.
You should load first the script jquery.validate.js and then the jquery.validate.unobtrusive.js one.

Modal dialog message truncated in firefox

I am using a Modal dialog to prompt user a message. It works fine in IE but shows only first row in firefox. How can i fix this. This is how my message is formatted.
var modal = "<div id='modal_pop'><table><tr><td> "
+ "Please check you have a valid value to proceed.<br> Change the value if possible. Value should be valid to proceed further.<br>"
+ "Value should not be a number or a special case character<br>
Make changes and save the work before exiting it.<br> "
+ "Click logoff now or continute using the application.</td> </tr> </table></div>";
and this is the jQuery dialog:
var showPopup = function() {
$(modal).dialog({
buttons: {
"Test": function() {
//ABC
},
"Test1": function() {
//XYZ
}
},
modal: true,
width: 430,
height: 100,
resizable:'yes',
scroll:'no'
});
}

try to set the width to auto width: 'auto' and check. I think the text is getting cut because of overflow.