質問編集履歴

3 コードを追加しました

MyQuestioner

MyQuestioner score 44

2018/09/24 13:56  投稿

Uncaught DOMExceptionというエラーについて
お世話になります。
Wordpressで「WooCommerce Bookings」を使用しているのですが、
先日からWordpressのdatepicker.min.jsを利用したカレンダー表示が
Chromeで機能しなくなりました。Firefoxでは表示されています。
Chromeのデベロッパーツールでは以下のようにエラーが表示されています。
```ここに言語を入力
Uncaught DOMException: Failed date-picker.min.js
to execute 'btoa' on 'Window':
The string to be encoded contains characters outside of the Latin1 range.
```
該当箇所は以下の部分です。
```ここに言語を入力
var cacheKey = btoa( date.toString().replace( /[\u00A0-\u2666]/g, function( c ) {
           return '&#' + c.charCodeAt( 0 ) + ';';
```
該当箇所を含む一連のコードです。
該当箇所(cacheKey)を含む一連のコードです。
```ここに言語を入力
   /**
    * Applys attributes to the dates on the datepicker. This is necessary since we cant
    * defer beforeShowDay until after our data is loaded.
    *
    * @version 1.10.11
    * @since  1.10.11
    * @param  {object} dateRange - Date range for attributes to be applied to.
    */
   WC_Bookings_DatePicker.prototype.applyStylesToDates = function applyStylesToDates( dateRange ) {
       var checkDate = dateRange.startDate;
       while ( checkDate < dateRange.endDate ) {
           var cacheKey = window.btoa( checkDate.toString().replace( /[\u00A0-\u2666]/g, function( c ) {
           var cacheKey = btoa( checkDate.toString().replace( /[\u00A0-\u2666]/g, function( c ) {
               return '&#' + c.charCodeAt( 0 ) + ';';
           } ) );
           if ( ! this.cache.attributes[ cacheKey ] ) {
               var attributes   = this.getDateElementAttributes( checkDate );
               var selector   = $( 'td[data-month="' + checkDate.getMonth() + '"] a', this.$picker ).filter(function() {
                   return $(this).text() == checkDate.getDate();
               }).parent();
               if ( ! attributes.selectable ) {
                   attributes.class.push( 'ui-datepicker-unselectable' );
                   attributes.class.push( 'ui-state-disabled' );
               }
               if ( checkDate.setHours( 0, 0, 0, 0 ) === new Date().setHours( 0, 0, 0, 0 ) ) {
                   attributes.class.push( 'ui-datepicker-today' );
               }
               $.each( attributes, function( key, val ) {
                   
                   selector.attr( key, ( $.isArray( val ) ) ? val.join( ' ' ) : val );
               });
               
               if ( this.opts.cache ) {
                   this.cache.attributes[ cacheKey ] = attributes;
               }
           }
           checkDate.setDate( checkDate.getDate() + 1 );
       }
   }
 
   /**  
    * If caching is being requested beforeShowDay will use this method to load styles from cache if available.  
    *  
    * @version 1.10.11  
    * @since  1.10.11  
    * @param  {object} date - Date to apply attributes to.  
    */  
   WC_Bookings_DatePicker.prototype.maybe_load_from_cache = function maybe_load_from_cache( date ) {  
 
       var cacheKey = btoa( date.toString().replace( /[\u00A0-\u2666]/g, function( c ) {  
           return '&#' + c.charCodeAt( 0 ) + ';';  
       } ) );  
 
       var defaultClass       = ( '1' === this.customData.default_availability ) ? 'bookable' : 'not-bookable' ;  
       var attributes           = [ true, defaultClass, '' ];  
       var cachedAttributes   = this.cache.attributes[ cacheKey ];  
 
       if ( cachedAttributes ) {  
           cachedAttributes = [ cachedAttributes.selectable, cachedAttributes.class.join( ' ' ), cachedAttributes.title ];  
       } else if ( this.bookingsData ) {  
           var attrs = this.getDateElementAttributes( date );  
           attributes = [ attrs.selectable, attrs.class.join(' '), attrs.title ];  
       }  
 
       return cachedAttributes || attributes;  
 
   }  
 
   /**  
    * Returns the default parameters.  
    *  
    * @version 1.10.11  
    * @since  1.10.11  
    */  
   WC_Bookings_DatePicker.prototype.get_default_params = function get_default_params() {  
 
       return this.defaultParams || {};  
 
   }  
 
   /**  
    * Set and override the default parameters.  
    *  
    * @version 1.10.11  
    * @since  1.10.11  
    * @param  {object} params - Parameters to be set or overridden.  
    */  
   WC_Bookings_DatePicker.prototype.set_default_params = function set_default_params( params ) {  
 
       var _defaultParams = {  
           showWeek           : false,  
           showOn               : false,  
           numberOfMonths       : 1,  
           showButtonPanel       : false,  
           showOtherMonths       : true,  
           selectOtherMonths   : true,  
           gotoCurrent           : true,  
           dateFormat           : $.datepicker.ISO_8601,  
       }  
         
       if ( typeof params !== 'object' ) {  
           throw new Error( 'Cannot set params with typeof ' + typeof params );  
           return;  
       }  
 
       this.defaultParams = $.extend( _defaultParams, params ) || {};  
 
   }  
     
   /**  
    * Get the data from the server for a block of time.  
    *  
    * @since  1.10.11  
    * @param  {string} year - Year being requested.  
    * @param  {string} month - Month being requested.  
    * @returns {object} Deferred object to be resolved after the http request  
    */  
   WC_Bookings_DatePicker.prototype.get_data = function get_data( year, month ) {  
       year = undefined !== year ? year : new Date().getFullYear();  
       month = undefined !== month ? month : new Date().getMonth() + 1;  
 
       /**  
        * Overlay styles when jQuery.block is called to block the DOM.  
        */  
       var blockUIOverlayCSS = {  
           background: '#fff',  
           opacity: 0.6,  
       };  
 
       /**  
        * Get a date range based on the start date.  
        *  
        * @since  1.10.11  
        * @param  {string} startDate - Optional start date to get the date range from.  
        * @returns {object} Object referencing the start date and end date for the range calculated.  
        */  
       var get_date_range = function get_date_range( startDate ) {  
 
           if ( ! startDate ) {  
               startDate = new Date( [ year, month, '01' ].join( '/' ) );  
           }  
 
           var range = this.get_number_of_days_in_month( month );  
           return this.get_padded_date_range( startDate, range );  
 
       }.bind(this);  
         
       var deferred   = $.Deferred();  
       var dateRange  = get_date_range();  
 
       startDateString = dateRange.startDate.toString()  
       startDateString = btoa( startDateString.replace( /[\u00A0-\u2666]/g, function( c ) {  
           return '&#' + c.charCodeAt( 0 ) + ';';  
       } ) );  
 
       endDateString = dateRange.endDate.toString();  
       endDateString = btoa( endDateString.replace( /[\u00A0-\u2666]/g, function( c ) {  
           return '&#' + c.charCodeAt( 0 ) + ';';  
       } ) );  
 
       var cacheKey   = startDateString + endDateString;  
 
       if ( this.opts.cache && this.cache.data[ cacheKey ] ) {  
 
           deferred.resolveWith( this, [ dateRange, this.cache.data[ cacheKey ] ] );  
 
       } else {  
 
           var params = {  
               'product_id': this.get_custom_data( 'product_id' ),  
               'wc-ajax'   : 'wc_bookings_find_booked_day_blocks',  
               'security'   : this.$form.data( 'nonce' ),  
           }  
 
           this.$picker.block( {  
               message: null,  
               overlayCSS: blockUIOverlayCSS,  
           } );  
 
           params.min_date = dateRange.startDate;  
           params.max_date = dateRange.endDate;  
 
           $.ajax({  
               context: this,  
               url: wc_bookings_date_picker_args.ajax_url,  
               method: 'GET',  
               data: params,  
           })  
           .done( function( data ) {  
     
               this.bookingsData = this.bookingsDate || {};  
 
               $.each( data, function( key, val ) {  
     
                   if ( $.isArray( val ) || typeof val === 'object' ) {  
     
                       var emptyType = ( $.isArray( val ) ) ? [] : {};  
     
                       this.bookingsData[ key ] = this.bookingsData[ key ] || emptyType;  
     
                       $.extend( this.bookingsData[ key ], val );  
                         
                   } else {  
     
                       this.bookingsData[ key ] = val;  
     
                   }  
     
               }.bind( this ) );  
 
               this.cache.data[ cacheKey ] = data;  
 
               if ( ! year && ! month && this.bookingsData.min_date ) {  
                   dateRange = get_date_range( this.get_default_date( this.bookingsData.min_date ) );  
               }  
     
               deferred.resolveWith( this, [ dateRange, data ] );  
 
               this.$picker.unblock();  
     
           }.bind( this ) );  
 
       }  
 
       return deferred;  
         
   }  
```
どうもChrome自体の問題のようなのですが(Firefoxの開発ツールではエラーは表示されません)エラー内容で検索しても目ぼしい情報が得られないためお知恵をお借りしたいです。
  • PHP

    37348 questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    15095 questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • プラグイン

    1266 questions

    プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

