No longer include Js in twig file in SEO widget (#15005)

* no longer include Js in twig file

* trying to fix test

* fix js error

3 files changed, 16 insertions, 17 deletions

diff --git a/plugins/SEO/SEO.php b/plugins/SEO/SEO.php
index 9fbdb51def..e0f7416c47 100644
--- a/plugins/SEO/SEO.php
+++ b/plugins/SEO/SEO.php
@@ -18,10 +18,16 @@ class SEO extends \Piwik\Plugin
     public function registerEvents()
     {
         return [
-            'Widget.filterWidgets' => 'filterWidgets'
+            'Widget.filterWidgets' => 'filterWidgets',
+            'AssetManager.getJavaScriptFiles' => 'getJsFiles',
         ];
     }
 
+    public function getJsFiles(&$jsFiles)
+    {
+        $jsFiles[] = "plugins/SEO/javascripts/rank.js";
+    }
+
     /**
      * @param WidgetsList $list
      */
diff --git a/plugins/SEO/javascripts/rank.js b/plugins/SEO/javascripts/rank.js
index ef92aa8c3b..887342871e 100644
--- a/plugins/SEO/javascripts/rank.js
+++ b/plugins/SEO/javascripts/rank.js
@@ -4,9 +4,8 @@
  * @link http://piwik.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
-
-$(document).ready(function () {
-    function getRank() {
+window.SEOWidget = {
+    getRank: function () {
         var ajaxRequest = new ajaxHelper();
         ajaxRequest.setLoadingElement('#ajaxLoadingSEO');
         ajaxRequest.addParams({
@@ -22,10 +21,4 @@ $(document).ready(function () {
         ajaxRequest.setFormat('html');
         ajaxRequest.send();
     }
-
-    // click on Rank button
-    $('#rankbutton').on('click', function () {
-        getRank();
-        return false;
-    });
-});
+};
diff --git a/plugins/SEO/templates/getRank.twig b/plugins/SEO/templates/getRank.twig
index 80aab34cdb..4c504d0abf 100644
--- a/plugins/SEO/templates/getRank.twig
+++ b/plugins/SEO/templates/getRank.twig
@@ -1,14 +1,14 @@
 <div id='SeoRanks'>
-    <script type="text/javascript" src="plugins/SEO/javascripts/rank.js"></script>
-
-    <form method="post" style="padding: 8px;">
+    <div style="padding:8px;">
         <div align="left" class="row">
             <div class="col s8 input-field">
                 <label for="seoUrl" class="active">{{ 'Installation_SetupWebSiteURL'|translate|capitalize }}</label>
                 <input type="text" id="seoUrl" size="15" value="{{ urlToRank }}" class="textbox "/>
             </div>
             <div class="col s4">
-                <input type="submit" class="btn btn-small" style='margin-top: 2em' id="rankbutton" value="{{ 'SEO_Rank'|translate }}"/>
+                <input type="button"
+                       onclick="SEOWidget.getRank()"
+                       class="btn btn-small" style='margin-top: 2em' id="rankbutton" value="{{ 'SEO_Rank'|translate }}"/>
             </div>
         </div>
 
@@ -48,5 +48,5 @@
                 </table>
             {% endif %}
         </div>
-    </form>
-</div>
+    </div>
+</div>
\ No newline at end of file