How can I call one JavaScript function in another JavaScript function? - javascript

function rblSelectedValue() {
var radio = document.getElementsByName('rblInterview');
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked == true) {
// document.getElementById('txt1').value = radio[i].value;
var value1 = radio[i].value
var radio1 = document.getElementsByName('rblPrefBatch');
radio1[i].value = value1;
radio1[i].checked = true;
// alert(radio[i].value);
}
}
}
function ForNext(ctrlid)
{
var DdlYear = document.getElementById("<%= DdlYear.ClientID %>")
if (document.getElementById(ctrlid).checked)
{
document.getElementById('<%=PanelView.ClientID %>').style.visibility = 'visible';
// rblSelectedValue();
document.getElementById('<%=txtpreYearofAppearing.ClientID%>').value = document.getElementById('<%=txtYearofAppearing.ClientID%>').value;
document.getElementById('<%=txtpreupscrollno.ClientID%>').value = document.getElementById('<%=txtRollno.ClientID%>').value;
document.getElementById('<%=txtaddidpre.ClientID%>').value = document.getElementById('<%=txtAddID.ClientID%>').value;
document.getElementById('<%=txtaddyearpre.ClientID%>').value = document.getElementById('<%=DdlYear.ClientID%>').value;
document.getElementById('<%=txtpreNoOfAttempt2009.ClientID%>').value = document.getElementById('<%=txtNoOfPrevAttempts.ClientID%>').value;
document.getElementById('<%=txtPrePrelim.ClientID%>').value = document.getElementById('<%=txtPrelimi.ClientID%>').value;
document.getElementById('<%=txtpremain.ClientID%>').value = document.getElementById('<%=txtMain.ClientID%>').value;
document.getElementById('<%=txtpregs.ClientID%>').value = document.getElementById('<%=txtGS.ClientID%>').value;
document.getElementById('<%=txtpreopt.ClientID%>').value = document.getElementById('<%=txtOptional.ClientID%>').value;
document.getElementById('<%=rblPreint.ClientID%>').value = document.getElementById('<%=rblInterview.ClientID%>').value;
document.getElementById('<%=txtpreother.ClientID%>').value = document.getElementById('<%=txtCorseothers.ClientID%>').value;
}
else
{
document.getElementById('<%=PanelView.ClientID %>').style.visibility = 'hidden';
}
}

its a simple function call like
rblSelectedValue();
but just include both javascript file in html page.

function one(){
//code
}
function two(){
//more code
one(); //calling function "one"
}

Related

TinyMce 5 setcontent unable to set html properly

