I'm trying to edit the default "link" plugin within CKEditor such that the plugin will display a selection of links that I have stored in a MySQL database.
I've essentially taken the code from the anchor selector portion of the plugin and copied it over to my "article" snippet.
The problem that I'm having is that I don't know how to specifically get the data from the php (which is a JSON array) into the javascript within the confines of the plugin as shown below.
The source:
setup: function (a) {
this.clear(); //Clears the dropdown menu
this.add("");
var data; //Initialize the variable data where I want the JSON from PHP to go.
//This is where I want to obtain the data and spit it out!!
$.post("titles.php", function (result) {
//A Data-handler function call here doesn't work?
//data = result also won't work because of scope
//Something has to happen here though...
});
data = JSON.parse(data);
for (var i = 0; i < data.length; i++) {
data[i]["title"] && this.add(data[i]["title"]); //Add each item to dropdown
}
a.article && this.setValue(a.article.name);
(a = this.getDialog().getContentElement("info", "linkType")) && "email" == a.getValue() && this.focus()
}
Sidenote: This code does work if I hardcode the exact output from the PHP file to a variable.
I might be missing something as silly as a commonly known "best practice" in JS as JS is not my forte, so please let me know if I'm ignorant or stupid!
Thanks in advance!
header.php
<script src="ckeditor.js"></script>
<script>
var Globalvars = {
myvar: '<?php echo $myvar; ?>'
}
</script>
Now, you can use this myvar variable in your .js file as:
alert(Globalvars.myvar);
Related
I am not a javascript expert at all and expect this to be a fairly simple task.
I am trying to grab the value from a hidden field on my page called pageVariant so I can store it as a value inside of Google Tag Manager. I just don't know how to write the javascript.
This is the code I have tried, but know it is not right. Any help here would be appreciated.
function() {
var capturedText = document.querySelector("#lp-pom-form-162 > form > input[type=hidden]:nth-child(2)");
return capturedText; }
First of all provide a name to your function.
Then use the code mentioned below:
function inputText() {
var capturedText = document.querySelector("input[name='pageVariant']").value;
return capturedText;
}
I am currently getting some data from my controllers which I am using in my cshtml file.
Technically this data needs to be used only by javascript. So I am doing this
$(document).ready(function () {
var responses = [];
#foreach (var logItem in #Model.items)
{
<text>
action = '#Html.Raw(#logItem.ActionString)';
actions.push(action);
</text>
}
SomeJSFunciton(actions);
});
The above solves the problem however there are two issues with that
The text of all this gets written on the page source in the
$(document).ready function
I would like to call a js function on
action before inserting it in the array. I am not sure how to do
that ?
Any suggestions on the best way to accomplish this ?
Mixing code like this will become painful as the complexity increases. Something I've had luck with is encoding the server data into JSON like so:
var myServerData = #Html.Raw(Json.Encode(myServerData));
This way you will have your server data in JSON format, and you'll be able to write all of your code in JavaScript. So your code would become:
for(var i = 0; i < myServerData.length; i++){
action = myServerData[i]['ActionString'];
// Here would be where you would call your function before inserting into array
actions.push(action);
}
SomeJsFunctions(actions);
I know this will probably a simple question, but I'm new to CQ5 and AEM in general.
I have a cq:Widget node which is a simple textfield.
<rowtitlevalue
jcr:primaryType="cq:Widget"
fieldLabel="Row Title Value"
name="./rowtitlevalue"
xtype="textfield"
disabled="true"/>
Now at the moment within my JavaScript, I'm currently accessing it via
var textfield = panel.findByType('textfield')[1];
which works fine (there's another textfield before this one, hence the 1 in the array.
MY QUESTION:
how do I look for this field using it's NAME attribute within my javascript.
Any help would be appreciated.
Also, I'm using this object to run the following:
if (show != undefined) {
textfield.enable();
textfield.show();
}
else if (show == undefined) {
textfield.disable();
textfield.hide();
}
The JavaScript is located within the Component Based ClientLibs.
And this is the Listener that I have under the checkbox that defines the value of SHOW within the javascript (which is working fine).
<listeners
jcr:primaryType="nt:unstructured"
loadcontent="function(field,rec,path){Ejst.toggleRowTitle(field);}"
selectionchanged="function(field,value){Ejst.toggleRowTitle(field);}"/>
Please let me know if you see any problems with this.
Appreciate it in advance
The CQ.Dialog API defines the getField( String name) method which returns a field with the given name. In case more than one field with the same name exists, it returns an array of those fields.
Thus finding parent of xtype dialog instead of panel as shown below would solve this.
Ejst.toggleRowTitle = function(checkbox) {
var dlg = checkbox.findParentByType('dialog');
var rowTitleField = dlg.getField('./rowtitlevalue');
// perform required operation on rowTitleField
}
i did something like that a few days ago and my solution was to make a js file on the same level of the component and with the same name of the component with the information that i need.
Something like this:
The file will be called rowtitlevalue.js and the content would be:
"use strict";
use(function() {
var data = {};
data.rowtitlevalueData = properties.get("rowtitlevalue");
//more properties if needed...
return {
data: data
}
});
then where i need to use it in javascript, i need the following tags:
<sly data-sly-use.data="rowtitlevalue.js">
<script type="text/javascript">
var myVariable = ${data.rowtitlevalueData};
</script>
</sly>
I have a jQuery function on a separate functions.js file, that is in charge of making a SQL update by posting some info. This is working properly, here you can see it:
Function being called on my php file, passing just element's ID info:
$('.tableContent').on('click', '.discontinueIcon', function() {
turnId = $(this).attr('data-id');
discontinueRow();})
Function working properly on a separate functions.js file:
function discontinueRow(){
row = '#' + turnId;
$.post('config/forms/turn_conf/turn_discontinue.php', { tu_id:turnId }).success(messageOKKKK);}
As I will need to create many more functions updating info from many tables, I was trying to have a unique function, and provide it with needed info being sent with parameters from the php files. As I am new to this, do not even know if it is possible, and if it is I definitely can't get the way to.
I tried to store the needed values on several variables on my php file:
$('.tableContent').on('click', '.discontinueIcon', function() {
turnId = $(this).attr('data-id');
action = "'config/forms/turn_conf/turn_discontinue.php'";
elements = "tu_id:turnId";
discontinueRow(action,elements);})
And using these parameters on the separate functions.js file as this shows:
function discontinueRow(action,elements){
row = '#' + turnId;
$.post(+action+,{ +elements+ }).success(messageOKKKK);}
But this does not work. Is it possible to pass by this way parameters to a function? In this case, what is going wrong here?
You can do it like this:
$('.tableContent').on('click', '.discontinueIcon', function() {
turnId = $(this).attr('data-id');
discontinueRow('config/forms/turn_conf/turn_discontinue.php', { tu_id:turnId });
});
you also need to set up your function with input parameters:
function discontinueRow(url, params){
row = '#' + turnId;
$.post(url, params).success(messageOKKKK);}
}
I am able to execute external JS file (which is used to render chemical molecules) inside jQuery. However, when the external JS file is loaded, it overwrites everything from my initial file.
How am i supposed to insert the external JS file into the appropriate DOM (in this case, the last available class with className "render") without overwriting the existing HTML file?
I use an URL to get data in JSON format and parse it using .each() function as mentioned below.
$(document).ready(function(){
$.get("someURL", function (json){
var obj = $.parseJSON(json);
$(".container").append("<ul class =\"items\">");
$.each(obj, function(i){
name = obj[i].name;
mol = obj[i].mol;
script = $(document.createElement('script')).attr('type', 'text/javascript').attr('src','js/external.js');
$('ul.items').append('<li><div class="render">');
$(script).appendTo(".render:last");
});
});
});
My external js file is,
transform = new ChemDoodle.TransformCanvas(name, 150, 150, true);
transform.loadMolecule(ChemDoodle.readMOL(mol));
Also, please note that I have no programming experience and trying to learn JS/jQuery on my own for a couple of months.
Any help/guidance is much appreciated.
Thanks in advance,
Kaushik
I could solve the above problem.
The problem was in the external.js (chemdoodle JS which renders chemical compounds) file that I was using. It renders chemical compound structure inside . Due to an inherent problem in chemdoodle's JS component, it used to overwrite my file (irrespective of if I call it as external script or internal function). I had to explicitly insert DOM with the same id as the chemdoodle was using. Here is what I did and that solved the problem. It might help someone who is working with chemdoodle too!
$(document).ready(function(){
function canvasCall(name, mol){
transform = new ChemDoodle.TransformCanvas(name, 150, 150, true);
transform.specs.bonds_useJMOLColors = true;
transform.specs.set3DRepresentation('Stick');
transform.specs.atoms_display = false;
transform.specs.backgroundColor = 'black';
transform.specs.bonds_clearOverlaps_2D = true;
transform.loadMolecule(ChemDoodle.readMOL(mol));
};
$(".container").append("<ul class =\"items\">");
$.getJSON(someURL, function (obj){
$.each(obj, function(i){
var name = obj[i].name;
var mol = obj[i].mol;
$('ul.items').append("<li><div class=\"render\"><canvas id=\"" + name + "\">");
$("#"+name).append(canvasCall(name, mol));
});
});
});