multiple TinyMCE - javascript

I have recently encountered a problem while developing a page with multiple TinyMCEs.
<textarea style='width:90%;height:500px;' class='tinymce' name='message' id="mce_editor_0" placeholder='Long Message'>{if isset($message)}{$message}{/if}</textarea>
<textarea style='width:90%;height:200px;' class='tinymce' name='signature' id="mce_editor_1" placeholder='Long Message'></textarea>
$.ajax({
url: "../action/getEmailTemplate?id="+id+'&type='+type
}).done(function ( data ) {
console.log("../action/getEmailTemplate?id="+id+'&type='+type);
console.log(data);
if(type=='email'){
tinyMCE.execCommand('mce_editor_0', 'mceSetContent', false, data);
}
if(type=='sig'){
tinyMCE.execCommand('mce_editor_1', 'mceSetContent', false, data);
}
});
And this does not work. Do I misunderstand the logic behind tinyMCE.execCommand?

This won't work. You will find the correct usage description here.
There are generall commands you may call using tinyMCE and there are editor-specific commands called on an editor instance:
tinymce.get('mce_editor_1').execCommand('mceCodeEditor', false, 5);
You may also use the following to address a specific editor
tinyMCE.execInstanceCommand('mce_editor_1', command, user_interface, value, focus)

Related

Shorthand property name are not supported by current Javascript version in PHPStorm

I have used Jquery getScript and generate html form by Javascript however I got
Shorthand property name are not supported by current Javascript version in PHPStorm but my function work as well.
Concern: Before I used PHP to generate html form within another PHP framework but I think I should not used Server script to do that I should use JS to do that but I don't know how is it going on and is it support all browser or not so please give me some idea of this technique because I not yet understand much more about suing DOM and its performance.
Security Concern: if I used Javascript to generate Html form as below script it will less security or bad performance or not?
Another hand if I keep this code inside of HTMl I will never got this errors types.
$(document).ready(function () {
returnTill('returnTill');
});
function returnTill(returnTill) {
var chief_opt = '';
var teller_opt = '';
$.ajax({
url:'/teller/return_till_data',
method:'get',
dataType:'json',
timeout:4000,
async: false,
success:function (data, status) {
$.each(data, function(ins, vals){
if(ins === 'chief') {
cheifs = data.chief;
for(var key in cheifs){
chief_opt += '<option value="'+vals[key].id+'"> '+vals[key].username+' / '+vals[key].account_no+' </option>';
}
}if(ins === 'teller') { /* Tellers*/
tellers = data.teller;
for(var key in tellers){
teller_opt = '<option value="'+vals[key].id+'"> '+vals[key].username+' / '+vals[key].account_no+' </option>';
}
loadModale({
idSelector: returnTill,
title: 'Return Till',
labels: ['From','To','Amount','Description'],
loadType:'returnTill',
forms: {
input: {
selection: {
from:{chief_opt,class:'form-control', name:'retn_chief', id:'retn_chief'},
to:{teller_opt, class:'form-control', name:'retn_teller', id:'retn_teller'},
},
Amount :{type: 'text', name: 'retn_amount', class: 'form-control', Id: 'retn_amount', placeholder: '', style: '', value:''},
token:{ type: 'hidden', name: '_token', class: 'form-control', Id: 'token', placeholder: '', style: '', value: '{{csrf_token()}}'},
},
textarea : {
description:{class:'form-control', name:'tran_descr', rows:10, id:'tran_descr'}
}
},script: [
'/theme/js/jquery.validate.min.js',
'/theme/js/bootstrap-datepicker/js/bootstrap-datepicker.js',
]
});
}
});
},error: errorCallback,
});
}
Errors:
I perform the following steps in Webstorm to solve the same problem, so it may also work in PHPStorm:
Go to Settings by pressing ALT + CNTRL + S
Click on "Languages and Frameworks"
Click on 'Javascript'
In the "Javascript language version" drop-down, select 'ECMAScript 6'.
Click 'OK'
Now re-open any *.js files you may have previously had open, and notice that the errors are no longer there.
Hope that helps someone.
You can fix it this way:
from:{chief_opt: chief_opt}
So, if you change your code to this:
from:{chief_opt: chief_opt, class:'form-control', name:'retn_chief', id:'retn_chief'},
to:{teller_opt: teller_opt, class:'form-control', name:'retn_teller', id:'retn_teller'},
You shouldn't get anymore the PHPStorm error.
Hope it helped or at least cleared a little bit. ;)
PHP STORM SOLUTION
The error is attributed to the version of your Javascript Setting in PHPSTORM
STEPS
Go to settings(preference on macbook)settings/preference and click
Expand the Languages and Frameworks by clicking it
click language & frameworks
Click Javascript and change the Javascript language version to the current or ECMAScript6 recommended.select ecmascript

How to add content via ajax using the popover boostrap

