checkout page is not working after implementing custom theme - magento

I had implemented a custom theme in magento and after that its checkout/onepage is not working:
here it how it looks after custom theme implementation
But it should look like:
It gives me the following errors on console:
TypeError: $(...).setAttribute is not a function
$('billing:region_id').setAttribute('defaultValue', "");
TypeError: $(...).observe is not a function
$(this.form).observe('submit', function(event){this.save();Event.stop(event);}.b... //opcheckout.js
TypeError: $(...).setAttribute is not a function
$('shipping:region_id').setAttribute('defaultValue', "");
TypeError: $(...).observe is not a function
$(this.form).observe('submit', function(event){this.save();Event.stop(event);}.b... // opcheckout.js
TypeError: $(...).observe is not a function
$(this.form).observe('submit', function(event){this.save();Event.stop(event);}.b... // opcheckout.js

Related

Getting window.checkout.quoteData or store code are undefined error when cart item count updated using ajax

I have created a custom page with free text ordering functionality and called custom add to cart API to add items to the cart.
Once the item is added I need to update the cart item count with updated quantity. I tried to use
require([
'jquery',
'Magento_Checkout/js/action/get-totals'
], function ($, getTotalsAction) {
'use strict';
var deferred = $.Deferred();
getTotalsAction([], deferred);
});
But It is throwing error:
Uncaught TypeError: Cannot read property 'quoteData' of undefined at quote.js:34
And
url-builder.js:12 Uncaught TypeError: Cannot read property 'storeCode' of undefined at url-builder.js:12
Anything missing here?
I referred https://magento.stackexchange.com/questions/210517/error-javascript-define-magento2-window-checkout-quotedata-or-store-code-are-u which doesn't have any working solutions.
The issue is that quoteData lives in window.checkoutConfig - this data will only be set on the checkout pages, you won't have many of required js the modules loaded on a custom page that set this data correctly.
this may be a useful read: https://www.yireo.com/blog/2017-08-20-do-not-depend-on-window-checkoutconfig
I was able to achieve this for my scenario using the below code. It might help someone
require([
'Magento_Customer/js/customer-data'
], function (customerData) {
var sections = ['cart'];
customerData.invalidate(sections);
customerData.reload(sections, true);
});

Polymer paper-toast "Uncaught TypeError: Cannot read property 'size' of null core-overlay.html"

I had this issue with paper-toast element on my local dev(but could not replicate it here on plnkr.co)
Then I found solution that works for me, but could not tell why it works. Just placing that finding here, don't have questions:
when placed inside 'core-change' or 'change' listener paper-toast threw this error:
<script>
document.querySelector('.validation').addEventListener('core-change', function(e) {
console.log('validation core-change');
toast_element = document.getElementById('toast1');
toast_element.text = 'toast_element msg';
toast_element.show();
//On local - this is the error:
// ncaught TypeError: Cannot read property 'size' of null core-overlay.html:574
//solved with placing the code under setTimeout
setTimeout(function()
{
//toast call here
//toast_element = document.getElementById('toast1');
//toast_element.text = 'toast_element msg';
//toast_element.show();
},500);
});
</script>
Uncaught TypeError: Cannot read property 'size' of null core-overlay.html:574 Polymer.resetTargetDimensionscore-overlay.html:407 Polymer.transitionendcore-overlay.html:672 (anonymous function)polymer.concat.js:8391 b.firecore-transition.html:117 Polymer.completecore-transition-css.html:206 (anonymous function)core-transition.html:132 listener
I solved this by placing paper-toast.show() method under setTimeout.
Also noticing that:
if slider is taped to move to same point there is an error,
if slider is dragger there is NO error

jquery: Datatables.net change paginationtype based on different filter

I am using jquery plugin datatables.net.
I want to change the pagination type of already initialized datatable. The pagination should change based on the some filter that user selects. I tried by reinitializing the datatable by changing the "sPaginationType" property to a new value but i
initialize code
datatableGrid = $('#datagrid').dataTable({
"sPaginationType": "full_numbers"
});
code onclick of a filter button:
datatableGrid.fnDestroy();
datatableGrid = $('#datagrid').dataTable({
"sPaginationType": "two_button"
});
The above code is throwing a javascript error for invisble columns.
Uncaught TypeError: Cannot read property 'style' of undefined
Please guide me which way I can achieve the functionality for changing the gridpagination style.
You can change the pagination style for an existing dataTable by using fnSettings and some javascript.
jsFiddle
$('.dataTables_paginate > span').remove();
$('.dataTables_paginate > a:nth-child(3)').remove();
$('.dataTables_paginate > a:nth-child(3)').remove();
datatableGrid.fnSettings().sPaginationType = "two_button";
datatableGrid.fnDraw(false);

backbone App is not defined error

I've been following the cloudedit tutorial http://www.jamesyu.org/2011/01/27/cloudedit-a-backbone-js-tutorial-by-example/ for adding backbone to my rails app, but I'm using rails 3.1.3 rather than 3.0.
I keep getting the following errors
Uncaught TypeError: Cannot call method 'extend' of undefined
application.js:7Uncaught TypeError: undefined is not a function
I believe the error is caused by the following code
var App = {
Views: {},
Controllers: {},
Collections: {},
init: function() {
new App.Controllers.Recipes();
Backbone.history.start();
}
};
which is pretty much right from the tutorial.
I currently have this code in assets/javascripts/application.js file, underneath the section where I include the directories, and I call
$(function(){
App.init();
});
in my application.html.erb file.
the line which the error is actually referring to is
App.Controllers.Recipes = Backbone.Controller.extend(
I've tried moving the var App around to different files, but i can't seem to get it to work.
Am I understanding that error correctly? Is there something else I may be missing?
Are you using a version of Backbone >= 0.5.0 if so there is no Controller object anymore. It's been renamed to Router.

JQuery UI Tabs - loading tab with AJAX is 'breaking' a plugin

I have page that creates a table: http://gupii.co.uk/rap/weekTable.php and I'm using a plugin to add a filter functionality: _http://gupii.co.uk/rap/js/mylibs/tablefilter.js
In weekTable.php:
var theTable = $('#weekTable')
$("#filter").keyup(function() {
$.uiTableFilter( theTable, this.value );
})
This works fine when your directly on the weekTable page, but when I load the page into a JQueryUI tab and try and use the filter I get this error:
Uncaught TypeError: Object function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
} has no method 'uiTableFilter'
Whats going on here, why am I getting this error?
The page I'm trying to load into is _http://gupii.co.uk/rap/guilda.php (tab:This Week) if it helps
(apologies for posting more links than I should but I thought it would be helpful in diagnosing the problem)
Try this:
$("#filter").live("keyup", function() {
...
http://api.jquery.com/live/

Resources