Here the code which creates options for select tag, i wanted the option value on change the option, i have tried almost everything that i can put in it, but no luck
i can't even see the "selected" attribute in options, i have added the picture of html structure & code. Please share your thoughts on this. Thanks.
Here is the fiddle - https://jsfiddle.net/pa8e47nx/1/
Product.Config.prototype.loadOptions = function() {
this.settings.each(function(element){
element.disabled = false;
element.options[0] = new Option(this.config.chooseText, '');
var attributeId = element.id.replace(/[a-z]*/, '');
var options = this.getAttributeOptions(attributeId);
if(options) {
var index = 1;
for(var i=0;i<options.length;i++){
options[i].allowedProducts = options[i].products.clone();
element.options[index] = new Option(this.getOptionLabel(options[i], options[i].price), options[i].id);
if (typeof options[i].price != 'undefined') {
element.options[index].setAttribute('price', options[i].price);
}
element.options[index].setAttribute('data-label', options[i].label.toLowerCase());
element.options[index].config = options[i];
index++;
}
}
this.reloadOptionLabels(element);
}.bind(this));
},
Related
This is the script present in the html web-page.
jQuery(function($) {
new Shopify.OptionSelectors('productSelect', {
product: {
"id":626976579,
"title":"changedMacbook Air",
"handle":"macbook-air",
"description":"\u003cp\u003elightweight \u003c\/p\u003e\n\u003cp\u003eawesome performance\u003c\/p\u003e\n\u003cp\u003ewow display\u003c\/p\u003e\nHello World626976579[\"78000.00\"] [\"78000.00\"]\\n[\"78000.00\"] [\"78000.00\"]\u003cbr\u003e[\"78000.00\"]\u003cbr\u003e626976579\u003cbr\u003e626976579\u003cbr\u003e626976579",
"published_at":"2015-05-25T02:39:00-04:00",
"created_at":"2015-05-25T02:40:44-04:00",
"vendor":"Test_Store",
"type":"Computers",
"tags":[],
"price":7800000,
"price_min":7800000,
"price_max":7800000,
"available":true,
"price_varies":false,
"compare_at_price":null,
"compare_at_price_min":0,
"compare_at_price_max":0,
"compare_at_price_varies":false,
"variants":[{"id":1754837635,"title":"Default Title","options":["Default Title"],"option1":"Default Title","option2":null,"option3":null,"price":7800000,"weight":800,"compare_at_price":null,"inventory_quantity":-29,"inventory_management":null,"inventory_policy":"deny","available":true,"sku":"20","requires_shipping":true,"taxable":true,"barcode":"","featured_image":null}],"images":["\/\/cdn.shopify.com\/s\/files\/1\/0876\/1234\/products\/overview_wireless_hero_enhanced.png?v=1432536113"],"featured_image":"\/\/cdn.shopify.com\/s\/files\/1\/0876\/1234\/products\/overview_wireless_hero_enhanced.png?v=1432536113","options":["Title"],"content":"\u003cp\u003elightweight \u003c\/p\u003e\n\u003cp\u003eawesome performance\u003c\/p\u003e\n\u003cp\u003ewow display\u003c\/p\u003e\nHello World626976579[\"78000.00\"] [\"78000.00\"]\\n[\"78000.00\"] [\"78000.00\"]\u003cbr\u003e[\"78000.00\"]\u003cbr\u003e626976579\u003cbr\u003e626976579\u003cbr\u003e626976579"},
onVariantSelected: selectCallback,
enableHistoryState: true
});
How the value of "title" field be accessed, which here it is "changedMacbook Air" via my own JavaScript?
Thanks in advance.
I don't know if it will work but try
var myProduct = new Shopify.OptionSelectors('productSelect', {
....
})
then try
console.log(myProduct)
or you can try this:
$(document).ready(function(e){
console.log(document.title);
})
I think you might have to pass it through the callback.
$('#productSelect').on('change', function(e) {
var t = e.target || e.srcElement,
title = t.title.value;
selectCallback(title);
break;
}
}
});
//If you want to trigger it right away for some reason, just use this...
$("#productSelect").change();
Look for the code for option_selection.js in your products template or somewhere in your Snippets, Assets, or Templates. See this fiddle for an example of what the code looks like. option_selection.js
You might also want to check this link, it's setting up an onchange event on the product variants. I'm not sure what your ultimate goal is but I see you are working with product options and variants so it might be helpful.
You can modify option_selection.js if you need to, but more than likely you will just need some jquery in the document.ready.
Here is an example from option_selection.js that builds the names of each selector. Though you probably don't need to modify this, see link above.
Shopify.OptionSelectors.prototype.buildSelectors = function() {
for (var t = 0; t < this.product.optionNames().length; t++) {
var e = new Shopify.SingleOptionSelector(this, t, this.product.optionNames()[t], this.product.optionValues(t));
e.element.disabled = !1, this.selectors.push(e)
}
var o = this.selectorDivClass,
i = this.product.optionNames(),
r = Shopify.map(this.selectors, function(t) {
var e = document.createElement("div");
if (e.setAttribute("class", o), i.length > 1) {
var r = document.createElement("label");
r.htmlFor = t.element.id, r.innerHTML = t.name, e.appendChild(r)
}
return e.appendChild(t.element), e
});
return r
},
Here is the scenario:
I have added a ribbon button on contact Form. On clicking, it loads a modal dialog as shown below:
When I click on custom lookup icon button on modal dialog, I launch Lookup Filter Window using code below:
function OpenLookup() {
var objectCode = "2";
var url = serverURL+"/_controls/lookup/lookupinfo.aspx? AllowFilterOff=1&DefaultType=1&DefaultViewId={A9AF0AB8-861D-4CFA-92A5- C6281FED7FAB}&DisableQuickFind=0&DisableViewPicker=0&LookupStyle=single&ShowNewButton=1&Show PropButton=1&browse=false¤tObjectType=2¤tid={7D2D14AE-7EE1-E311-B136- 00155D02101E}&objecttypes=1%2c2";
var lookUp = window.open(url, null, "width=500,resizable=1,height=400,menubar=0,status=1,location=0,toolbar=0,scrollbars=1", null);
if (lookUp != null) {
var selectedVal = lookUp.items[0].name;
}
}
When I parse the resultant object lookUp, it does not have any variable items. So I am unable to retrieve selected values in lookup filter window.
Any help would be appreciated.
Thanks.
Here is how I do it:
var UpdatedAccountId;
var UpdatedAccountName = "";
var lookUp = window.showModalDialog(url, "entity", "dialogwidth: 450; dialogheight: 300; resizable: yes");
var updated = JSON.parse(lookUp);
for (i = 0; i < updated.items.length; i++) {
if (updated.items[0].id != null)
{
UpdatedAccountId = updated.items[0].id;
}
if (updated.items[0].name != null)
{
UpdatedAccountName = updated.items[0].name;
}
}
Is it possible to programmatically set the hyperlink of a vwashape in Javascript?
I know there is a get method to get the links(vwashape.getHyperlinks()) but is there a set method or do I need to upload the visio file to visio, change the links and reupload it again?
Ok so after some struggling I found a solution.
Because I didnt found a way to set the hyperlinks on the object. I used the vwacontroll.addhandler onselected to bypass the problem.
vwaControl.addHandler("shapeselectionchanged", onShapeSelectionChanged);
...
onShapeSelectionChanged = function(source, args) {
try {
var shape = vwaShapes.getItemById(args);
var linkArr = shape.getHyperlinks();
for (var i = 0; i < linkArr.length; i++) {
var linkUrl = linkArr[i].value;
//manipulate link
linkUrl = linkUrl.replace("origintext", "new text");
window.location.href = linkUrl;
}
} catch(ex) {
console.log("onselected " + ex);
}
};
I have a javascript function I wrote to append a select box to a radiobutton set based on which radio button is clicked. It does this when one clicks one or the other. The problem is, I'm such an amateur that I can't get it to stop adding new select elements to the span I set to place them in. I keep trying different ways to check if the element or its innerHtml have been set and then use that check to decide whether to create another select. None of this has worked for me. Can anyone point me in the direction of a tutorial for this (i've been searching, tried nearly everything, no fez which makes me think its a simpler problem with the structure of the whole function).
Here is the code, any light shed on this would be SUPER helpful. I just taught myself to code so I know this is horrible. Thanks for the help!!
function moreInput(vInput) {
var moreD = document.getElementById('moreD');
//document.write(moreD);
if(vInput == \"approved\") {
if(moreD.length > 0) {
moreD.removeChild(approvedOpts);
}
var select = document.createElement(\"select\");
select.options[0] = new Option('a');
select.options[1] = new Option('b');
select.options[2] = new Option('c');
select.setAttribute(\"name\",\"approvedOptsA\");
}
if(vInput == \"denied\") {
//alert(moreD.innerHtml);
//if(moreD.innerHtml === 'undefined') {
//moreD.removeChild(approvedOptsD);
var select = document.createElement(\"select\");
select.options[0] = new Option('x');
select.options[1] = new Option('y');
select.options[2] = new Option('z');
select.setAttribute(\"id\",\"approvedOptsD\");
select.
//}
}
moreD.appendChild(select);
}
Remove all elements before you add any new elements.
This code should work:
<script type=\"text/javascript\">
function moreInput(vInput) {
var moreD = document.getElementById('moreD');
if(vInput == \"approved\") {
removeAllChildrens(moreD);
var select = document.createElement(\"select\");
select.options[0] = new Option('Comped Table');
select.options[1] = new Option('Comped Drink');
select.options[2] = new Option('Comped Cover');
select.setAttribute(\"name\",\"approvedOptsA\");
}
if(vInput == \"denied\") {
removeAllChildrens(moreD);
var select = document.createElement(\"select\");
select.options[0] = new Option('Need to Reserve Table');
select.options[1] = new Option('At Capacity');
select.options[2] = new Option('Private Event');
select.setAttribute(\"id\",\"approvedOptsD\");
}
moreD.appendChild(select);
}
function removeAllChildrens(cell) {
if ( cell.hasChildNodes() ) {
while ( cell.childNodes.length >= 1 ) {
cell.removeChild( cell.firstChild );
}
}
}
</script>
You only ever append new selects, you need to delete the old one before appending a new one. Try the below code (I've removed your commented lines):
function moreInput(vInput) {
var moreD = document.getElementById('moreD');
if(vInput == "approved") {
if(moreD.length > 0) {
moreD.removeChild(approvedOpts);
}
var select = document.createElement("select");
select.options[0] = new Option('a');
select.options[1] = new Option('b');
select.options[2] = new Option('c');
select.setAttribute("name","approvedOptsA");
}
if(vInput == "denied") {
var select = document.createElement("select");
select.options[0] = new Option('x');
select.options[1] = new Option('y');
select.options[2] = new Option('z');
select.setAttribute("id","approvedOptsD");
}
moreD.removeChild(document.getElementById("approvedOptsD"));
moreD.removeChild(document.getElementById("approvedOptsA"));
moreD.appendChild(select);
It may throw some warnings, I haven't tested it but you should get the idea of what you are looking for.
This is and old but still accurate and useful article on adding and removing dom nodes dynamically with javascript.
In javascript I have a reference to a div. In that div is an anchor element with a name='foundItem'
How do I get a reference to the anchor with the name foundItem which is in the Div I have the reference of?
There are 'many' foundItem anchors in other divs on the page. I need 'this' DIVs one.
// assuming you're not using jquery or mootools
// assume div is mydiv
var lst = mydiv.getElementsByTagName('a');
var myanchor;
for(var i=0; i<lst.length; ++i) {
if(lst[i].name && lst[i].name == 'foundItem') {
myanchor = lst[i];
break;
}
}
// the mootools method
var myanchor = $(mydiv).getElement('a[name=foundItem]');
You can use the getElementsByTagName method to get the anchor elements in the div, then look for the one with the correct name attribute:
var found = null;
var e = divReference.getElementsByTagName('A');
for (var i=0; i < e.length; i++) {
if (e[i].name && e[i].name == 'foundItem') {
found = e[i];
break;
}
}
If found is not null, you got the element.
If you happen to use the jQuery library, you can let it do the searching:
var found = null;
var e = $(divReference).find('a[name=foundItem]');
if (e.length == 1) found = e.get(0);
Use a JavaScript library like jQuery and save yourself time.
var theAnchor = $('#divId a[name=foundItem]');
Using jquery, it's dead easy:
<script type="text/javascript">
$(function(){
var item = $("#yourDivId a[name=foundItem]")
)};
</script>
Update:
As per the comments, if you have control over what to id/name/class your anchor tag/s, it would be best to apply a class to them:
<div id="firstDiv">
test
</div>
<div id="secondDiv">
test another one
</div>
<!-- and so forth -->
<script type="text/javascript">
$(function(){
var item = $("#firstDiv a.foundItem");
alert(item.html()); // Will result in "test"
var item2 = $("#secondDiv a.foundItem");
alert(item2.html()); // Will show "test another one"
)};
</script>
If you're doing anything with javascript, jQuery saves you tons of time and is worth investing the effort to learn well. Start with http://api.jquery.com/browser/ to get an intro to what's possible.
Not sure if this helps, but wanted a function to handle the load of a page dynamically and scroll to the anchor of choice.
function scrollToAnchor(anchor_val) {
alert("" + anchor_val);
var page = document.getElementById('tables');
var found = null;
var cnt = 0;
var e = document.getElementsByTagName('a');
for (var i = 0; i < e.length; i++) {
if (e[i].name && e[i].name == anchor_val) {
found = e[i];
break;
}
cnt++;
}
if (found) {
var nPos = found.offsetTop;
alert("" + nPos);
page.scrollBy(0, nPos);
} else {
alert('Failed with call of scrollToAnchor()' + cnt);
}
}