I'm certain I'm doing something stupid, or missing something silly but I get the follow 2 error messages, from client side onClick of a button:
Cannot set property 'class' of undefined
Cannot set property 'scrollTop' of null
All I'm trying to do is style an inputTextArea, and then scroll to the top of a scrollable content div that I have.
document.getElementById(x$("#{id:obj1Error}").Attributes["class"] = "has-error");
var myDiv = document.getElementById(x$("#{id:contentWhiteBackground}"));
myDiv.scrollTop = 0;
Any pointers appreciated. Cheers
UPDATE:
Client code on button:
// Make sure user has entered content into the first objective at minimum
var objcolparent = document.getElementById("ObjColOuter").children[0];
var objValue = objcolparent.getElementsByTagName("TEXTAREA")[0].value;
if(objValue ==""){
var o = {};
o.title = "Validation Failed";
o.body = "You must enter at least one objective before submitting";
o.alertIcon = "fa-thumbs-down fa-lg";
o.alertType = "danger";
var myDiv = document.getElementById("#{id:contentWhiteBackground}");
//document.getElementById("#{id:obj1Error}").className = "has-error";
myDiv.scrollTop = 0;
bootAlert.show('alertServer',JSON.stringify(o));
return false;
}
if(confirm("Are you sure you want to submit your objectives?")){
return true;
}else{
return false;
}
Code on xpage, which contains the obj1Error div:
<xp:repeat id="repeat1" rows="100"
value="#{viewScope.fields}" var="fieldName">
<xp:text escape="true"
id="computedField4" styleClass="h5">
<xp:this.value><![CDATA[#{javascript:"Objective "+#RightBack(fieldName, 16)}]]></xp:this.value>
</xp:text>
<br />
<xp:div id="obj1Error">
<xp:text escape="true"
id="computedField1" styleClass="h6">
<xp:this.value><![CDATA[#{javascript:"Details"}]]></xp:this.value>
</xp:text>
<xp:inputTextarea
id="inputTextarea1" style="height:100px;resize:none;"
showReadonlyAsDisabled="true">
<xp:this.value><![CDATA[#{document1[fieldName]}]]></xp:this.value>
<xp:this.disabled><![CDATA[#{javascript:try{
var strStatus:string = document1.getItemValueString("status");
var booDisabled:boolean = true;
if(strStatus == "New" || strStatus == "Draft" || strStatus == "Returned") {
booDisabled = false;
}
return booDisabled;
}catch(e){
writeToLog("Error - ccObjectives disable objective details: " + e);
}}]]></xp:this.disabled>
</xp:inputTextarea>
</xp:div>
<br />
</xp:repeat>
You just need to write
var myDiv = document.getElementById("#{id:contentWhiteBackground}");
to get the DOM element.
To set an element's class(es) you have to write:
document.getElementById("#{id:obj1Error}").className = "has-error";
I would recommend to work with the dojo toolkit in xpages instead of native javascript:
dojo.addClass('#{id:obj1Error}','has-error');
var myDiv = dojo.byId('#{id:contentWhiteBackground}');
myDiv.scrollTop = 0;
Related
I need to get the id of an element within a form so I can tag the element as "false" or "true". Or, alternately, I need a way to associate a name with an element that can I pull in javascipt so I can change the associated value.
var form = document.getElementById("myForm");
form.elements[i].value
Those lines of code is what I tried but it doesn't seem to work.
Edit:
function initial(){
if (localStorage.getItem("run") === null) {
var form = document.getElementById("myForm").elements;
for(var i = 0; i < 1 ; i++){
var id = form.elements[i].id;
sessionStorage.setItem(id,"false");
}
localStorage.setItem("run", true);
}
}
So basically when I run the page, I want a localStorage item attached to all the buttons on the screen. I want this to run once so I can set all the items to false. Problem is I don't know how to get the ids so I have a value to attach to the button. Any idea of how to accomplish a task like this.
Edit2:
function initial(){
if (localStorage.getItem("run") === null) {
var form = document.getElementById("myForm");
var tot = document.getElementById("myForm").length;
for(var i = 0; i < tot ; i++){
sessionStorage.setItem(form.elements[i].id,"false");
}
localStorage.setItem("run", true);
}
}
This is the new code. It mostly seems to work but for some reason only the first value is getting set to false. Or maybe it has to do with this function, I'm not sure.
function loader(){
var form = document.getElementById("myForm");
var tot = 5;
for(var i = 0; i < 5 ; i++){
if(sessionStorage.getItem(form.elements[i].id) === "true"){
document.getElementById(form.elements[i].id).style.backgroundColor = "green";
return ;
}else{
document.getElementById(form.elements[i].id).style.backgroundColor = "red";
return false;
}
}
}
Anyways, I'm running both of these at the same time when the page is executed so they are all set to false and turn red. But when a button is properly completed, the color of the button turns green.
It's available via the id property on the element:
var id = form.elements[i].id;
More on MDN and in the spec.
Live Example:
var form = document.getElementById("myForm");
console.log("The id is: " + form.elements[0].id);
<form id="myForm">
<input type="text" id="theText">
</form>
You're already storing all the elements in the form so it must be :
var form = document.getElementById("myForm").elements;
var id = form[i].id;
Or remove the elements part from the form variable like :
var form = document.getElementById("myForm");
var id = form.elements[i].id;
I am trying to call another function inside the getElement but it is not working everything when i change my selection. When i select Car, in the textbox my varxumb should populate. Any idea...
document.getElementById("mycall1").insertRow(-1).innerHTML = '<td><select id = "forcx" onchange="fillgap()"><option>Select</option><option>Force</option><option>Angle</option><option>Area</option></select></td>';
function fillgap() {
var xnumb = 20;
var forcxlist = document.getElementById("forcx");
if (forcxlist == "Force") {
document.getElementById("result1").value = xnumb;
}
}
I don't know how this "Force" value is coming to check.
you can try these solutions.
if (forcxlist == "Force")
instead use
var forcxlistText = forcxlist.options[forcxlist.selectedIndex].text;
if (forcxlistText == "Force")
or use value technique
<div id ="mycall1">
</div>
<div id ="result1">
</div>
<script>
document.getElementById("mycall1").innerHTML = '<td><select id = "forcx" onchange="fillgap(this.value)"><option value="1">Select</option><option value="2">Force</option><option value="3">Angle</option><option value="4">Area</option></select></td>';
function fillgap(value){
var xnumb = 20;
if (value == "2"){
document.getElementById("result1").innerHTML = xnumb;
}
}
</script>
or use
<div id ="mycall1">
</div>
<input type="text" id="result1" value=""/>
<script>
document.getElementById("mycall1").innerHTML = '<td><select id = "forcx"><option value="1">Select</option><option value="2">Force</option><option value="3">Angle</option><option value="4">Area</option></select></td>';
document.getElementById("forcx").onchange = function (){
var xnumb = 20;
var forcxlist = document.getElementById("forcx");
var forcxlistValue = forcxlist.options[forcxlist.selectedIndex].value;
if (forcxlistValue == "2"){
document.getElementById("result1").value = xnumb;
}
}
</script>
The forcxlist variable is an element object, returned by the document.getElementById method. Afterwards, you are checking if this element object is equal to "Force", which is a string (meaning the contents of your if block will never be executed). Did you mean to check if the contents of that object are equal to Force?
Instead of
if (forcxlist == "Force"){
use
if (forcxlist.innerHTML == "Force"){
I hope this helps!
Can't use innerHTML so i changed it to .value
document.getElementById("result1").value = xnumb;
There are a couple issues here.
First, you are expecting forcxlist to be a string, not an element, so you need to use .value to get the selected value of the dropdown.
Second, you should do your comparison with === not ==, as this ensures type equality as well, and is best practice.
I would also recommend building your select using HTML elements. It keeps things cleaner, is more readable, and is easier to maintain.
Since you are using the same id for the select, you would have to change the selector in your fillgap handler to var forcxlist = e.target.value;, this way the event will fire based on only the select that you are interacting with, regardless of how many rows you have in the table.
Updated code is below, and an updated working fiddle here. As per your comment about adding additional rows, the fiddle has this working as well.
<input type="button" value="Add Row" onclick="addDropDown()">
<table id="mycall1"></table>
<script>
function addDropDown() {
var tbl = document.getElementById("mycall1");
var newRow = tbl.insertRow(-1);
var newCell = newRow.insertCell(0);
newCell.appendChild(createDropDown("forcx", fillgap));
}
function createDropDown(id, onchange) {
var dd = document.createElement('select');
dd.id = id;
dd.onchange = onchange;
createOption("Select", dd);
createOption("Force", dd);
createOption("Angle", dd);
createOption("Area", dd);
return dd;
}
function createOption(text, dropdown) {
var opt = document.createElement("option");
opt.text = text;
dropdown.add(opt);
}
function fillgap() {
var xnumb = 20;
var forcxlist = e.target.value;
if (forcxlist === "Force") {
document.getElementById("result1").value = xnumb;
}
}
</script>
<input type="text" id="result1">
i've got a chat (without any design until now)
<div id="chatHtml">
<input type="text" id="input-text-chat" placeholder="Enter Text Chat">
<div id="chat-container">
<div id=chatOutput class="chat-output"></div>
</div>
</div>
Now I have a button, which calls ja javascript function to open a new window
<button type="button" v-on:click="openChat">open chat</button>
openChat: function() {
win = top.consoleRef = window.open('', 'myconsole',
'width=350,height=250' +
',menubar=0' +
',toolbar=1' +
',status=0' +
',scrollbars=1' +
',resizable=1')
chat = document.getElementById("chatHtml").innerHTML;
win.document.write(chat);
}
And last there is the code that the chat is working
document.getElementById('input-text-chat').onkeyup = function(e) {
if (e.keyCode != 13) return;
// removing trailing/leading whitespace
// this.value = this.value.replace(/^\s+|\s+$/g, '');
if (!this.value.length) return
connection.send(this.value);
console.log(connection.send);
console.log(this.value);
appendDIV(this.value);
this.value = '';
};
var chatContainer = document.querySelector('.chat-output');
function appendDIV(event) {
var div = document.createElement('div');
div.innerHTML = event.data || event;
chatContainer.insertBefore(div, chatContainer.firstChild);
div.tabIndex = 0;
div.focus();
document.getElementById('input-text-chat').focus();
win.document.write(chatContainer.innerHTML);
}
My Problem:
The chat is not working in the new window but on the "index window" it is.
Im completely new to javascript and i dont know whats the problem.
I thik its because of the ID's or sth.
Can sb help me, that i can use the chat in the new window?
Thanks :)
the input of your new page hasn't have event yet so bind it's event
just add this
openChat: function(){
win =top.consoleRef=window.open('','myconsole',
'width=350,height=250'
+',menubar=0'
+',toolbar=1'
+',status=0'
+',scrollbars=1'
+',resizable=1')
chat = document.getElementById("chatHtml").innerHTML;
win.document.write(chat);
win.document.getElementById('input-text-chat').onkeyup = function(e) {
if (e.keyCode != 13) return;
// removing trailing/leading whitespace
// this.value = this.value.replace(/^\s+|\s+$/g, '');
if (!this.value.length) return
connection.send(this.value);
console.log(connection.send);
console.log(this.value);
appendDIV(this.value);
this.value = '';
};
}
after
win.document.write(chatContainer.innerHTML);
also it's better if you put a name it that event to lessen your code
folks!
I've a litte problem, this is the situation:
Tree View
I let the tree on basis of the "lvl" create. That means, Bereich ABC is lvl1, Test1.docx is lvl4 and so on. So it's a "fake" Tree. But i have just this lvl information for every object.
I have to check the checkbox if the parent is clicked. that means, if lvl3 is clicked (for example "Originale") the lvl4 and lvl5 have to be checked also.
Do you understand what i mean? I hope so. But i can't make it working. Do you have any ideas?
$('[class^=lvl]').click(function(){
var keepChecking = true;
var currentElement = $(this);
var clickedLevel = getLevel(currentElement);
var checkValue = currentElement.is(':checked');
while (keepChecking) {
currentElement.attr('checked' , checkValue);
// get next element
currentElement = getNextCheckbox(currentElement);
var currentLevel = getLevel(currentElement);
keepChecking = (currentLevel > clickedLevel);
}
});
function getNextCheckbox(checkbox) {
return checkbox.parent().parent().next().children(":first").children(":first");
}
function getLevel(checkbox) {
var currentClass = checkbox.attr('class');
var currentLvl = currentClass.substring(3, currentClass.length);
return parseInt(currentLvl);
}
<TD class="center">
<INPUT TYPE="checkbox" NAME="" class="lvl[LL_REPTAG=PFADLEVEL /] docCheck" VALUE="[LL_REPTAG=DataId /]">
</TD>
I changed your javascript code to this:
function getNextCheckbox(checkbox) {
return checkbox.parent().parent().next().children(":first").children(":first");
}
function getLevel(checkbox) {
var currentClass = checkbox.attr('class');
if (currentClass){
var currentLvl = currentClass.substring(3, currentClass.length);
return parseInt(currentLvl);
}else{
return false;
}
}
$('[class^=lvl]').click(function(){
var currentElement = $(this);
var clickedLevel = getLevel(currentElement);
var checkValue = currentElement.is(':checked');
nextElement = getNextCheckbox(currentElement);
while ( getLevel(nextElement)>clickedLevel) {
currentElement=nextElement;
currentElement.prop('checked' , checkValue);
nextElement = getNextCheckbox(currentElement);
}
});
You can also play with it here: https://jsfiddle.net/1r73vy7z/1/
Enjoy :)
Currently I have a working app that could change the values of the buttons depending on the button clicked. It is written using javascript (in script.js). However I want to make it nicer so i am trying to use jQuery instead. However, when i insert the jQuery js and css file to index.html, the buttons' values are gone and i don't know how to change it completely to jQuery without affecting its function.
here is part of the original javascript: (let me know if you want to see the whole script)
ajax_status.onreadystatechange = function() {
if(ajax_status.readyState == 4 && ajax_status.status == 200) {
if(ajax_status.responseText == "ready_vid") {
document.getElementById("video_button").disabled = false;
document.getElementById("video_button").value = "record video start";
document.getElementById("video_button").onclick = function() {send_cmd("ca 1");};
document.getElementById("image_button").disabled = false;
document.getElementById("image_button").value = "record image";
document.getElementById("image_button").onclick = function() {send_cmd("im");};
document.getElementById("timelapse_button").disabled = false;
document.getElementById("timelapse_button").value = "timelapse start";
document.getElementById("timelapse_button").onclick = function() {send_cmd("tl " + (document.getElementById("tl_interval").value*10));};
document.getElementById("md_button").disabled = false;
document.getElementById("md_button").value = "motion detection start";
document.getElementById("md_button").onclick = function() {send_cmd("md 1");};
document.getElementById("halt_button").disabled = false;
document.getElementById("halt_button").value = "stop camera";
document.getElementById("halt_button").onclick = function() {send_cmd("ru 0");};
document.getElementById("mode_button").disabled = false;
document.getElementById("mode_button").value = "change mode to image";
document.getElementById("mode_button").onclick = function() {send_cmd("pm");};
halted = 0;
}
else if(ajax_status.responseText == "ready_img") {
document.getElementById("video_button").disabled = true;
document.getElementById("video_button").value = "record video start";
document.getElementById("video_button").onclick = function() {};
document.getElementById("image_button").disabled = false;
document.getElementById("image_button").value = "record image";
document.getElementById("image_button").onclick = function() {send_cmd("im");};
document.getElementById("timelapse_button").disabled = false;
document.getElementById("timelapse_button").value = "timelapse start";
document.getElementById("timelapse_button").onclick = function() {send_cmd("tl " + (document.getElementById("tl_interval").value*10));};
document.getElementById("md_button").disabled = true;
document.getElementById("md_button").value = "motion detection start";
document.getElementById("md_button").onclick = function() {};
document.getElementById("halt_button").disabled = false;
document.getElementById("halt_button").value = "stop camera";
document.getElementById("halt_button").onclick = function() {send_cmd("ru 0");};
document.getElementById("mode_button").disabled = false;
document.getElementById("mode_button").value = "change mode to video";
document.getElementById("mode_button").onclick = function() {send_cmd("vm");};
halted = 0;
}
HTML in index.html:
<input id="video_button" type="button">
<!--<button data-role="none" id="video_button"></button>
<button class="ui-btn ui-btn-inline" id="image_button"></button> //this is wad i tried-->
<input id="image_button" type="button">
<input id="timelapse_button" type="button">
<input id="md_button" type="button"><br>
<input id="halt_button" type="button">
<input id="mode_button" type="button">
I have some other jQuery scripts in index.html. The above javascript in in another file called script.js. My question is, do i also insert the link for jQuery.js in that script.js? And how about $(document).ready(function()? Do i put it in the script.js too?
For minimal change you can do following,
include the jquery library in tag as
<script type="text/javascript" src="static/jquery-1.10.2.min.js"></script>
replace document.getElementById('id') to $('#id').
document.getElementById("video_button") => $('#video_button')
Anything after the document.getElementById() get bit different in jquery
document.getElementById("video_button").disabled = false;
$('#video_button').removeAttr('disabled');
document.getElementById("video_button").value = "record video start";
$('#video_button').val('record video start');
document.getElementById("image_button").onclick = function() {send_cmd("im");};
$('#image_button').click(function() {send_cmd("im");});
references
https://api.jquery.com/removeAttr/
http://api.jquery.com/val
http://api.jquery.com/click/