在模态窗口中单击“是”后发送表单数据

时间:2013-12-24 14:11:49

标签: javascript jquery twitter-bootstrap

有谁知道这段代码有什么问题。 该页面显示一个包含用户的表。 当单击表单按钮(向用户发送电子邮件)时,弹出模式窗口,当按下“是”按钮时,它会发送邮件。什么都好但是当按下另一个用户2个邮件被发送时,按下其他用户3个邮件被发送等等。直到我刷新页面。 这就像var formClick也持有旧的表单数据。

$(document).on('submit', '#form_sendUserMail', function() {
       // alert('yep');

        var formClick = $(this);
        $('#myModal').modal('show');


        $(document).on('click', '#btnYes', function() {
            $('#myModal').modal('hide');
            $.post("_ajaxCall.php", formClick.serialize(), function(data){

                //alert(data);
                var json = eval('('+data+')');

                if(json.message=='alert') {
                    $('div.alert-success').hide();
                    $('div.alert-danger').show().html(json.string);
                }
                if(json.message=='info') {
                    //$('#refresh').load(json.refreshPage);
                    refreshPage(json.refreshPage, 'div#refresh');
                    $('div.alert-danger').hide();
                    $('div.alert-success').show().html(json.string);
                    $( "form" )[ 0 ].reset();
                }
            });
        });
        return false;
    });

当删除所有与模式相关的东西时,如下所示,它工作正常。

$(document).on('submit', '#form_sendUserMail', function() {  

        $.post("_ajaxCall.php", $(this).serialize(), function(data){

            //alert(data);
            var json = eval('('+data+')');

            if(json.message=='alert') {
                $('div.alert-success').hide();
                $('div.alert-danger').show().html(json.string);
            }
            if(json.message=='info') {
                //$('#refresh').load(json.refreshPage);
                refreshPage(json.refreshPage, 'div#refresh');
                $('div.alert-danger').hide();
                $('div.alert-success').show().html(json.string);
                $( "form" )[ 0 ].reset();
            }
        });
    return false;
});

有人有想法吗?

PHP / HTML代码:

<div id="refresh">
    <fieldset class="transparent">
        <legend><?php echo $sNav['myPartnersNotActive']." (".$totalRows.")"; ?></legend>

        <?php include_once('./_alertNotActive.php'); ?>

        <div class="alert alert-danger"></div><div class="alert alert-success div-hide"></div>

        <table class="table table-bordered players" cellspacing="0">
            <tbody>
                <tr>
                    <td class="bg-black" colspan="5">
                        <div class="col-lg-pull-3">
                            <form role="form" name="form_search" id="form_search" method="POST">
                                <input type="hidden" name="formType" id="formType" value="form_search" />
                                <input type="hidden" name="scriptName" id="scriptName" value="<?=trim($_SERVER['SCRIPT_NAME'],'/')?>" />
                                <div class="input-group">
                                    <input type="search" class="form-control" name="s" id="s" value="<?=$_GET['search']?>">
                                          <span class="input-group-btn">
                                          <button class="btn btn-default" id="search-button" type="submit">
                                              <span class="glyphicon glyphicon-search"></span>
                                          </button>
                                          <button class="btn btn-default" id="search-button" type="reset" onclick="$('#refresh').load('<?=$_SERVER['SCRIPT_NAME']?>');">
                                              <span class="glyphicon glyphicon-remove"></span>
                                          </button>
                                         </span>
                                </div><!-- /input-group -->
                            </form>
                        </div>
                    </td>
                </tr>
                <tr>
                    <th width="27%"><?php echo $LABEL["playerName"] ?></th>
                    <th width="27%"><?php echo $LABEL["mail"]; ?></th>
                    <th width="19%"><?php echo $LABEL["registrationDate"]; ?></th>
                    <th width="26%"><?php echo $LABEL["lastNotificationDate"]; ?></th>
                    <th width="1%" style="text-align:center;"><?php echo $LABEL["actions"]; ?></th>
                </tr>
                <?php while($row = $result->fetch_array()) { ?>
                <tr class="bg<?=++$foo%2 ?>">
                    <td><?php echo $row['usr_name']." ".$row['usr_surname']; ?></td>
                    <td><?php echo $row['usr_email']; ?></td>
                    <td><?php echo $row['usr_creation_dt']; ?></td>
                    <td><?php echo dateDiff($row['usr_notification_dt'], "now", "2"); ?></td>

                    <td class="text-center padding2" width="20px">
                        <form id="form_sendUserMail" name="form_sendUserMail" method="POST">
                            <input type="hidden" name="formType" id="formType" value="form_sendUserMail" />
                            <input type="hidden" id="usr_tk" name="usr_tk" value="<?=$row['usr_tk']?>" />
                            <input type="hidden" id="usr_email" name="usr_email" value="<?=$row['usr_email']?>" />
                            <input type="hidden" id="usr_refkey" name="usr_refkey" value="<?=$row['usr_refkey']?>" />
                            <input type="hidden" id="refreshpage" name="refreshpage" value="<?=$_SERVER['SCRIPT_NAME']?>" />
                            <input type="image" src="../images/icons/user_mail_32x32.png" title="<?=$TITLE['userMail']?>" />
                        </form>
                    </td>
                </tr>
                <?php } ?>
            </tbody>
        </table>

        <?php if($totalRows >= $_SESSION['paginate_lines']) { ?>
            <div class="col-xs-12 text-center">
                <ul class="pagination" id="pagination"></ul>
            </div>
        <?php } ?>

    </fieldset>

