Develop Reference

How can I load javascript within tabs?

I'm putting together a website, and want to display different products within different tabs. Each product is a buy button script c&p'd from Shopify, but the only product that loads is the one on the 'checked' tab.
Here's the live page: https://www.didsburyprint.com/mulit-product.html
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">A3</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">A2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">A1</label>
<section id="content1">
</section>
<section id="content2">
</section>
<section id="content3">
</section>
The page will only load one product, what can I do to load each script as the tab is opened?
Here's an example of the javascript I want to load in each tab.
<div id='product-component-0d047c59e1d'></div>
<script type="text/javascript">
/*<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'didsbury-print.myshopify.com',
storefrontAccessToken: '84d842627b8d1303f702af4934b58e9b',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: [2993409196113],
node: document.getElementById('product-component-0d047c59e1d'),
moneyFormat: '%C2%A3%7B%7Bamount%7D%7D',
options: {
"product": {
"layout": "horizontal",
"variantId": "all",
"width": "100%",
"contents": {
"img": false,
"imgWithCarousel": true,
"variantTitle": false,
"description": true,
"buttonWithQuantity": false,
"quantity": false
},
"styles": {
"product": {
"text-align": "left",
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0",
"margin-bottom": "50px"
}
},
"button": {
"background-color": "#ff4328",
":hover": {
"background-color": "#e63c24"
},
":focus": {
"background-color": "#e63c24"
}
},
"title": {
"font-size": "26px"
},
"price": {
"font-size": "18px"
},
"compareAt": {
"font-size": "15px"
}
}
},
"cart": {
"contents": {
"button": true
},
"styles": {
"button": {
"background-color": "#ff4328",
":hover": {
"background-color": "#e63c24"
},
":focus": {
"background-color": "#e63c24"
}
},
"footer": {
"background-color": "#ffffff"
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"variantTitle": false,
"buttonWithQuantity": true,
"button": false,
"quantity": false
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
},
"button": {
"background-color": "#ff4328",
":hover": {
"background-color": "#e63c24"
},
":focus": {
"background-color": "#e63c24"
}
}
}
},
"toggle": {
"styles": {
"toggle": {
"background-color": "#ff4328",
":hover": {
"background-color": "#e63c24"
},
":focus": {
"background-color": "#e63c24"
}
}
}
},
"productSet": {
"styles": {
"products": {
"#media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>

Adding Shopify products to my website

I am creating a online store and I have added a few Shopify products to my products but they all appear underneath each other.
I cannot find a way to position it next to each other. Please advise on how I can position all my products next to each other.
I tried adding bootstrap but it still did not work.
This what I have so far:
<section id="responsive">
<div class="container">
<div class="row text-center">
<h2 id="how" class="os-animation" data-os-animation="zoomIn" data-os-animation-delay="0.3s">ASUS MOTHERBOARDS</h2>
<p style="text-align: left">Whether upgrading or building afresh, choose your 200 series board from the world's No.1 motherboard brand. ASUS x CableMod.</p>
</div>
<div class="col-sm-4">
<p>ASUS</p>
<div id='product-component-aa41b971682'></div>
<script type="text/javascript">
/*
<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'mystore.myshopify.com',
apiKey: 'e508fb07546e22c7abedd7b171cb31aa',
appId: '6',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: [123456789],
node: document.getElementById('product-component-aa41b971682'),
moneyFormat: 'R%20%7B%7Bamount%7D%7D',
options: {
"product": {
"buttonDestination": "modal",
"variantId": "all",
"width": "240px",
"contents": {
"imgWithCarousel": false,
"variantTitle": false,
"options": false,
"description": false,
"buttonWithQuantity": false,
"quantity": false
},
"text": {
"button": "VIEW PRODUCT"
},
"styles": {
"product": {
"text-align": "left",
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0",
"margin-bottom": "50px"
}
},
"compareAt": {
"font-size": "12px"
}
}
},
"cart": {
"contents": {
"button": true
},
"styles": {
"footer": {
"background-color": "#ffffff"
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"variantTitle": false,
"buttonWithQuantity": true,
"button": false,
"quantity": false
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
}
}
},
"productSet": {
"styles": {
"products": {
"#media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>
</div>
<div class="col-sm-4">
<p>NVIDIA</p>
<div id='product-component-aa41b971682'></div>
<script type="text/javascript">
/*
<![CDATA[*/
(function () {
var scriptURL = 'https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js';
if (window.ShopifyBuy) {
if (window.ShopifyBuy.UI) {
ShopifyBuyInit();
} else {
loadScript();
}
} else {
loadScript();
}
function loadScript() {
var script = document.createElement('script');
script.async = true;
script.src = scriptURL;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(script);
script.onload = ShopifyBuyInit;
}
function ShopifyBuyInit() {
var client = ShopifyBuy.buildClient({
domain: 'mystore.myshopify.com',
apiKey: 'e508fb07546e22c7abedd7b171cb31aa',
appId: '6',
});
ShopifyBuy.UI.onReady(client).then(function (ui) {
ui.createComponent('product', {
id: [123456789],
node: document.getElementById('product-component-aa41b971682'),
moneyFormat: 'R%20%7B%7Bamount%7D%7D',
options: {
"product": {
"buttonDestination": "modal",
"variantId": "all",
"width": "240px",
"contents": {
"imgWithCarousel": false,
"variantTitle": false,
"options": false,
"description": false,
"buttonWithQuantity": false,
"quantity": false
},
"text": {
"button": "VIEW PRODUCT"
},
"styles": {
"product": {
"text-align": "left",
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0",
"margin-bottom": "50px"
}
},
"compareAt": {
"font-size": "12px"
}
}
},
"cart": {
"contents": {
"button": true
},
"styles": {
"footer": {
"background-color": "#ffffff"
}
}
},
"modalProduct": {
"contents": {
"img": false,
"imgWithCarousel": true,
"variantTitle": false,
"buttonWithQuantity": true,
"button": false,
"quantity": false
},
"styles": {
"product": {
"#media (min-width: 601px)": {
"max-width": "100%",
"margin-left": "0px",
"margin-bottom": "0px"
}
}
}
},
"productSet": {
"styles": {
"products": {
"#media (min-width: 601px)": {
"margin-left": "-20px"
}
}
}
}
}
});
});
}
})();
/*]]>*/
</script>
</div>
</div>
</section>