2 タグの追加

MyQuestioner

MyQuestioner score 44

2018/09/24 12:27  投稿

Uncaught DOMExceptionというエラーについて
お世話になります。
Wordpressで「WooCommerce Bookings」を使用しているのですが、
先日からWordpressのdatepicker.min.jsを利用したカレンダー表示が
Chromeで機能しなくなりました。Firefoxでは表示されています。
Chromeのデベロッパーツールでは以下のようにエラーが表示されています。
```ここに言語を入力
Uncaught DOMException: Failed date-picker.min.js
to execute 'btoa' on 'Window':
The string to be encoded contains characters outside of the Latin1 range.
```
該当箇所は以下の部分です。
```ここに言語を入力
var cacheKey = btoa( date.toString().replace( /[\u00A0-\u2666]/g, function( c ) {
return '&#' + c.charCodeAt( 0 ) + ';';
```
該当箇所を含む一連のコードです。
```ここに言語を入力
/**
* Applys attributes to the dates on the datepicker. This is necessary since we cant
* defer beforeShowDay until after our data is loaded.
*
* @version 1.10.11
* @since 1.10.11
* @param {object} dateRange - Date range for attributes to be applied to.
*/
WC_Bookings_DatePicker.prototype.applyStylesToDates = function applyStylesToDates( dateRange ) {
var checkDate = dateRange.startDate;
while ( checkDate < dateRange.endDate ) {
var cacheKey = window.btoa( checkDate.toString().replace( /[\u00A0-\u2666]/g, function( c ) {
return '&#' + c.charCodeAt( 0 ) + ';';
} ) );
if ( ! this.cache.attributes[ cacheKey ] ) {
var attributes = this.getDateElementAttributes( checkDate );
var selector = $( 'td[data-month="' + checkDate.getMonth() + '"] a', this.$picker ).filter(function() {
return $(this).text() == checkDate.getDate();
}).parent();
if ( ! attributes.selectable ) {
attributes.class.push( 'ui-datepicker-unselectable' );
attributes.class.push( 'ui-state-disabled' );
}
if ( checkDate.setHours( 0, 0, 0, 0 ) === new Date().setHours( 0, 0, 0, 0 ) ) {
attributes.class.push( 'ui-datepicker-today' );
}
$.each( attributes, function( key, val ) {
selector.attr( key, ( $.isArray( val ) ) ? val.join( ' ' ) : val );
});
if ( this.opts.cache ) {
this.cache.attributes[ cacheKey ] = attributes;
}
}
checkDate.setDate( checkDate.getDate() + 1 );
}
}
```
どうもChrome自体の問題のようなのですが(Firefoxの開発ツールではエラーは表示されません)エラー内容で検索しても目ぼしい情報が得られないためお知恵をお借りしたいです。
  • WordPress

    15095 questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • プラグイン

    1266 questions

    プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

  • JavaScript

    36463 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • PHP

    37348 questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

