title: PHP and jquery, help passing PHP variable to javascript
body: <p>I am trying to allow the users of my website, to upload images and then select one to be a back image,  the uploading works fine, but I have a problem in my controller or view I think, i would appreciate it some could help me out, </p>
  
  <p>VIEW:</p>
  
  <pre><code>&lt;div id="background-select"&gt;
  &lt;?php
  $count = 0;
      if(isset($special)) {
          foreach ($special as $row) {
              print '&lt;div class="select"&gt;';
                  print "&lt;a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'&gt;$count&lt;/a&gt;";
              print '&lt;/div&gt;';
  
                  $background = $row['background_name'];
                  echo $background;
  
          }
      }
      if(isset($generic)) {
          foreach ($generic as $row) {    
              print '&lt;div class="select"&gt;';
                  print "&lt;a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'&gt;$count&lt;/a&gt;";
              print '&lt;/div&gt;';
                  $background = $row['background_name'];
                  echo $background;
  
              }
  
          }
  
      if(isset($user_background)) {
          foreach ($user_background as $row) {
              print '&lt;div class="select"&gt;';
                  print "&lt;a class='background_btn' href='index.php/home/set_background/".$row['background_id']."'&gt;$count&lt;/a&gt;";
              print '&lt;/div&gt;';
                  $background = $row['background_name'];
                  echo $background;
              }
  
          }
  ?&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  $("a.background_btn").click(function(ev){
  ev.preventDefault();
  alert("hello");
  var url = $(this).attr("href");
  alert(url);
  $.ajax ({
      url : url, 
      type: "POST",
      success : function (html) {
          alert("&lt;?php echo $background; ?&gt;")
          $('#wrapper').css('background', 'url(/media/uploads/backgrounds/&lt;?php echo $background; ?&gt;)');
      }
  })
  });
  &lt;/script&gt;
  &lt;div id="wrapper"&gt;
  </code></pre>
  
  <p>CONTROLLER:</p>
  
  <pre><code>public function set_background() {
          $this-&gt;load-&gt;model('image_model');
          if($query = $this-&gt;image_model-&gt;get_background_by_id($this-&gt;uri-&gt;segments[3])) {
              //die(var_dump($query));
              foreach ($query as $row) {
                  $data['background'] = $row['background_name'];
              }
          }
          $this-&gt;load-&gt;view('template/background-select', $data);
      }
  </code></pre>
  
  <p>The problem is that I can only set the background to the first returned value for example if the first loop return $background to = red.png then I cannot get anything but red.png to load in.</p>
  
  <p>Can any one suggest a solution?</p>