First time poster! Apologies for the large about of code.
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.
Rather than the popup closing when the record is updated I'd like the popup to remain open and show the new details.
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.
$( "#popup > #skills" ).load( "popup_u_skills.php?uid=" + uid );
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.
My code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
// show popup
$(".showpopup").click(function() {
// user id variable
var uid = $(this).attr( "uid" );
$("#popup").fadeIn();
$( "#popup > #details" ).load( "popup_u_details.php?uid=" + uid ).show();
//$( "#popup > #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
});
</script>
<style>
#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;
}
</style>
</head>
<body>
<?
$uid = date("H:s:i");
?>
<div id="overlay">
<div class="showpopup" uid="<? echo $uid; ?>"><a href="#">Popup</a></div>
<div id="popup">
<a href="#" class="closepopup">x</a>
<br>
<a href="#" class="open_inner_popup" option="details">Details</a> <a href="#" class="open_inner_popup" option="skills">Skills</a> <a href="#" class="open_inner_popup" option="history">History</a>
<div id="details"><? include "popup_u_details.php"; ?></div>
<div id="skills"><? include "popup_u_skills.php"; ?></div>
<div id="history">History</div>
</div>
</div>
</body>
</html>
POPUP_U_SKILLS.PHP
<div id="stage"> </div>
<? echo $_GET["uid"]; ?>
<form name="form1" method="post" action="">
<p>Option 1
<input type="checkbox" name="checkbox" value="1">
</p>
<p>
Option 2
<input type="checkbox" name="checkbox" value="2">
</p>
<p>
Option 3
<input type="checkbox" name="checkbox" value="3">
</p>
<p>
<input type="submit" name="chg_skill" id="chg_skill" value="Update">
</p>
</form>
