1

第一次海报！为大量的代码道歉。

计划是有一个用户列表，点击每个用户会出现一个 div 弹出窗口，允许更改用户的详细信息。

我希望弹出窗口保持打开状态并显示新的详细信息，而不是在更新记录时关闭弹出窗口。

目前我可以打开弹出窗口并在不关闭弹出窗口的情况下编辑表单。一旦我添加以下内容，表单就会在提交时关闭。

$( "#popup > #skills" ).load( "popup_u_skills.php?uid=" + uid );

如果我通过不传递 url 中的变量，则弹出窗口保持打开状态。我遇到的大问题是我需要传递变量以从我的数据库中获取用户信息。

我的代码：

<!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">&nbsp;</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>
4

1 回答 1

0

重新访问 jquery 后，我发现了问题的答案。真的很简单。

为了在单击其中的提交按钮时保持弹出 div 打开，我需要在提交函数中包含以下代码。例如

$(".submitwithinpopup").click(function() {

Do stuff...

// don't close popup afterwards
return false;

});
于 2014-01-16T11:21:58.980 回答