How to set foucs on button in Pnotify

i am using pnotify alert jquery in my project. i am trying to set focus on ok button when dialog box popup. so that user can simply hit enter or space bar to close the dialog box. but unable to do that.
This is link of pnotify
My code -
function AlertAskOk(Heading, Message, type, okclick) {
var modal_overlay;
info_box = $.pnotify({
title: Heading,
text: Message,
type: type,
buttons: 'ok',
okclick: okclick,
icon: "picon picon-object-order-raise",
delay: 20000,
history: false,
stack: false,
// nonblock: true,
before_open: function (pnotify) {
// $("btn-inverse").focus();
// Position this notice in the center of the screen.
pnotify.css({
"top": ($(window).height() / 2) - (pnotify.height() / 2),
"left": ($(window).width() / 2) - (pnotify.width() / 2)
});
// Make a modal screen overlay.
modal_overlay = $("<div />", {
"class": "ui-widget-overlay",
"css": {
"display": "none",
"position": "fixed",
"top": "0",
"width": "5000px",
"bottom": "0",
"right": "0",
"left": "0",
"cursor": "pointer"
}
}).appendTo("body").fadeIn("fast");
},
//....
after_open: function (ui) {
$(".btn", ui.container).focus();
},
//....
before_close: function () {
modal_overlay.fadeOut("fast");
}
});
}

Use after_open callback. Check this demo.
new PNotify({
//....
after_open: function (notify) {
$(".btn-class", notify.container).focus();
}
//....
});