1 コードを追加しました

MyQuestioner

MyQuestioner score 44

2018/09/24 11:59  投稿

Uncaught DOMExceptionというエラーについて
お世話になります。
Wordpressで「WooCommerce Bookings」を使用しているのですが、
先日からWordpressのdatepicker.min.jsを利用したカレンダー表示が
Chromeで機能しなくなりました。Firefoxでは表示されています。
Chromeのデベロッパーツールでは以下のようにエラーが表示されています。
```ここに言語を入力
Uncaught DOMException: Failed date-picker.min.js
to execute 'btoa' on 'Window':
The string to be encoded contains characters outside of the Latin1 range.
```
該当箇所は以下の部分です。
```ここに言語を入力
var cacheKey = btoa( date.toString().replace( /[\u00A0-\u2666]/g, function( c ) {
           return '&#' + c.charCodeAt( 0 ) + ';';
```
該当箇所を含む一連のコードです。  
```ここに言語を入力  
   /**  
    * Applys attributes to the dates on the datepicker. This is necessary since we cant  
    * defer beforeShowDay until after our data is loaded.  
    *  
    * @version 1.10.11  
    * @since  1.10.11  
    * @param  {object} dateRange - Date range for attributes to be applied to.  
    */  
   WC_Bookings_DatePicker.prototype.applyStylesToDates = function applyStylesToDates( dateRange ) {  
 
       var checkDate = dateRange.startDate;  
 
       while ( checkDate < dateRange.endDate ) {  
 
           var cacheKey = window.btoa( checkDate.toString().replace( /[\u00A0-\u2666]/g, function( c ) {  
               return '&#' + c.charCodeAt( 0 ) + ';';  
           } ) );  
 
           if ( ! this.cache.attributes[ cacheKey ] ) {  
 
               var attributes   = this.getDateElementAttributes( checkDate );  
               var selector   = $( 'td[data-month="' + checkDate.getMonth() + '"] a', this.$picker ).filter(function() {  
                   return $(this).text() == checkDate.getDate();  
               }).parent();  
 
               if ( ! attributes.selectable ) {  
                   attributes.class.push( 'ui-datepicker-unselectable' );  
                   attributes.class.push( 'ui-state-disabled' );  
               }  
 
               if ( checkDate.setHours( 0, 0, 0, 0 ) === new Date().setHours( 0, 0, 0, 0 ) ) {  
                   attributes.class.push( 'ui-datepicker-today' );  
               }  
 
               $.each( attributes, function( key, val ) {  
                     
                   selector.attr( key, ( $.isArray( val ) ) ? val.join( ' ' ) : val );  
 
               });  
                 
               if ( this.opts.cache ) {  
                   this.cache.attributes[ cacheKey ] = attributes;  
               }  
 
           }  
 
           checkDate.setDate( checkDate.getDate() + 1 );  
 
       }  
 
   }  
```  
 
どうもChrome自体の問題のようなのですが(Firefoxの開発ツールではエラーは表示されません)エラー内容で検索しても目ぼしい情報が得られないためお知恵をお借りしたいです。
  • JavaScript

    36463 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    15095 questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • プラグイン

    1266 questions

    プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る