[Kimchi-devel] [PATCH V2 4/4] escape special characters for jQuery selector.

[shaohef at linux.vnet.ibm.com]

From: ShaoHe Feng <shaohef at linux.vnet.ibm.com>

When where are some special characters in html element names, jQuery
will not find the element.

These characters should be escape.

add a escape function in util for it.

Signed-off-by: ShaoHe Feng <shaohef at linux.vnet.ibm.com>
---
 ui/js/src/kimchi.network.js | 26 +++++++++++++-------------
 ui/js/src/kimchi.utils.js   |  7 +++++++
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
index 639fcc1..68cf559 100644
--- a/ui/js/src/kimchi.network.js
+++ b/ui/js/src/kimchi.network.js
@@ -79,7 +79,7 @@ kimchi.getNetworkItemHtml = function(network) {
 };
 
 kimchi.stopNetwork = function(network,menu) {
-    $(".network-state", $("#" + network.name)).switchClass("up", "nw-loading");
+    $(".network-state", $("#" + kimchi.escapeStr(network.name))).switchClass("up", "nw-loading");
     $("[nwAct='stop']", menu).addClass("ui-state-disabled");
     kimchi.toggleNetwork(network.name, false, function() {
         $("[nwAct='start']", menu).removeClass("hide-action-item");
@@ -89,9 +89,9 @@ kimchi.stopNetwork = function(network,menu) {
             $("[nwAct='delete']", menu).removeClass("ui-state-disabled");
             $(":first-child", $("[nwAct='delete']", menu)).removeAttr("disabled");
         }
-        $(".network-state", $("#" + network.name)).switchClass("nw-loading", "down");
+        $(".network-state", $("#" + kimchi.escapeStr(network.name))).switchClass("nw-loading", "down");
     }, function(err) {
-        $(".network-state", $("#" + network.name)).switchClass("nw-loading", "up");
+        $(".network-state", $("#" + kimchi.escapeStr(network.name))).switchClass("nw-loading", "up");
         if (!network.in_use) {
             $("[nwAct='stop']", menu).removeClass("ui-state-disabled");
         }
@@ -100,17 +100,17 @@ kimchi.stopNetwork = function(network,menu) {
 }
 
 kimchi.addNetworkActions = function(network) {
-    $(".menu-container", "#" + network.name).menu({
+    $(".menu-container", "#" + kimchi.escapeStr(network.name)).menu({
         position : {
             my : "left top",
             at : "left bottom",
-            of : "#" + network.name
+            of : "#" + kimchi.escapeStr(network.name)
         },
         select : function(evt, ui) {
-            $(".menu-container", "#" + network.name).toggle(false);
+            $(".menu-container", "#" + kimchi.escapeStr(network.name)).toggle(false);
             var menu = $(evt.currentTarget).parent();
             if ($(evt.currentTarget).attr("nwAct") === "start") {
-                $(".network-state", $("#" + network.name)).switchClass("down", "nw-loading");
+                $(".network-state", $("#" + kimchi.escapeStr(network.name))).switchClass("down", "nw-loading");
                 $("[nwAct='start']", menu).addClass("ui-state-disabled");
                 $("[nwAct='delete']", menu).addClass("ui-state-disabled");
                 $(":first-child", $("[nwAct='delete']", menu)).attr("disabled", true);
@@ -121,9 +121,9 @@ kimchi.addNetworkActions = function(network) {
                     if (network.in_use) {
                         $("[nwAct='stop']", menu).addClass("ui-state-disabled");
                     }
-                    $(".network-state", $("#" + network.name)).switchClass("nw-loading", "up");
+                    $(".network-state", $("#" + kimchi.escapeStr(network.name))).switchClass("nw-loading", "up");
                 }, function(err) {
-                    $(".network-state", $("#" + network.name)).switchClass("nw-loading","down");
+                    $(".network-state", $("#" + kimchi.escapeStr(network.name))).switchClass("nw-loading","down");
                     $("[nwAct='start']", menu).removeClass("ui-state-disabled");
                     if (!network.in_use) {
                         $("[nwAct='delete']", menu).removeClass("ui-state-disabled");
@@ -161,16 +161,16 @@ kimchi.addNetworkActions = function(network) {
             }
         }
     });
-    $(".column-action", "#" + network.name).children(":first").button({
+    $(".column-action", "#" + kimchi.escapeStr(network.name)).children(":first").button({
         icons : {
             secondary : "action-button-icon"
         }
     }).click(function() {
-        $(".menu-container", "#" + network.name).toggle();
+        $(".menu-container", "#" + kimchi.escapeStr(network.name)).toggle();
         window.scrollBy(0, 150);
     });
-    $(".menu-container", "#" + network.name).mouseleave(function() {
-        $(".menu-container", "#" + network.name).toggle(false);
+    $(".menu-container", "#" + kimchi.escapeStr(network.name)).mouseleave(function() {
+        $(".menu-container", "#" + kimchi.escapeStr(network.name)).toggle(false);
     });
 };
 
diff --git a/ui/js/src/kimchi.utils.js b/ui/js/src/kimchi.utils.js
index d1ea105..c7103f8 100644
--- a/ui/js/src/kimchi.utils.js
+++ b/ui/js/src/kimchi.utils.js
@@ -176,3 +176,10 @@ kimchi.isServer = function(server) {
         return true;
     }
 };
+
+kimchi.escapeStr = function(str) {
+    if (str)
+        return str.replace(/([ #;?%&,.+*~\\':"!^$[\]()<=>`{|}\/@])/g,'\\$&');
+
+    return str;
+};
-- 
1.9.3