I tried to view different sources and also looked into the forums posting similar question, but it didnt quite help me with the issue that im facing.
I have a text input filed to which I'm adding a popover to show similar a list of names in the database. The inout field checks for validation, to see if the name entered is unique, if not it displays similar names available in the database that could be re-used.
here is the popover snippet:
$("#account_name_create").popover({
title: 'Twitter Bootstrap Popover',
content: function (process) {
this.accountCollection = new ipiadmin.collections.AccountCollection();
var newName = $("#new-account-form #account_name_create").val();
var userFilter = "accountName~'" + newName + "'";
this.accountCollection.fetch({
data: { "f": userFilter,
"sortby": null,
"type":"ipi",
"pageno":0,
"pagesize":2,
"reversesort" : true
},
cache: false,
success: function(model, response, options) {
var states = [];
map = {};
$.each(model.aDataSet, function (i, state) {
map[state.accountName] = state;
states.push(state.accountName);
});
process(states); //gives an error saying 'undefined is not a function (says process is undefined)'
},
error: function(model, response, options) {
console.log('error');
}
});
},
});
here is the html:
<input type="text" id="account_name_create" name="account_name" class="" size="40" />
I'm not sure how why it says 'process' as undefined. Also not sure if this would be the correct way of displaying the data in the popover.
Any ideas??
Thanks!
process doesn't have scope in the success function, only in the content function. If you want to call the process function from within the success function, you could define it somewhere outside of the jQuery call.

Copy word document between document libraries in different subsites (SharePoint)