I am writing a tinymce custom plugin called Mergetable. which will merger two user selected table.
Problem statement:
TinyMce is not allowing to select two table , by using shift and mouse I can select content of the table. So I can't use tinmce.activeeditor.selection.getNode() method instead using tinmce.activeeditor.selection.getContent().
Form getcontent() method I am getting proper html of both table. After do some operation while setting content using tinmce.activeeditor.selection.setContent() both table merged properly but two more table with empty td created one in top and one in bottom . Please see below plugin code.
code:
(function () {
var mergeTable = (function () {
'use strict';
tinymce.PluginManager.add("mergeTable", function (editor, url) {
function Merge(){
var selectedhtml=editor.selection.getContent();
//using getContent() as getnode returning body node
var dv=document.createElement('div');
dv.innerHTML= selectedhtml;
var tableElements = dv.getElementsByTagName('TABLE');
if (tableElements.length == 2) {
var tableOne = tableElements[0];
var tableTwo = tableElements[1];
var tempTable = null;
var offsetLeft = tableOne.offsetLeft;
var offsetTop = tableOne.offsetTop;
var elem = tableElements[0];
if (tableOne.nodeName == "TABLE" && tableTwo.nodeName == "TABLE") {
for (var r = 0; r < tableTwo.rows.length; r++) {
var newTR = tableOne.insertRow(tableOne.rows.length);
for (var i = 0; i < tableTwo.rows[r].cells.length; i++) {
var newTD = newTR.insertCell()
newTD.innerHTML = tableTwo.rows[r].cells[i].innerHTML;
newTD.colSpan = tableTwo.rows[r].cells[i].colSpan;
newTD.rowSpan = tableTwo.rows[r].cells[i].rowSpan;
newTD.style.cssText = tableTwo.rows[r].cells[i].style.cssText;
if (tableOne.style.border != "") {
newTD.style.border = "1px dotted #BFBFBF"
}
}
}
tableTwo.remove();
console.log(dv.innerHTML);
editor.selection.setContent(dv.innerHTML);
editor.nodeChanged();
}
else {
alert("Please select two tables");
}
}
}
editor.ui.registry.addButton('mergeTable', {
text: "Merge Table",
onAction: function(){ Merge();}
});
});
}());
}());
I am able to fix my problem by using some work around . Instead use setContent() method. I have remove selected content and use insertContent().
Please find working code below.
(function () {
var mergeTable = (function () {
'use strict';
tinymce.PluginManager.add("mergeTable", function (editor, url) {
var cmd = function (command) {
return function () {
return editor.execCommand(command);
};
};
function Merge(){
var selectedhtml=editor.selection.getContent();
var dv=document.createElement('div');
dv.innerHTML= selectedhtml;
var tableElements = dv.getElementsByTagName('TABLE');
if (tableElements.length == 2) {
var tableOne = tableElements[0];
var tableTwo = tableElements[1];
var tempTable = null;
var tableOneMaxCell=0
var tabletwoMaxCell=0
var tempCellcount=0
var tableOneRowcount=tableOne.rows.length;
tableOne.querySelectorAll("tr").forEach(function(e){
tempCellcount= e.querySelectorAll("td").length ;
if(tempCellcount>tableOneMaxCell)
{
tableOneMaxCell=tempCellcount;
}
});
tableTwo.querySelectorAll("tr").forEach(function(e){
tempCellcount= e.querySelectorAll("td").length ;
if(tempCellcount>tabletwoMaxCell)
{
tabletwoMaxCell=tempCellcount;
}
});
if (tableOne.nodeName == "TABLE" && tableTwo.nodeName == "TABLE") {
for (var r = 0; r < tableTwo.rows.length; r++) {
var newTR = tableOne.insertRow(tableOne.rows.length);
for (var i = 0; i < tableTwo.rows[r].cells.length; i++) {
var newTD = newTR.insertCell()
newTD.innerHTML = tableTwo.rows[r].cells[i].innerHTML;
newTD.colSpan = tableTwo.rows[r].cells[i].colSpan;
newTD.rowSpan = tableTwo.rows[r].cells[i].rowSpan;
newTD.style.cssText = tableTwo.rows[r].cells[i].style.cssText;
if (tableOne.style.border != "") {
newTD.style.border = "1px dotted #BFBFBF"
}
if(i==tableTwo.rows[r].cells.length-1 && tableOneMaxCell>tabletwoMaxCell){
newTD.colSpan = tableTwo.rows[r].cells[i].colSpan + (tableOneMaxCell-tabletwoMaxCell);
}
}
}
for( var t1=0; t1<tableOneRowcount; t1++ ){
var celllen=tableOne.rows[t1].cells.length;
tableOne.rows[t1].cells[celllen-1].colSpan=tableOne.rows[t1].cells[celllen-1].colSpan+(tabletwoMaxCell-tableOneMaxCell)
}
tableTwo.remove();
// cmd('mceTableDelete');
// var selObj = editor.selection;
// var selstartRange = selObj.getStart();
// var selectendRange= selObj.getEnd();
// var selrng=selObj.getRng();
// console.log(selstartRange);
// console.log(selectendRange);
// editor.execCommand('mceTableDelete');
// selObj.removeAllRanges();
editor.selection.getSelectedBlocks().forEach(function(elm){
elm.remove();
});
// selObj.setRng(selrng,true);
editor.insertContent(dv.innerHTML);
editor.nodeChanged();
}
else {
editor.notificationManager.open({
text: 'Please select two table.',
type: 'error'
});
}
}
else {
editor.notificationManager.open({
text: 'Please select two table.',
type: 'error'
});
}
}
editor.ui.registry.addButton('mergeTable', {
text: "MergeTable",
onAction: function(){ Merge();}
});
});
}());
}());

javascript interactive stack which can push and pop using browser window

