it-swarm-ja.com

Uncaught TypeErrorを示すJqueryUiダイアログ:this._addClassは関数エラーではありません

私たちのサイトには、外部データベースに接続して、製品を販売するいくつかのベンダーの製品レビューURLを取得するためのカスタムphpコーディングが必要でした。私たちが達成しようとしている基本的なアイデアは、ユーザーに製品を登録してもらい、レビューを残していただける場合は保証を延長することです。これを実現するために、xyzscripts.comの「Insert PHP」プラグインを使用しています。テーマには当初jQueryのみがロードされていたため、phpスクリプトでjQueryUIをロードしている子テーマを作成しないようにしています。したがって、jQueryがヘッダーに読み込まれ、jQueryUIがドキュメントの本文に読み込まれます。これは、スクリプトが読み込まれている順序が原因で発生しているのか、それとも他の競合するJavaScriptがエラーの原因となっているのか、よくわかりません。以下の画像でエラーを確認できます。

ダイアログの呼び出し時のChromeのコンソール出力

Console Error

関連コード

<script>
jQuery.ajax({
    type: 'GET',
    url: "<?=$ajax_handler?>?method=check_warranty&model="+model,
    success: function(response) {
        if (response == '')
            duration = '6';
        else
            duration = response;

        jQuery('#warranty_length').val(duration);

        jQuery('#warranty_dialog').dialog({
            width:'700px',
            height:'408px',
            position:'absolute',
            top:'300px'
        }).html("HTML TO DISPLAY REVIEW LINK BUTTON");
        jQuery('.titlebar-close').hide();
    }
});
</script>

ご覧のとおり、コードは非常に単純です。ユーザーがフォームに入力した後、ModelとVendorを使用してデータベースをクエリするajax呼び出しを行い、その製品の適切なレビューリンクを取得して、そのVendorとModelのレビューページへのリンクを作成します。

エラーの原因が3つあるかどうかを確認しようとしています。

  1. JQueryとjQueryUIがロードされている順序に問題があります。
  2. コードに問題があります(他のいくつかのサイトでこのスクリプトを正常に使用しました)。
  3. 私のスクリプトと競合しているテーマに他のJavaScriptが含まれている可能性がある場合。

必要に応じて、phpスクリプトで必要なその他の関連コードを提供できます。ページのURLは次のとおりです。

http://www.kriegermfg.com/register-test/

どんな助けでも大歓迎です。

Editさらにいくつかのコンテキストを提供するために、jQueryUIが失敗しています。

enter image description here

1
GideonBright

JSはインラインで記述されているか、独自のJSファイルで記述されているか、少なくとも独自にエンキューされているようです。言い換えれば、WordPressに正しく読み込まれているようには見えません。

WP function wp_enqueue_script()には、(wp_register_script()を介して登録された)スクリプトハンドルの配列を渡すことができる依存関係パラメーターがあることに注意してください。このパラメーター関数を使用すると、ヘッダー+フッタースクリプトを目的の場所(ヘッダーとフッター)および目的の順序で確実にロードできます。

ドキュメント:

https://developer.wordpress.org/reference/functions/wp_enqueue_script/https://developer.wordpress.org/reference/functions/wp_register_script/

JS自体では、$( document ).ready()を使用します。

http://learn.jquery.com/using-jquery-core/document-ready/

JQuery UIが読み込まれる前に、コードがマークアップ内にあります。これは、解決する必要がある潜在的な問題です。それが独自のファイルにあり、テーマのfunctions.php(またはサイトプラグイン)に適切にエンキューされている場合、JQuery UIのハンドルを依存関係として指定でき、WordPressは常にそれをロードします。

それでも問題が解決しない場合は、他のプラグインと他のJSのビットを(一時的に)無効にして、これが機能するかどうかを確認します。その場合は、1つずつ再度有効にして、原因を特定できます。

また、Contact Form 7とテーマ/プラグインの両方がJQuery UIをロードしているように見え、どちらも日付ピッカーなどに依存しています。ContactForm 7のコアはJQuery UIの前にロードされます(その後、他のJQuery UIの依存関係をロードします)。それが潜在的な問題の原因であるかどうかを確認するために、そのプラグインの十分な経験がありません(調査する必要がある場合もあります)。

1
firxworx