Locally working ajax for item descriptions. Up next: write the entire json file manually because I failed to notice that I set myself up for it.

Author: KoenDG

ajax.php

@@ -0,0 +1,10 @@
+<?php
+
+//2nd argument true => decode result in to associative array
+$result = json_decode(file_get_contents("files/dota2itemfilter.json"), true);
+$name = $_POST['name'];
+
+//Return only the specified item
+echo json_encode($result[$name]);
+
+?>

css/main.css

@@ -7,7 +7,7 @@
 */
 
 #left {
-    width: 350px;
+    width: 320px;
     height: 100%;
     position: fixed;
 
@@ -29,7 +29,7 @@ label {
     height: 100%;
     position: fixed;
     overflow-y: scroll;
-    margin-left: 350px;
+    margin-left: 320px;
 
     clear: both;
     float: left;

files/dota2itemfilter.json

@@ -0,0 +1,40 @@
+{
+	"Abyssal Blade": {
+		"Attributes": ["strength","damage","stun"],
+		"Bonus": ["+10 Strength","+100 Damage"],
+		"Cost": 6750,
+		"Description": "The lost blade of the Commander of the Abyss, this edge cuts into an enemy's soul.",
+		"abilities": {
+			"Overwhelm": {
+				"description": "Stun a target enemy unit for 2 seconds. Goes through Magic Immunity.",
+				"Extra": "Range 140",
+				"cooldown": 60,
+				"mana": 150,
+				"Ability": "Target Unit",
+				"Affects": "Enemies"
+			},
+			"Bash": {
+				"description": "Gives a chance to stun for 1.4 seconds.",
+				"Extra": "Bash Chance for Melee Heroes: 25%<br />Bash Chance for Ranged Heroes: 10%",
+				"cooldown": 2,
+				"Ability": "Passive",
+				"Affects": "Enemies"
+			}
+		},
+		"Extra Info": "Can be disassembled. Cannot be purchased by Slardar, Faceless Void, Troll Warlord, Spirit Breaker.",
+		"position": "0 -38px"
+	},
+	"Aghanim&#39;s Scepter": {
+		"Attributes": ["strength", "agility", "intelligence", "health", "mana"],
+		"Bonus": ["+10 Strength","+10 Agility", "+10 Intelligence", "+200 HP", "+150 Mana"],
+		"Cost": 4200,
+		"Description": "The scepter of a wizard with demigod-like powers.",
+		"abilities": {
+			"Ultimate Upgrade": {
+				"description": "Upgrades the ultimates of certain heroes. ",
+				"Ability": "Passive"
+			}
+		},
+		"position": "0 -4484px"
+	}
+}

index.php

@@ -190,7 +190,7 @@
                     natsort($item_names);
 
                     foreach($item_names as $name => $class){
-                        $result = "<figure class='item'>
+                        $result = "<figure class='item' id='$name'>
                             <img class='image $class' width='51' height='38' />
                             <figcaption class='description'>
                                 $name

js/main.js

@@ -23,27 +23,27 @@ $(document).ready(function() {
 
     //Make all checkboxes display under eachother.
     setMaxWidth(getMaxWidth());
-    
+
     //-------------------------------
-    
+
     var setDisabledColor = function() {
-    //Get all checkboxes
-    var boxes = $('input:checkbox');
-    
-    
-    $.each(boxes, function(indexInArray, valueOfElement) {
-        //If a checkbox is disabled, set the background to a color to show it.
-        //I could have added or removed a CSS class, but I'm doing that later in the file and right now I also want to use this method.
-        if($(boxes[indexInArray]).attr('disabled')){
-            $(boxes[indexInArray]).parent().css({'background-color': 'red'});
-        } else {
-            //Else, remove colored background
-            $(boxes[indexInArray]).parent().css({'background-color': 'white'});
-        }
-    });
-    
-    }
-    
+        //Get all checkboxes
+        var boxes = $('input:checkbox');
+
+
+        $.each(boxes, function(indexInArray, valueOfElement) {
+            //If a checkbox is disabled, set the background to a color to show it.
+            //I could have added or removed a CSS class, but I'm doing that later in the file and right now I also want to use this method.
+            if ($(boxes[indexInArray]).attr('disabled')) {
+                $(boxes[indexInArray]).parent().css({'background-color': 'red'});
+            } else {
+                //Else, remove colored background
+                $(boxes[indexInArray]).parent().css({'background-color': 'white'});
+            }
+        });
+
+    };
+
     /**
      * End view section
      */
@@ -52,7 +52,7 @@ $(document).ready(function() {
     /**
      * Start logic section
      */
-    
+
     //Upon checking or unchecking a checkbox, hide or display all items not related to it.
     $('input:checkbox').on('change', function() {
         //First thing to do on every change: go over all checkboxes.
@@ -87,7 +87,7 @@ $(document).ready(function() {
                         allPresent = false;
                     }
                 });
-                
+
                 //If an item has the attributes of all checked checkboxes, remove hidden.
                 //If even 1 is missing, set hidden
                 if (!allPresent) {
@@ -106,8 +106,8 @@ $(document).ready(function() {
 
                 $.each(visibleItems, function() {
                     var classes = $(this).children('img').attr('class').split(' ');
-                    
-                    if(classes.indexOf(pureHtml.value) !== -1) {
+
+                    if (classes.indexOf(pureHtml.value) !== -1) {
                         comboPossible = true;
                     }
                 });
@@ -120,12 +120,31 @@ $(document).ready(function() {
             });
 
         }
-        
+
         //And set the backgroundcolor for the disabled checkboxes
         setDisabledColor();
     });
-    
-    
+
+
+    $("figure").on('click', function(eventObject) {
+        var currentItem = getItemInfo(this.id);
+        
+    });
+
+    var getItemInfo = function(itemName) {
+        var jqxhr = $.ajax({
+            url: "http://localhost/Dota2ItemFilter/ajax.php",
+            type: "POST",
+            data: {name: itemName},
+            dataType: "json",
+        }).fail(function() { alert("error"); });
+        
+        jqxhr.done(function(data) {
+            console.log(data);
+        });
+    };
+
+
     /**
      * End logic section
      */