title: jquery popup div and update mysql record
body: <p>First time poster! Apologies for the large about of code.</p>
  
  <p>The plan is to have a list of users and on clicking on each user a div popup will appear allowing changes to the users details.</p>
  
  <p>Rather than the popup closing when the record is updated I'd like the popup to remain open and show the new details.</p>
  
  <p>At the moment I can open the popup and edit the form without the popup closing. As soon as I add the following the form closes on submit.</p>
  
  <pre><code>$( "#popup &gt; #skills" ).load( "popup_u_skills.php?uid=" + uid );
  </code></pre>
  
  <p>If I pass don't pass a variable in the url then the popup stays open. The BIG problem I have is that I need to variable to be passed to get the users information from my DB.</p>
  
  <p><strong>My code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" language="javascript"&gt;
  $(document).ready(function() {
  
      // show popup
      $(".showpopup").click(function() {
  
          // user id variable
          var uid = $(this).attr( "uid" );
  
          $("#popup").fadeIn();
          $( "#popup &gt; #details" ).load( "popup_u_details.php?uid=" + uid ).show();
          //$( "#popup &gt; #skills" ).load( "popup_u_skills.php?uid=" + uid );
  
  
          // close popup
          $(".closepopup").click(function() {
  
              $("#popup").fadeOut();
  
          }); 
  
          // open inner options within popup
          $(".open_inner_popup").click(function() {
  
              var inneropt = $(this).attr( "option" );
  
              $( "#details, #skills, #history" ).hide();
  
              $.get( "pop_u_skills.php", { uid : uid } );
  
              $( "#"+inneropt ).show();
  
          }); 
  
          // if change of skill
          $("#chg_skill").click(function(event){
  
              // use gloabel uid variable from openpopup
              var user = uid;
              // set array variable           
              var selected = new Array();
  
              // foreach checkbox cheked pushed into array
              $("input:checkbox[name=checkbox]:checked").each(function() {
                 selected.push($(this).val());
              });
  
                  // prevent form action
                  event.preventDefault();
  
                  // post selected array and uid to php page
                  $.post( 
                      "run_php.php",
                      { name: selected, uid: user },
  
                          function(data) {
                              $('#stage').show();
                              $('#stage').html("Saved!" + data);
                          });
  
                  });
  
      // end open popup
      });
  
  // end dom
  });
  &lt;/script&gt;
  &lt;style&gt;
  #popup {
      width:400px;
      padding:10px;
      display:none;
      -webkit-box-shadow: 3px 3px 3px 0px #EEE;
      box-shadow: 3px 3px 3px 0px #EEE;
      border:1px solid #CCC;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      z-index:1;
  }
  
  .closepopup {
      color:#FF0000;
      font-weight:bold;
      text-decoration:none;
  }
  
  #stage {
      display:none;
      color:#009900;
      }
  
  #details, #skills, #history {
      display:none;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;?
  $uid = date("H:s:i");
  ?&gt;
  &lt;div id="overlay"&gt;
  
  &lt;div class="showpopup" uid="&lt;? echo $uid; ?&gt;"&gt;&lt;a href="#"&gt;Popup&lt;/a&gt;&lt;/div&gt;
  
      &lt;div id="popup"&gt;
      &lt;a href="#" class="closepopup"&gt;x&lt;/a&gt;
      &lt;br&gt;
      &lt;a href="#" class="open_inner_popup" option="details"&gt;Details&lt;/a&gt; &lt;a href="#" class="open_inner_popup" option="skills"&gt;Skills&lt;/a&gt; &lt;a href="#" class="open_inner_popup" option="history"&gt;History&lt;/a&gt;
  
          &lt;div id="details"&gt;&lt;? include "popup_u_details.php"; ?&gt;&lt;/div&gt;
  
          &lt;div id="skills"&gt;&lt;? include "popup_u_skills.php"; ?&gt;&lt;/div&gt;
  
          &lt;div id="history"&gt;History&lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>POPUP_U_SKILLS.PHP</strong></p>
  
  <pre><code>&lt;div id="stage"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;? echo $_GET["uid"]; ?&gt;
      &lt;form name="form1" method="post" action=""&gt;
        &lt;p&gt;Option 1
          &lt;input type="checkbox" name="checkbox" value="1"&gt;
        &lt;/p&gt;
        &lt;p&gt;
          Option 2
          &lt;input type="checkbox" name="checkbox" value="2"&gt;
        &lt;/p&gt;
        &lt;p&gt;
          Option 3
          &lt;input type="checkbox" name="checkbox" value="3"&gt;
      &lt;/p&gt;
        &lt;p&gt;
          &lt;input type="submit" name="chg_skill" id="chg_skill" value="Update"&gt;
        &lt;/p&gt;
      &lt;/form&gt;
  </code></pre>