What is the best (subjective.. I know. Sorry!) method for prompting a user to copy an instance of a document in my library to a library in his own site (on the same site collection, if that matters)? I am an administrator with a few word documents that I create too frequently to set specific content types for. So I have created a library that contains a few word templates for them to copy over (most importantly: metadata included except for the modified/created fields).
I have tried a few javascript/jquery methods that I'd put on the display form with a text box allowing them to enter their library url and how many copies they'd like to make, but that doesn't seem to work as I'd like. What would be the most efficient way of accomplishing this? Using an event handler? If so, is there any way to associate one of these with a custom button on the ribbon (I've only associated these buttons for js functions)?
Example of the javascript function I was trying to use:
function copyItem() {
var itemurl = $("#copyFrom").val();
var dst = $("#copyTo").val();
$().SPServices({
operation: "GetItem",
Url: itemurl,
async: false,
completefunc: function (xData, Status) {
itemstream = $(xData.responseXML).find("Stream").text();
itemfields = "";
$(xData.responseXML).find("FieldInformation").each(function(){
itemfields+=$(this).get(0).xml;
});;
}
});
$().SPServices({
operation: "CopyIntoItems",
SourceUrl: itemurl,
async: false,
DestinationUrls: [dst],
Stream: itemstream,
Fields:itemfields,
completefunc: function (xData, Status) {
var error = $(xData.responseXML).find("CopyResult").first().attr("ErrorCode");
}
}
}
called by:
<label>from:</label><input type="text" value="" id="copyFrom" maxlength="255">
<label>to:</label><input type="text" value="" id="copyTo" maxlength="255">
<input type="button" onclick="copyItem();" value="Copy">
note: I am not entering any values into these text boxes right now as I'm manually entering them into itemurl and dst.
But the console says:
The value of the property 'copyItem' is null or undefined, not a Function object.
It's not recommended to use "async:false". It's better to do an asynchronous call and insert your second SPServices into the first one.
Also a close parenthesis is missing for your second SPServices.
And finally, the "Fields" must be an array (http://msdn.microsoft.com/en-us/library/copy.copy.copyintoitems.aspx).
I tried the below code and it worked for me:
var srcurl="http://my.sharepoint.com/aymeric_lab/Shared%20Documents/879258.jpeg";
var desturl="http://my.sharepoint.com/aymeric_lab/Shared%20Documents/879258_copy.jpeg";
$().SPServices({
operation: "GetItem",
Url: srcurl,
completefunc: function (xData, Status) {
var itemstream = $(xData.responseXML).find("Stream").text();
var itemfields = [];
$(xData.responseXML).find("FieldInformation").each(function(){
itemfields.push($(this).get(0).xml);
});
$().SPServices({
operation: "CopyIntoItems",
SourceUrl: srcurl,
DestinationUrls: [ desturl ],
Stream: itemstream,
Fields:itemfields,
completefunc: function (xData, Status) {
}
})
}
});

How can I remove AutoNumeric formatting before submitting form?

I'm using the jQuery plugin AutoNumeric but when I submit a form, I can't remove the formatting on the fields before POST.
I tried to use $('input').autonumeric('destroy') (and other methods) but it leaves the formatting on the text fields.
How can I POST the unformatted data to the server? How can I remove the formatting? Is there an attribute for it in the initial config, or somewhere else?
I don't want to send the serialized form data to the server (with AJAX). I want to submit the form with the unformatted data like a normal HTML action.
I wrote a better, somewhat more general hack for this in jQuery
$('form').submit(function(){
var form = $(this);
$('input').each(function(i){
var self = $(this);
try{
var v = self.autoNumeric('get');
self.autoNumeric('destroy');
self.val(v);
}catch(err){
console.log("Not an autonumeric field: " + self.attr("name"));
}
});
return true;
});
This code cleans form w/ error handling on not autoNumeric values.
With newer versions you can use the option:
unformatOnSubmit: true
Inside data callback you must call getString method like below:
$("#form").autosave({
callbacks: {
data: function (options, $inputs, formData) {
return $("#form").autoNumeric("getString");
},
trigger: {
method: "interval",
options: {
interval: 300000
}
},
save: {
method: "ajax",
options: {
type: "POST",
url: '/Action',
success: function (data) {
}
}
}
}
});
Use the get method.
'get' | returns un-formatted object via ".val()" or
".text()" | $(selector).autoNumeric('get');
<script type="text/javascript">
function clean(form) {
form["my_field"].value = "15";
}
</script>
<form method="post" action="submit.php" onsubmit="clean(this)">
<input type="text" name="my_field">
</form>
This will always submit "15". Now get creative :)
Mirrored raw value:
<form method="post" action="submit.php">
<input type="text" name="my_field_formatted" id="my_field_formatted">
<input type="hidden" name="my_field" id="my_field_raw">
</form>
<script type="text/javascript">
$("#my_field_formatted").change(function () {
$("#my_field").val($("#my_field_formatted").autoNumeric("get"));
});
</script>
The in submit.php ignore the value for my_field_formatted and use my_field instead.
You can always use php str_replace function
str_repalce(',','',$stringYouWantToFix);
it will remove all commas. you can cast the value to integer if necessary.
$("input.classname").autoNumeric('init',{your_options});
$('form').submit(function(){
var form=$(this);
$('form').find('input.classname').each(function(){
var self=$(this);
var v = self.autoNumeric('get');
// self.autoNumeric('destroy');
self.val(v);
});
});
classname is your input class that will init as autoNumeric
Sorry for bad English ^_^
There is another solution for integration which doesn't interfere with your client-side validation nor causes the flash of unformatted text before submission:
var input = $(selector);
var proxy = document.createElement('input');
proxy.type = 'text';
input.parent().prepend(proxy);
proxy = $(proxy);
proxy.autoNumeric('init', options);
proxy.autoNumeric('set', input.val())''
proxy.change(function () {
input.val(proxy.autoNumeric('get'));
});
You could use the getArray method (http://www.decorplanit.com/plugin/#getArrayAnchor).
$.post("myScript.php", $('#mainFormData').autoNumeric('getArray'));
I came up with this, seems like the cleanest way.
I know it's a pretty old thread but it's the first Google match, so i'll leave it here for future
$('form').on('submit', function(){
$('.curr').each(function(){
$(this).autoNumeric('update', {aSign: '', aDec: '.', aSep: ''});;
});
});
Solution for AJAX Use Case
I believe this is better answer among all of those mentioned above, as the person who wrote the question is doing AJAX. So
kindly upvote it, so that people find it easily. For non-ajax form submission, answer given by #jpaoletti is the right one.
// Get a reference to any one of the AutoNumeric element on the form to be submitted
var element = AutoNumeric.getAutoNumericElement('#modifyQuantity');
// Unformat ALL elements belonging to the form that includes above element
// Note: Do not perform following in AJAX beforeSend event, it will not work
element.formUnformat();
$.ajax({
url: "<url>",
data : {
ids : ids,
orderType : $('#modifyOrderType').val(),
// Directly use val() for all AutoNumeric fields (they will be unformatted now)
quantity : $('#modifyQuantity').val(),
price : $('#modifyPrice').val(),
triggerPrice : $('#modifyTriggerPrice').val()
}
})
.always(function( ) {
// When AJAX is finished, re-apply formatting
element.formReformat();
});
autoNumeric("getArray") no longer works.
unformatOnSubmit: true does not seem to work when form is submitted with Ajax using serializeArray().
Instead use formArrayFormatted to get the equivalent serialised data of form.serializeArray()
Just get any AutoNumeric initialised element from the form and call the method. It will serialise the entire form including non-autonumeric inputs.
$.ajax({
type: "POST",
url: url,
data: AutoNumeric.getAutoNumericElement("#anyElement").formArrayFormatted(),
)};

Where is the problem in this prototype [ajax.Request] code?

function sendM() {
new Ajax.Request("sendm.html",
{
method: 'post',
postBody: 'text='+ $F('text') +'&sub='+ $F('subject') +'&sname='+ $F('name') +'&sfmail='+ $F('email') +'to='+ $F('to'),
onLoading:showLoad,
onComplete: showResponse
});
}
function showLoad(){
$('dresult').innerHTML= "מבצע את הפעולה <br /><br />";
}
function showResponse(req){
$('dresult').innerHTML= req.responseText;
}
The hTML Form code :
<form id="sfunc" name="sfunc" onsubmit="return false;">
שם
דוא"ל
יעד
1
2
3
נושא
הודעה
You attempted to use showLoad and showResponse before they were initialized. Move your function definitions for showLoad and showResponse above your Ajax request.
For future reference, note that any error occuring inside your Ajax handlers do not print out errors in your browser error console. You'll have to create breakpoints in the handlers to fix the problem. Use a debugger like Firefox's Firebug plugin.

Categories