I have a drop down list [ Incident, Question, Problem, Task]. I have written a code when an end user logins in and has a tag called product the default value should be problem. However it does not seem to work. It still gives the user the option to select values from the list.
$j(document).ready(function() {
if(location.pathname == '/requests/new') {
var ct = currentUser.tags;
if(ct.indexOf("product") >= 0){
$j(document.getElementById("ticket_fields_75389").value = "Problem");
}
else {
$j(document.getElementById("ticket_fields_75389").value = "");
}
}
})
Note: This answer is incorrect. I will delete it once I know the OP read my comment.
It still gives the user the option to select values from the list.
Well, of course, setting value will only change the initially selected value. If you want "fix" the value of the select element, so that the user cannot change it, you have to make it read-only. Lets stick with jQuery (what you have is a weird mix of DOM API and jQuery †):
$j("#ticket_fields_75389").val("Problem").prop('readonly', true);
†: Let's have a close look at the line
$j(document.getElementById("ticket_fields_75389").value = "Problem");
What exactly is happening here? Obviously we have a function call ($j(...)) and we pass something to it. This "something" is the result of the expression
document.getElementById("ticket_fields_75389").value = "Problem"
This finds an element by ID and assigns the string "Problem" to the value property. This is an assignment expression. The result of an assignment expression is the assigned value, i.e. "Problem".
That is the value that is passed to $j(...), so we have $j("Problem");. Since $j refers to jQuery, this would search for all elements with tag name Problem, which does not exist in HTML. It would also return a jQuery object, but you are not doing anything with it.
Hence the wrapping in $j(...) is completely unnecessary or even wrong, even though it doesn't throw a syntax or runtime error.
Related
In our (hybris) shop some products have a yform to summarize the parts of the product. Is there an easy way to copy the value of the sum field into an other field (automaticly) like the productquantity (no yForm)?
I guess I need javascript, but the id of the sumfield is generatad, so I don't know how to get the sum. Also my Javascript abilities are quite limited...
UPDATE:
To get the value I use this part of code:
copyYFormValueToProductQuantity : function() {
var copyText = document.querySelector('input[id*="sum"]').value
if (copyText > 0 && copyText != null)
{
//do stuff
}
console.log("Copied value: " + copyText)
},
But this line
document.querySelector('input[id*="sum"]').value
returns null. If I use it in the browserconsole, it also returns null. But after I inspected the element it works and returns the value I want to. So I guess I am missing some JS-basics here and the object isn't ready before?
Btw.: I call this function with a keydown-eventlistener.
This can most likely be done from the jsp files. There you have all the data that is needed, so you most likely need to only copy that field where you need it.
We can also help you more if you add some code examples here (what exactly is that yform?). If you struggle to find where in code is that specific yform created/added, it's always worth giving a try to search for the applied classes of the html (search the entire project and see what you find).
As I understand your question, you are saying that you want to copy the value of a yForm field named sum into a non-yForm field named productquantity, and you are asking specifically about how to access the value of a yForm field from JavaScript. If I understand this correctly, you can do so by calling the following JavaScript API:
ORBEON.xforms.Document.getValue("sum");
You can find more about this and other related API on Client-side JavaScript API.
At the top of my JavaScript document, which is linked to an HTML page, I declared:
var pizzaVar;
Then, I have a function later in the code that sets the variable's value and then calls another function:
function makePizza()
{
pizzaVar = document.getElementById("pizzaDiv").innerHTML;
givePizzaToppings();
}
But when I tried to use pizzaVar in the next function to set the innerHTML of pizzaDiv, nothing happened:
function givePizzaToppings()
{
var toppings = "<p>Onions and Bacon</p>";
pizzaVar = toppings;
}
However, if I changed the last line to
document.getElementById("pizzaDiv").innerHTML = toppings;
it worked. I don't want to have to put that in everytime I want to change pizzaDiv though, is there a way to fix this.
PS: I tried saying
var pizzaVar= document.getElementById("pizzaDiv").innerHTML;
outside of the functions but I got an error message saying:
TypeError: null is not an object(evaluating 'document.getElementById("pizzaDiv").innerHTML')
Your pizzaVar will point to a string value, which will be the HTML at the time of the assignment. It doesn't magically setup a link to change it.
If you wanted to use this global variable, you'd be better off pointing it to the div element and then using innerHTML every time you wanted to change its value.
Then you should research to understand why innerHTML is rarely the best tool to modify the DOM.
Unfortunately, whenever you want to change the .innerHtml of your pizza div, you're going to have to write document.getElementById("pizzaDiv").innerHTML on the left side of an equals sign. pizzaVar is not a pointer, and doesn't point to the .innerHtml of the div.
The error you got is telling you that document.getElementById("pizzaDiv") returned null and hence has no properties at all, much less an .innerHtml property. This is because it did not exist at the time of the .getElementById call.
I'm using a script template to create chunks of code when a user clicks a button, this works fine, but I want to be able to calculate a total within these cloned regions so I have a in-line onBlur statement as follows
onblur = "multiply.call(this, this.form.elements.Qty{{ID}}.value, this.form.elements.Cost{{ID}}.value, this.form.elements.Total{{ID}})"
As the cloning function updates ID to a value this evaluates to
onblur = "multiply.call(this, this.form.elements.Qty1.value, this.form.elements.Cost1.value, this.form.elements.Total1)"
My function is
function multiply(one, two, three) {
console.dir(three);
document.getElementById(three).value = (parseFloat(one) + parseFloat(two)).toFixed(2); // error here
};
If I display one and two they have the values from the form, however I get an error writing back to the for of Uncaught TypeError: Cannot set property 'value' of null.
The console shows the ID of the element three as Total1
I think this might be something to do with the jQuery clone and the DOM not being updated. The values are passed OK, but the object might not be.
Any ideas?
document.getElementById(three) returns no match (thus the undefined).
You're passing an element to your function multiply as parameter three, and you're later using it as a string representing the ID of it.
If three is verified to be an element, don't call document.getElementById(three).value in first place, but directly three.value.
I have a trouble getting value from text box. Conventional javascript getElementByName returns error :undefined. I was able to use jQuery in other examples with select. But can't find a reference anywhere about input tags. This line shows syntax error:
var total = = $('input[name='+formQty+'] :text').val();
What is a jquery for picking value/text of a textbox?
you have 2 equal signs.
var total = $('input[name='+formQty+'] :text').val();
It might be easier also to stick an ID attribute on the input tag and use this
var total = $('#myInputId').val();
make sure you are calling it from a loaded dom:
$(function() {
var total = $('#myInputId').val();
});
From what I understand your query selector is incorrect.
It should be 'input[name='+formQty+']:text' the :text as you have it is trying to select any text elements underneath the current input resulting in nothing. You can even get rid of the :text and only select the element based on name. .val() should then work if you have properly selected the input element.
You should also debug this by just performing the $('...') method without the function call and see what elements are returned.
Regarding your problem getting this to work with getElementByName() - that's probably because the method is actually getElementsByName() - note the plural elementS. It returns a list of all elements with the specified name, accessible via array syntax; even if there is only one matching element you still get a list (with only one thing in it).
If you are sure there will be exactly one element with the specified name you can do this:
var elementValue = document.getElementsByName(name)[0].value;
I'm using 1 js for 2 different pages. 1 page doesn't have a div which the other does. So when I submit the values, I get a $( js error
for
$('.description'+save_id+'').html(description_val).show(); //update category description
I suspect that I get the error because there is nothing to show(). Is there a short code I can use to detect if the div.description exists otherwise don't do the function?
jQuery will not error if it has nothing to perform on. The show() would not be a problem. To answer your question, though, you can check the length property on the jQuery object returned from $.
If the description_val variable is undefined, then the code will fail.
Try using an if() statement to only run the code if description_val is not undefined.
if(description_val) {
$('.description'+save_id+'').html(description_val).show();
}
Or if for some reason the value of description_val may be a value that would equate to false, then do this:
if(description_val !== undefined) {
$('.description'+save_id+'').html(description_val).show();
}
From what you posted I'd check to make sure the variables you're using are all defined at this stage. To check for existence you can do this:
if ($('.description' + save_id).size() > 0) {
// code here that operates on the div.
}
This is essentially just a syntactic alternative to checking the length property.