1

I'm practicing with twitter bootsrap and made an example website. I use modal view to display warnings when users vote. But it won't display the warning when you vote first time. it displays second time. if you go to my test site and click on up arrow you will see nothing will be displayed. but when you click one more time you will see the modal message.(which is saying you have to be logging to vote in my language) I cannot figure out why it's happening. thanks for your help.

this is my jquery.

<script>
jQuery(document).ready(function($){

              $('.upvote').click( function(event) {

              event.preventDefault();

              var voteID = $(this).attr("id");

                $.ajax({
                  url: "/ajax.php?Page=votetitle",
                  type: "post",
                  dataType: "json",
                  data: {id : voteID, vote: '1'},
                  success: function(data){
                    if(data.success == 'true'){
                      $('#voteresponse'+voteID).html(data.message);
                    }else{
                      $(".upvote").attr("data-toggle", "modal");
                      $(".upvote").attr("data-target", "#modal");

                                      $('#modal').modal('show');
                      $('#modal').on('show', function () {
                        $('.ModalLabel',this).html('Oy verirken hata oluştu!').css({color: 'red'});;
                        $('.modal-body',this).html(data.message);
                      });
                    }
                  },
                  error:function(){
                      $('#voteresponse').popover({
                        title: 'Hata!',
                        content: 'Server hatasi' 
                      });
                  }
                }); 
              });

              $('.downvote').click( function(event) {

              event.preventDefault();

              var voteID = $(this).attr("id");

                $.ajax({
                  url: "/ajax.php?Page=votetitle",
                  type: "post",
                  dataType: "json",
                  data: {id : voteID, vote: '2'},
                  success: function(data){
                    if(data.success == 'true'){
                      $('#voteresponse'+voteID).html(data.message);
                    }else{
                      $(".downvote").attr("data-toggle", "modal");
                      $(".downvote").attr("data-target", "#modal");

                                      $('#modal').modal('show');
                      $('#modal').on('show', function () {
                        $('.ModalLabel',this).html('Oy verirken hata oluştu!').css({color: 'red'});;
                        $('.modal-body',this).html(data.message);
                      });
                    }
                  },
                  error:function(){
                      $('#voteresponse').popover({
                        title: 'Hata!',
                        content: 'Server hatasi' 
                      });
                  }
                }); 
              });
            });
</script>

modal html

    <div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 class="ModalLabel"></h3>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Kapat</button>
      </div>
    </div>

and buttons

<button type="submit" class="btn btn-mini upvote" id="'.$data['ContentID'].'"><i class="icon-arrow-up"></i></button> 
<span id="voteresponse'.$data['ContentID'].'">'.intval(  $data['TotalVotes'] - $data['VoteSum']  ).'</span>
<button type="submit" class="btn btn-mini downvote" id="'.$data['ContentID'].'"><i class="icon-arrow-down"></i></button>
4

3 回答 3

5

因为这些按钮在点击之前甚至没有 data-toggle="modal" 属性。因此，按钮仅在第一次单击后才获得该属性，并且可以在第二次单击时调用模式。

您可以尝试删除这两行：

 $(".downvote").attr("data-toggle", "modal");
 $(".downvote").attr("data-target", "#modal");

而只是从你的javascript调用模态：

$('#modal').modal('show');

确保将其放在 $('#modal').on('show - function..so 之后，如下所示：

$('#modal').on('show', function () {
    $('.ModalLabel',this).html('Oy verirken hata oluştu!').css({color: 'red'});;
    $('.modal-body',this).html(data.message);
});
$('#modal').modal('show');

正如 Tallmaris 在评论中建议的那样，将事件监听器放在点击处理程序中并不是最好的解决方案，此外我认为你甚至不需要那个监听器，所以做这样的事情 - 改变这个：

$('#modal').on('show', function () {
    $('.ModalLabel',this).html('Oy verirken hata oluştu!').css({color: 'red'});;
    $('.modal-body',this).html(data.message);
});
$('#modal').modal('show');

进入这个：

$('.ModalLabel').html('Oy verirken hata oluştu!').css({color: 'red'});;
$('.modal-body').html(data.message);
$('#modal').modal('show');
于 2013-05-03T13:32:46.020 回答
1

true在不知道 ajax 调用是否返回或不知道的情况下很难调试它false

我确实看到了一条似乎需要 ID 标签的行。不确定这是否是问题所在。

改变：$(".upvote").attr("data-toggle", "modal");

至：$(".upvote").attr("data-toggle", "#modal");

于 2013-05-03T13:33:17.833 回答
1

好的，这是正在发生的事情：

$(".upvote").attr("data-toggle", "modal");
$(".upvote").attr("data-target", "#modal");

在这两行中，您将指示所有投票按钮成为模态切换器。这意味着它们将在实际的 ajax 调用之前触发模态窗口。下一行：

$('#modal').on('show', function () { ... }

实际上是为modal注册一个事件，而且会注册多次！

因此，您的代码中存在上述两个问题。怎么解决？首先，将事件注册到外部，因此您只需将其挂钩一次。其次，删除设置的两行并将其data-toggle替换为仅显示模态：

    $('#modal').modal("show");

让我知道这是否有效。

于 2013-05-03T13:35:33.660 回答