1

初ポスター！大量のコードについてお詫び申し上げます。

計画では、ユーザーのリストを作成し、各ユーザーをクリックすると div ポップアップが表示され、ユーザーの詳細を変更できるようになります。

レコードが更新されたときにポップアップを閉じるのではなく、ポップアップを開いたままにして、新しい詳細を表示したいと思います。

現時点では、ポップアップを開いて、ポップアップを閉じずにフォームを編集できます。以下を追加するとすぐに、送信時にフォームが閉じます。

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

URLに変数を渡さない場合、ポップアップは開いたままになります。私が抱えている大きな問題は、DB からユーザー情報を取得するために変数を渡す必要があることです。

私のコード:

<!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 に答える