<?php
    $result->close();
    $mysqli->close();
?>

    <script type='text/javascript'>

        var options = {
            bootstrapMajorVersion:3,
            currentPage:    <?=$_GET['pageSelection']?>,
            numberOfPages:  10,
            totalPages:     <?=$paginator?>,
            shouldShowPage:function(type, page, current){
                switch(type)
                {
                    default: return true;
                }
            },
            onPageClicked : function(e,originalEvent,event,page) {
                $('#refresh').load('<?=$_SERVER['SCRIPT_NAME']?>?pageSelection='+page+'&search=<?=$_GET['search']?>');
            }
        }
        $('#pagination').bootstrapPaginator(options);

    </script>

</div> <?php //End div refresh ?>


<?/*********************************************************************************************************************
|***  Begin Modal Dialog(s)  *******************************************************************************************
 *********************************************************************************************************************/?>

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"><?=$MODAL['userMail']?></h4>
            </div>
            <div class="modal-body">
                <p>One fine body&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?=$BUTT['no']?></button>
                <button type="button" class="btn btn-primary" id="btnYes"><?=$BUTT['yes']?></button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<?/*********************************************************************************************************************
|***  End Modal Dialog(s)  *********************************************************************************************
 *********************************************************************************************************************/?>

3 个答案:

答案 0 :(得分:0)

你有两个.on()处理程序

$(document).on('submit', '#form_sendUserMail', function() { // once this form is submitted
    $(document).on('click', '#btnYes', function() { // then this is attached
        // so each time you hit submit, it attaches the click event ... 
        // so if you hit submit twice, it will have two click events to fire once you click #btnYes

有点不是做事的最佳方式......但是,在第二次开启(点击)之后,你应该创建一个本地变量来存储你要发送的数据

$(document).on('click', '#btnYes', function() { 
     var myData = // pick which form and serialize form data
     $.post("_ajaxCall.php", myData, function(data){ // and so on

答案 1 :(得分:0)

正如我在评论中提到的,奇怪的行为是由于嵌套的.on命令。

以下是两种可能的解决方案:

  1. 取消.on命令。这样第二个事件就不会重复附加。

    var formClick;
    $(document).on('submit', '#form_sendUserMail', function () {
        // alert('yep');
    
        formClick = $(this);
        $('#myModal').modal('show');
       return false;
    });
    $(document).on('click', '#btnYes', function () {
        $('#myModal').modal('hide');
        $.post("_ajaxCall.php", formClick.serialize(), function (data) {
    
            //alert(data);
            var json = eval('(' + data + ')');
    
            if (json.message == 'alert') {
                $('div.alert-success').hide();
                $('div.alert-danger').show().html(json.string);
            }
            if (json.message == 'info') {
                 //$('#refresh').load(json.refreshPage);
                refreshPage(json.refreshPage, 'div#refresh');
                $('div.alert-danger').hide();
                $('div.alert-success').show().html(json.string);
                $("form")[0].reset();
            }
        });
    });
    
  2. 使用.one代替第二个.on。这样每次都会重新连接第二个事件,但只会触发一次。如果除了#btnYes
  3. 之外还有另一种隐藏模态窗口的方法,这可能会成为一个问题

    只需将$(document).on('click', '#btnYes', function () {更改为$(document).one('click', '#btnYes', function () {

    即可

答案 2 :(得分:0)

通过这样做解决了这个问题:

$(document).on('submit', '#form_sendUserMail', function() {
    $('#btnYes').one('click', function() {