title: Using Ajax and Jquery to modify Css values, based on a Mysql row
body: <p>So I have been working on this system to automatically update a Scene Selection page when you get a new number in your permission table on Mysql.
  I have the Php for the Login, and the Php for grabbing the number in the permission row of the members table working fine.</p>
  
  <p>My Problem lies with the Jquery (Which I started using yesterday :p) I have added an Jquery Ajax connection at the beginning of the script that connects to this php document:</p>
  
  <p><strong>connect.php :</strong></p>
  
  <pre><code>&lt;?php
  mysql_connect($dbhost, $dbuser, $dbpass);
      //Select Database
  mysql_select_db($dbname) or die(mysql_error());
      // Retrieve data from Query String
  
  
  //this selects everything for the current user, ready to be used in the script below
  
  $result = mysql_query("SELECT * FROM members WHERE username = '".$_SESSION['Username']."' LIMIT 1");
  
  //this function will take the above query and create an array
  
  
   //with the array created above, I can create variables (left) with the outputted array (right)
   while($row = mysql_fetch_array($result)) { var_dump($row); $permission = $row['permission']; }
  
  
  
          echo '&lt;u&gt;&lt;b&gt;Permision ID:&lt;/b&gt;&lt;/u&gt; - - No:' .$permission  ; 
  ?&gt;
  </code></pre>
  
  <p>That works fine, I go to that park after I have logged in and it recalls all the data perfectly.
  I believe that the problem lies in the JQuery.</p>
  
  <p><strong>index.php - JQuery:</strong></p>
  
  <pre><code>&lt;script type="text/javascript" src="jquery-1.9.1.min.js"&gt;&lt;/script&gt; 
  &lt;script type="text/javascript"&gt;
  
   $.ajax({
     url:'connect.php',
     datatype:"application/json",
     type:'get',
     data: 'q='+permission, 
     success:function(data){
        count('#result').append(html); 
     },
     error:function(){
        // code for error
     }
   });
  
  
  
          if (['permission'] = '1') {
              $('#middle').load(function() {
        $('#Scene1').fadeIn('slow', function() {
          // Animation complete
        });
      });
  
      }
      //2,3,4,5,6 ommited
  
      });
  
      }
  
          if (['permission'] = '7') {
              $('#middle').load(function() {
        $('#Scene7').fadeIn('slow', function() {
          // Animation complete
        });
      });
  
      }
  
  //--&gt;
  &lt;/script&gt;   
  </code></pre>
  
  <p>That script should set the display style to inherit so that you can see it when the number in the database is the same as the number of the Scene. </p>
  
  <p>Just to give you some background, here is my Scene.</p>
  
  <p><strong>#Scene1 :</strong></p>
  
  <pre><code>    &lt;div id="middle"&gt;
  
  
  
  
  
          &lt;ul id="Scene1" style="display:none;"&gt;
  
  &lt;h2 id="unlocked"&gt;Act One&lt;/h2&gt;
              &lt;li id="navi3"&gt;&lt;a href="#"&gt;&lt;img src="Images/Scene-one-unlocked-unpressed.png" alt="Scene One completed" height="255px" width="340px"/&gt;&lt;/li&gt;&lt;/a&gt;
      &lt;img id="arrow"
      src="Images/Right-Arrow.png" 
      height="80px"
      width="120px"/&gt;
              &lt;li id="navilockedr"&gt;&lt;img src="Images/Scene-two-locked.png" alt="Scene Two locked" height="255px" width="340px"/&gt;&lt;/li&gt;
      &lt;img id="banner"
      src="Images/crime-scene-banner.png" 
      height="5px"
      width="900px"/&gt;
  &lt;h2 id="locked"&gt;Act Two&lt;/h2&gt;
              &lt;li id="navilockedl"&gt;&lt;img src="Images/Scene-three-locked.png" alt="Scene three locked" height="255px" width="340px"/&gt;&lt;/li&gt;
      &lt;img id="arrow"
      src="Images/Right-Arrow.png" 
      height="80px"
      width="120px"/&gt;
              &lt;li id="navilockedr"&gt;&lt;img src="Images/Scene-four-locked.png" alt="Scene four locked" height="255px" width="340px"/&gt;&lt;/li&gt;
      &lt;img id="banner"
      src="Images/crime-scene-banner.png" 
      height="5px"
      width="900px"/&gt;
  &lt;h2 id="locked"&gt;Act Three&lt;/h2&gt;
              &lt;li id="navilockedl"&gt;&lt;img src="Images/Scene-five-locked.png" alt="Scene five locked" height="255px" width="340px"/&gt;&lt;/li&gt;
      &lt;img id="arrow"
      src="Images/Right-Arrow.png" 
      height="80px"
      width="120px"/&gt;
              &lt;li id="navilockedr"&gt;&lt;img src="Images/Scene-six-locked.png" alt="Scene six locked" height="255px" width="340px"/&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
  </code></pre>
  
  <p>I was wondering if anyone skilled in JQuery could point me in the right direction, as I don't know if my syntax is right, or if im simply failing to connect to 'connect.php'.</p>