I am trying to make an interactive stack application using javascript in browser but I cannot clear my console after every actions.
<script>
var st1 = 10;
var stk1 = new Array(10);
var count = 0;
function push1(v) {
if (st1 === 0) {
rpiseconsole.log("Stack Overflow");
}
else {
st1 = st1 - 1;
stk1[st1] = v;
print1();
}
}
function pop1() {
var temp = stk1[st1];
st1 = st1 + 1;
print1();
return temp;
}
function print1() {
for (var i = st1; i < 10; i++) {
rpiseconsole.log(stk1[i]);
}
};
function doJob() {
var x = document.getElementById("t").value;
push1(x);
document.getElementById("t").value = "";
}
function doJob1() {
var p = pop1();
document.getElementById("t1").value = p;
}
</script>
I am expecting that every time I click on the push button it will print the array of stack and clear the previous results in the console and when I click on the pop button it will take out the last data and print the remaining array into the textarea.
I cannot get the clear option in console and I cannot output my array to the textarea in the same order as I put items into the stack.
Write a method clearConsole() and invoke it before every print command
function clearConsole() {
document.getElementById( "rpiseconsole" ).innerHTML = "";
}
Demo
var st1 = 10;
var stk1 = new Array(10);
var count = 0;
function push1(v) {
if (st1 === 0) {
rpiseconsole.log("Stack Overflow");
} else {
st1 = st1 - 1;
stk1[st1] = v;
print1();
}
}
function pop1() {
var temp = stk1[st1];
st1 = st1 + 1;
print1();
return temp;
}
function print1() {
clearConsole();
for (var i = st1; i < 10; i++) {
rpiseconsole.log(stk1[i]);
}
};
function doJob() {
var x = document.getElementById("t").value;
push1(x);
document.getElementById("t").value = "";
}
function doJob1() {
var p = pop1();
document.getElementById("t1").value = p;
}
function clearConsole() {
document.getElementById( "rpiseconsole" ).innerHTML = "";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">
</script>
<div>Procedural Stack with Tight Coupling</div>
<div id="rpisesetup">
<textarea id="rpiseconsole"></textarea>
<script src="https://sites.google.com/a/rajeshpatkar.com/library/hub/rpiseconsole.js">
</script>
<textarea id="t"></textarea>
<textarea id="t1"></textarea>
<button onclick="doJob()">push</button>
<button onclick="doJob1()">pop</button>
</div>

Transmitting a value from one function to another

This issue is asked already some times. But in the application of google apps script i can't solve this problem.
function two ()
{
var bridgeclubs = SpreadsheetApp.openById("1dfyI1jbz..........TVg4OoixKTz1");
var bridgeclubs_sheet = bridgeclubs.getSheetByName("Sheet1");
var data_bridgeclubs = bridgeclubs_sheet.getDataRange().getValues();
var numRows = bridgeclubs_sheet.getDataRange().getNumRows();
var sprshtname = SpreadsheetApp.getActiveSpreadsheet().getName();
for (var i=1; i<=numRows; i++)
{
if (sprshtname == data_bridgeclubs[i][6])
{
var A = i;
break;
}
}
}
In function one I do a call to function two, where I need this value A:
function one ()
{
two ();
//here I need this value A;
var C= 35 * A;for instance
}
Who can help me?
You can return value from function using return i; and obtain it in within one by var A = two();.
function two() {
var bridgeclubs = SpreadsheetApp.openById("1dfyI1jbz..........TVg4OoixKTz1");
var bridgeclubs_sheet = bridgeclubs.getSheetByName("Sheet1");
var data_bridgeclubs = bridgeclubs_sheet.getDataRange().getValues();
var numRows = bridgeclubs_sheet.getDataRange().getNumRows();
var sprshtname = SpreadsheetApp.getActiveSpreadsheet().getName();
for (var i=1; i<=numRows; i++) {
if (sprshtname == data_bridgeclubs[i][6]) {
return i;
}
}
}
function one() {
var C;
var A = two();
if (A) {
C = 35 * A;
}
}
You can use global variables.
var A;
function two() {
var bridgeclubs = SpreadsheetApp.openById("1dfyI1jbz..........TVg4OoixKTz1");
var bridgeclubs_sheet = bridgeclubs.getSheetByName("Sheet1");
var data_bridgeclubs = bridgeclubs_sheet.getDataRange().getValues();
var numRows = bridgeclubs_sheet.getDataRange().getNumRows();
var sprshtname = SpreadsheetApp.getActiveSpreadsheet().getName();
for (var i=1; i<=numRows; i++) {
if (sprshtname == data_bridgeclubs[i][6]) {
A = i;
break;
}
}
}
function one() {
two();
var C= 35 * A;
}

Send object this to functions that take No-arguments

How can i send parameter this to function.
Above options work in constructor :
selectors[i].onblur = this.validation;
But if in function Valid i call the selectors[i].validation, above solution will not working. Does Somebody know, how to call selectors[i].validation with parameter this??
For any help, i will be very grateful.
link to demo:
http://codepen.io/anon/pen/YqryVr
My js classes:
var Validator = (function () {
var errorClassName = "error";
var selectors;
var regexMap;
function Validator(id, regexObject) {
if (id === void 0) { id = "form"; }
regexMap = regexObject.getMap();
selectors = document.getElementById(id).elements;
for (i = 0; i < selectors.length; ++i) {
selectors[i].onblur = this.validation;
}
};
Validator.prototype.setErrorClassName = function (className) {
errorClassName = className;
};
Validator.prototype.addClass = function (selector) {
if(selector.className.indexOf(errorClassName) < 1)
selector.className += " " + errorClassName;
};
Validator.prototype.removeClass = function (selector) {
selector.className = selector.className.replace(errorClassName, '');
};
Validator.prototype.validation = function () {
alert('this.type: ' + this.type);
switch(this.type) {
case 'textarea':
case 'text':
if(this.dataset.regex in regexMap) this.dataset.regex = regexMap[this.dataset.regex];
var pattern = new RegExp(this.dataset.regex);
if(this.value.length !== 0 && pattern.test(this.value)) {
Validator.prototype.removeClass(this);
return true;
} else {
Validator.prototype.addClass(this);
return false;
}
break;
case 'select-one':
if(this.value.length === 0) {
Validator.prototype.addClass(this);
return false;
} else {
Validator.prototype.removeClass(this);
return true;
}
break;
}
return true;
};
Validator.prototype.valid = function () {
for (i = 0; i < selectors.length; ++i) {
selectors[i].validation;
}
return true;
};
return Validator;
}());
var SelectorAttribute = (function () {
function SelectorAttribute(name, regex) {
this.name = name;
this.regex = regex;
}
SelectorAttribute.prototype.toString = function () {
return "name: " + this.name + ", regex = " + this.regex;
};
return SelectorAttribute;
}());
var StandardRegexPatterns = (function () {
var map = {};
function StandardRegexPatterns() {
map['zip-code-poland'] = '^[0-9]{2}-[0-9]{3}$';
map['phone-number-poland'] = '^[0-9]{9}$';
map['digits'] = '^[0-9]+$';
map['alpha'] = '^[a-zA-z]+$';
map['email'] = '^[-a-z0-9~!$%^&*_=+}{\'?]+(\.[-a-z0-9~!$%^&*_=+}{\'?]+)*#([a-z0-9_][-a-z0-9_]*(\.[-a-z0-9_]+)*\.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,5})?';
map['login'] = '^[a-z0-9_-\.]{3,21}$';
map['ip-address'] = '^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$';
map['url-address'] = '^((http[s]?|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+[^#?\s]+)(.*)?(#[\w\-]+)?$';
}
StandardRegexPatterns.prototype.getMap = function () {
return map;
};
return StandardRegexPatterns;
}());
$( document ).ready(function() {
var validator = new Validator('form', new StandardRegexPatterns());
validator.setErrorClassName("error");
//var pattern = new StandardRegexPatterns();
// alert(Object.keys(pattern.getMap()));
$("button").on('click', function(){
alert(validator.valid());
});
});
You can use the following:
functionname.apply(this, [arguments]);
or
functionname.call(this, argument1, argument2);
if you don't have arguments you can just omit them.
I usually just do this:
funcitonname.apply(this, Arguments);
if I'm calling this method from within a function already so I can carry on the arguments to the functionname().
Learn more about apply
Learn more about call

Javascript refactor

Is there a better way to write this function? I've inherited some javascript code and I'd like to make this more concise if possible. Also, I'll probably be adding many more "theme" elements and don't want to copy and paste over and over.
function imageClick() {
var theme1 = document.getElementById("li-theme1");
var theme2 = document.getElementById("li-theme2");
var theme3 = document.getElementById("li-theme3");
var imgtheme1 = theme1.getElementsByTagName("img");
var imgtheme2 = theme2.getElementsByTagName("img");
var imgtheme3 = theme3.getElementsByTagName("img");
var inputtheme1 = document.getElementById("radiotheme1");
var inputtheme2 = document.getElementById("radiotheme2");
var inputtheme3 = document.getElementById("radiotheme3");
imgtheme1[0].onclick = function() {
inputtheme1.checked = true;
highlightChoice("li-theme1");
}
imgtheme2[0].onclick = function() {
inputtheme2.checked = true;
highlightChoice("li-theme2");
}
imgtheme3[0].onclick = function() {
inputtheme3.checked = true;
highlightChoice("li-theme3");
}
}
function imageClick()
{
for (var i=1; i<4; i++)
{
var theme = document.getElementById("li-theme"+i);
var imgtheme = theme.getElementsByTagName("img");
imgtheme[0].onclick = (function (current)
{
return function()
{
document.getElementById("inputtheme"+current) = true;
highlightChoice("li-theme"+current);
}
})(i);
}
}
If you want to add more iterations at the later date, just increase the 4 in i<4 to the number of iterations you'd like to perform + 1.
I've "hardcoded" the imageClick() function to the ones that you've specified, but you could change this to be a "for(var i=1;i<4;i++) {imageClickItem(i);}" type loop if you wished.
function imageClick()
{
imageClickItem(1);
imageClickItem(2);
imageClickItem(3);
}
function imageClickItem(itemNumber)
{
var theme = document.getElementById("li-theme" + itemNumber);
var imgtheme = theme.getElementsByTagName("img");
var inputtheme = document.getElementById("radiotheme" + itemNumber);
imgtheme[0].onclick = function()
{
inputtheme.checked = true;
highlightChoice(theme.id);
}
}

Categories