If need change this for all PNotify, I use next solution:
PNotify.prototype.options.confirm.buttons[0].addClass = 'btn-pnotify-ok';
PNotify.prototype.modules.confirm.afterOpen = function(notice, options){
if (options.prompt) {
this.prompt.focus();
} else {
notice.container
.keyup(({keyCode}) => {
if (keyCode === 27) {
notice.remove();
}
})
.find('.btn-pnotify-ok')
.focus();
}
};
new PNotify({...});
...
new PNotify({...});
Demo
PNotify.prototype.options.styling = 'bootstrap3';
PNotify.prototype.options.confirm.buttons[0].addClass = 'btn-pnotify-ok';
PNotify.prototype.modules.confirm.afterOpen = function(notice, options){
if (options.prompt) {
this.prompt.focus();
} else {
notice.container
.keyup(({keyCode}) => {
if (keyCode === 27) {
notice.remove();
}
})
.find('.btn-pnotify-ok')
.focus();
}
};
$("#btn1").click(function () {
new PNotify({
title: 'Focus on open #1',
text: 'Press [enter] or [esc]!',
hide: false,
stack: {
'modal': true,
'dir1': 'down',
'dir2': 'right',
},
confirm: {
confirm: true,
},
buttons: {
closer: false,
sticker: false
},
});
});
$("#btn2").click(function () {
new PNotify({
title: 'Focus on open #2',
text: 'Press [enter] or [esc]!',
hide: false,
stack: {
'modal': true,
'dir1': 'down',
'dir2': 'right',
},
confirm: {
confirm: true,
},
buttons: {
closer: false,
sticker: false
},
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pnotify/3.2.1/pnotify.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/pnotify/3.2.1/pnotify.confirm.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pnotify/3.2.1/pnotify.css">
<button id="btn1" class="btn btn-default">Confirm Dialog #1</button>
<button id="btn2" class="btn btn-default">Confirm Dialog #2</button>

jQuery Masked Input plugin not working on form input?

I'm trying to use the Masked Input plugin on one of my dataTables Editor fields (#DTE_Field_phone). For some reason, the mask isn't being applied with this code:
$('#DTE_Field_phone').mask('(999) 999-9999');
I'm calling the mask after the table and editor are initialized, yet still nothing. Any ideas on what I may be doing wrong?
HTML:
<div class="DTE_Field_Input" data-dte-e="input">
<input id="DTE_Field_phone"></input>
<div class="DTE_Field_Error" data-dte-e="msg-error" style="display: none;"></div>
<div class="DTE_Field_Message" data-dte-e="msg-message"></div>
<div class="DTE_Field_Info" data-dte-e="msg-info"></div>
</div>
jQuery:
jQuery(function ($) {
$( document ).ready(function (e) {
var editor = new $.fn.dataTable.Editor({
"ajaxUrl": "../wp-content/plugins/contacts/php/table.wp_contacts.php",
"domTable": "#form_results7",
"fields": [
{ "label": "Contact",
"name": "contact",
"type": "text" },
{ "label": "Company",
"name": "company",
"type": "text" },
{ "label": "Email",
"name": "email",
"type": "text" },
{ "label": "Phone",
"name": "phone",
"type": "text" },
{ "label": "Fax",
"name": "fax",
"type": "text" },
{ "label": "Address",
"name": "address",
"type": "text" },
{ "label": "Tax ID",
"name": "tax_id",
"type": "text" }
]
});
$('#add_items').on('click', function (e) {
e.preventDefault();
editor.create(
'Add Contact',
{
"label": "Add",
"fn": function () {
editor.submit()
}
}
);
});
$('#form_results7').on('click', 'a.editor_edit', function (e) {
e.preventDefault();
editor.edit(
$(this).parents('tr')[0],
'Edit Contact',
{ "label": "Update", "fn": function () { editor.submit() } }
);
});
$('#form_results7').on('click', 'a.editor_remove', function (e) {
e.preventDefault();
editor.message( "Are you sure you want to remove this row?" );
editor.remove( $(this).parents('tr')[0], 'Delete row', {
"label": "Confirm",
"fn": function () { this.submit(); }
});
});
var oTable = $('#form_results7').dataTable({
"bAutoWidth": false,
"bJQueryUI": true,
"sAjaxSource": "../wp-content/plugins/contacts/php/table.wp_contacts.php",
"sDom": "<'H'lfr>t<'F'ip>",
"aoColumns": [
{ "mData": "contact",
"sWidth": "14%" },
{ "mData": "company",
"sWidth": "14%" },
{ "mData": "email",
"sWidth": "17%" },
{ "mData": "phone",
"sWidth": "11%" },
{ "mData": "fax",
"sWidth": "11%" },
{ "mData": "address",
"sWidth": "17%" },
{ "mData": "tax_id",
"sWidth": "8%" },
{ "bSortable": false,
"mData": null,
"sClass": "center",
"sDefaultContent": 'Edit | Delete',
"sWidth": "8%" }
],
"sPaginationType": "full_numbers"
});
$('#DTE_Field_phone').mask("(999) 999-9999");
try {$("#form_results7_length select").msDropDown();} catch(e) {alert(e.message);}
$('#refresh_items').click(function() {
location.reload();
});
$("#reset").click(function() {
$("#form_results7_filter input").val("");
oTable.fnFilter("");
oTable.fnSort([[ 0, "asc" ]]);
});
});
});

I have no experience of dataTables but from your code I think you are using the popup editor?
If so you probably need to apply the mask in the event which is fired after the editor is opened like this:
editor.on('onOpen', function () {
$('#DTE_Field_phone').mask('(999) 999-9999');
});

You're declaring a $( document ).ready(function (e) { function inside a Jquery(function($), which is wrong...
jQuery(function ($) {
$( document ).ready(function (e) {
...
}
}
You can't use these 2 functions together, since they hook to the same event.
See here in the documentation.
Solution 1
jQuery(function ($) {
...
}
Solution 2
$( document ).ready(function (e) {
...
}

jQuery AutoComplete plugin - minLength is taking no effect

The autocomplete is working fine, but it's displaying the auto suggestion box with 1 character, and I would like to change it to display the auto suggestion box only when the input is >=3.
I've been trying to insert 'minLength' option but it is not taking any effetct.
I've tried to modify the sixth line to:
.autocomplete(conf.opts, minLength: 3 || {});
But had no success.
Here's my JS file:
var myEditor;
// AutoComplete FieldType
$.fn.dataTable.Editor.fieldTypes.autoComplete = $.extend(true, {}, $.fn.dataTable.Editor.models.fieldType, {
"create": function (conf) {
conf._input = $('<input type="text" id="' + conf.id + '">')
.autocomplete(conf.opts || {});
return conf._input[0];
},
"get": function (conf) {
return conf._input.val();
},
"set": function (conf, val) {
conf._input.val(val);
},
"enable": function (conf) {
conf._input.autocomplete('enable');
},
"disable": function (conf) {
conf._input.autocomplete('disable');
},
// Non-standard Editor method - custom to this plug-in
"node": function (conf) {
return conf._input;
}
});
$(document).ready(function () {
myEditor = new $.fn.dataTable.Editor({
"ajaxUrl": "./php/pTreinamentos.php",
"domTable": "#example",
"fields": [{
"label": "Tema",
"name": "tema",
"type": "autoComplete",
"opts": {
"source": ['banana']
}
}
]
});
// DataTable
var oTable = $('#example').dataTable({
"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sAjaxSource": "./php/pTreinamentos.php",
"bFilter": true,
"bAutoWidth": false,
"iDisplayLength": 20,
"aoColumns": [{
"mData": "tema"
}
],
"oTableTools": {
"sSwfPath": "../../TableTools/media/swf/copy_csv_xls_pdf.swf",
"sRowSelect": "single",
"sPaginationType": "bootstrap",
"aButtons": [{
"sExtends": "editor_create",
"editor": myEditor
}, {
"sExtends": "editor_edit",
"editor": myEditor
}, {
"sExtends": "editor_remove",
"editor": myEditor
}
]
}
});
});

The solution was to add the option inside the field structure.
"fields": [{
"label": "Data",
"name": "data",
"type": "autoComplete",
"opts": {
"source": ['banana'],
"minLength": 3
}