I have what should be a simple answer. I have a drag and drop style multiple choice question on Qualtrics. I have recoded the answers as I wish. I think it assigns to each answer a variable like QID15_1 QID15_2 QID15_3, etc. The outputted data then gives the rank order of that selected option.
So if I ranked them, for example
QID15_3
QID15_1
QID15_2
The value of QID15_3 =1, the value of QID15_1=2, and the value of QID15_2=3.
What is the correct syntax to access these values? I want to set an Embedded Data item with the value of QID15_1, for example (so it should equal 2), but I can't seem to get it correct.
I've tried Qualtrics.SurveyEngine.getSelectedAnswerValue and things like this.
Any help would be appreciated. Thanks!
EDIT: With the help of a friend who knows Java, we figured it out. You can write something like
Qualtrics.SurveyEngine.addOnUnload(function()
{var order=document.getElementById( 'QR~QID15~1' ).getElementsByClassName( 'rank' )[0].innerText;
}
You don't need to set an embedded variable in JavaScript. You can just pipe the value wherever you need it (in a subsequent question, in the survey flow, etc.). It would be:
${q://QIDx/ChoiceNumericEntryValue/y}
where x is the question id and y is the choice id.
EDIT:
You can assign it to an embedded data variable in the survey flow like this:
edvar = ${q://QIDx/ChoiceNumericEntryValue/y}
I am working on a project where I need to reference an unchanging attribute of a product (an item on the site). In the past I have referenced them using the value of an attribute called "data-product". This value is the ID of the product that has been assigned to it by Bigcommerce, so it will never change. Yesterday I discovered the global product_id variable (%%GLOBAL_ProductID%%) so I did a few tests.
When I take the value of the product ID variable and print it to the console:
<span id="the-id-of-the-product">%%GLOBAL_ProductId%%</span>
<script>
var theProductIdNumber = $.trim($('span#the-id-of-the-product').text());
console.log(theProductIdNumber);
</script>
I get a different number then when I inspect the same product and look at the value of the 'data-product' attribute:
Even more confusing, I found one case where the value for %%GLOBAL_ProductID%% what the same number (string) for two different products.
Can you tell me why this is happening? I assumed that using the BC defined global variable would be a more solid method of referencing the product, since thats kind of what it seems like it's for.
As always, your time and help is much appreciated, and I hope you all have a nice day.
I realize this is an old post but I had the same problem today and believe I understand what is going on.
My JavaScript was referencing GLOBAL_ProductId at the bottom of the product.html template. The value was never correct and was also unchanging. Looking deeper, I noticed that it always seemed to be the ID for the last product shown in the Related Products region.
I took the JavaScript variable initialization out of product.html and moved it to ProductDetails.html and the problem was solved. It looks like when the Related Products region is generated, someone decided to recycle the Global_ProductID variable. Or...something like that, yuk.
Your theme may not even include a ProductDetails.html, but if you tinker around with where you initialize variables that reference GLOBAL_ProductID, that might square you away.
I'm trying to have the value of an HTML element equal the value of another. Sounds simple enough but when I try various options, it doesn't work
Here's what I'm trying to do:
I tried a few things. First, I made a javascript function that when they info button is pressed, it simply sets the value of the newname textbox to the title and then I was going to use javascript to trim off the extension. As you can see on the page, it simply outputs {{modal_header}}. I believe this is because when the function is being called, the value hasn't been set yet and that's why it's outputting this. I couldn't find out where else to call the function in order for it to work.
To get around that issue, I tried using PHP to retrieve the name. The only thing I could find related to the name was which in stuck in the value property of newname, but this output only the last file in the directory, no matter what file you selected.
I tried a bunch of different little things, but without any luck. You guys have any ideas?
Website: http://box.endurehosting.com/
HTML: http://pastebin.com/dZ5rKGUY
try this code
$(function(){
var title = $("#title").html();
title = title.substr(0, title.indexOf('.'));
$("#newname").val(title);
})
I'm trying to find a way to inject a new JavaScript functions dynamically without having to do a page reload. I have a form for putting in inventory items and I would like to load or remove functions based on which manufacturer is selected. Trying to research this I thought I could accomplish this with:
document.getElementsByTagName("head")[0].appendChild
The document I was using for examples was taken from http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml. At first I was not sure if it was calling the file and so as a final test I appended the small snippet:
var petname="Spotty"
alert("Pet Name: " + petname)
and to the end of the .js file and received the alert. I was hoping to make this input page modular and dynamic. The reason I need to replace the functions is because each manufacturer uses what is called a "BOM" number which based on the values gives the unit model, condenser, electrical, etc. The scripting as it stands right now uses the onChange feature so on each drop down selection the BOM number is updated with its correct value. Conversely entering in a BOM number will select the values from the drop down menus. The JavaScript functions work as intended with the onChange's if I place it in the 'head' but when using the .appendChild none of the functions work. Should I be using something else for this?
The best approach to your problem is call a single function which accepts BOM number and manufacture type. Then fetch your unit model, condenser, electrical based upon the manufacture type
Javascript:
function GetDetails(bom, manufactureType){
switch(manufactureType){
case 'blah blah' : <do something>
break;
default:break;
}
}
HTML:
<select onchange="javascript:GetDetails(<pass selected BOM here>, <pass selected MANUFACTURER here>);"></select>
Maybe this library will help you http://yepnopejs.com
Using it you are able to load and execute JS files after some conditions.
This has been a question I've had since I started doing serious ajax stuff. Let me just give an example.
Let's say you pull a regular HTML page of a customer from the server. The url can look like this:
/myapp/customer/54
After the page is rendered, you want to provide ajax functionality that acts on this customer. In order to do this, you need to send the id "54" back to the server in each request.
Which is the best/most common way to do this? I find myself putting this in hidden form forms. I find it easy to select, but it also feels a bit fragile. What if the document changes and the script doesn't work? What if that id gets duplicated for css purposes 3 months from now, and thus breaks the page since there are 2 ids with the same name?
I could parse the url to get the value "54". Is that approach better? It would work for simple cases repeatedly. It might not work so well for complex cases where you might want to pass multiple ids, or lists of ids.
I'd just like to know a best practice - something robust that is clean, elegant and is given 2-thumbs up.
I think the best way to do this is to think like you don't have Ajax.
Let's say you have a form which is submitted using Ajax. How do you know what URL to send it to?
The src attribute. Simply have your script send the form itself. All the data is in the form already.
Let's say you have a link which loads some new data. How do you know the URL and parameters?
The href attribute. Simply have the script read the URL.
So basically you would always read the URL/data from the element being acted upon, similar to what the browser does.
Since your server-side code knows the ID's etc. when the page is being loaded, you can easily generate these URLs there. The client-side code will only need to read the attributes.
This approach has more than just one benefit:
It makes it simpler where the URLs and data is stored, because they are put exactly in the attributes that you'd normally find then in HTML.
It makes it easier to make your code work without JavaScript if you want to, because the URLs and all are already in places where the browser can understand them without JS.
If you're doing something more complex than links/forms
In a case where you need to allow more complex interactions, you can store the IDs or other relevant data in attributes. HTML5 provides the data-* attributes for this purpose - I would suggest you use these even if you're not doing HTML5:
<div data-article-id="5">...</div>
If you have a more full-featured application on the page, you could also consider simply storing your ID in JS code. When you generate the markup in the PHP end, simply include a snippet in the markup which assigns the ID to a variable or calls a function or whatever you decide is best.
Ideally your form should work without javascript, so you probably have a hidden form input or something that contains the id value already. If not, you probably should.
It's all "fragile" in the sense that a small change will affect everything, not much you can do about that, but you don't always want to put it in the user's hands by reading the url or query string, which can be easily manipulated by the user. (this is fine for urls of course, but not for everything. Same rules that apply to trusting $_GET and query strings apply here).
Personally, I like to build all AJAX on top of existing, functional code and I've never had a problem "hooking" into what is already there.
Not everything is a form though. For
example, let's say you click a "title"
and it becomes editable. You edit it,
press enter, and then it becomes
uneditable and part of the page again.
You needed to send an ID as part of
this. Also, what about moving things
around and you want those positions
updated? Here's another case where
using the form doesn't work because it
doesn't exist.
All of that is still possible, and not entirely difficult to do without javascript, so a form could work in either case, but I do indeed see what you're saying. In almost every case, there is some sort of unique id, whether it's a database id or file name, that can be used as the "id" attribute of the html that represents it. * Or the data- attribute as Jani Hartikainen has mentioned.
For instance, I have a template system that allows drag/drop of blocks of content. Every block has an id and every area that it can get dropped has one as well. I will use prefixes on the containing div id like "template-area_35" or "content-block_264". In this case, I don't bother to fallback w/o javascript, but it could be done (dropdown-> move this to area for example). In any case, it's a good use of the id attribute.
What if that id gets duplicated for
css purposes 3 months from now, and
thus breaks the page since there are 2
ids with the same name?
If that happens (which it really shouldn't), someone is doing something wrong. It would be their fault if the code failed to work, and they would be responsible. Ids are by definition supposed to be unique.
IMHO putting is at a request parameter (i. e. ?customerId=54) would be good 'cos even if you can't handle AJAX (like in some old mobile browsers, command-line browsers and so) you can still have a reference to the link.
Apparently you have an application that is aware of the entity "Customer", you should reflect this in your Javascript (or PHP, but since you're doing ajax I would put it in Javascript).
Instead of handmaking each ajax call you could wrap it into more domain aware functions:
Old scenario:
var customer_id = fetch_from_url(); // or whatever
ajax("dosomething", { "customer": customer_id }, function () {
alert("did something!");
});
ajax("dosomethingelse", { "customer": customer_id }, function () {
alert("did something else!");
});
New scenario:
var create_customer = function (customer_id) {
return {
"dosomething" : function () {
ajax("dosomething", { "customer": customer_id }, function () {
alert("did something!");
});
},
"dosomethingelse": function () {
ajax("dosomethingelse", { "customer": customer_id }, function () {
alert("did something else!");
});
}
};
}
var customer_id = fetch_from_url(); // or whatever
var customer = create_customer(customer_id);
// now you have a reference to the customer, you are no longer working with ids
// but with actual entities (or classes or objects or whathaveyou)
customer.dosomething();
customer.dosomethingelse();
To round it up. Yes, you need to send the customer id for each request but I would wrap it in Javascript in proper objects.