Bootstrap工具提示不会在插入注释后进行渲染

时间:2015-02-08 07:54:19

标签: javascript php jquery ajax twitter-bootstrap

我在我的网络应用程序上实现了一个评论系统,如果记录正确保存到数据库中,评论将以JSON格式从服务器返回。

其他所有内容似乎都正常呈现,除了工具提示,其中包含用于编辑和删除注释的链接。注释被附加到div后,工具提示不会隐藏这些链接。

我正在使用CodeIgniter作为PHP框架,尽管这些信息可能没用,因为它是一个UI问题。

这是我插入评论的PHP代码(../ application / controllers / comments):

public function add() {

    if ($_SERVER['REQUEST_METHOD'] == 'POST') {

        $event_id = $this->input->post('event_id');
        $user_id = $this->session->userdata('user_id');

        $this->form_validation->set_rules('event_comment', 'Kommentti', 'trim|xss_clean|required|htmlspecialchars');

        if ($this->form_validation->run() === false) {

            $this->output->set_content_type('application_json');
            $this->output->set_output(json_encode(array('st' => 0)));
            return false;
        } else {

            $data = array('event_id' => $event_id, 'user_id' => $user_id, 'comment' => $this->input->post('event_comment'));

            $comment = $this->comment_model->addComment($data);
        }

        if ($comment === true) {

           $this->load->model('comment_model');
                $new_comment = $this->comment_model->getNewestComment($event_id, $user_id);

                $this->output->set_content_type('application_json');
                $this->output->set_output(json_encode($new_comment));
                return true;
        } else {

            $this->output->set_content_type('application_json');
            $this->output->set_output(json_encode(array('st' => 0)));
            return false;
        }
    }
}

这是我的AJAX(../ public / js / ajax.js):

$("#event_comment").keypress(function(e) {
    if(e.which == 13) {
        var from = $('.form-comments');

        $.ajax({
            url: from.attr('action'),
            type: from.attr('method'),
            data: $(from).serialize(),
            dataType: 'json',
            beforeSend: function() {
                    // Piilotetaan "Luo tapahtuma" - painike ja korvataan se
                    // "spinner" - ikonilla
                    from.find(".form-comment-send").hide();
                    from.find("#spinner_comment").show();
                },
                success: function(data) {
                    if(data) {

                        // RENDER MESSAGE HERE AND APPEND IT TO COMMENT BODY
                        renderCommentHTML( data[0] );

                    }

                }, complete: function() {
                    from.find("#spinner_comment").hide();
                    from.find(".form-comment-send").show();
                }
            });
        return false;
    }
});

最后是渲染HTML的函数(../ public / js / functions.js)

function renderCommentHTML(data) {

var comment = '';

comment += '<div class="event-comments-comment post-comments-comment media" id="'+ data.id +'">';

        // tooltip starts here                  
        comment += '<div href="#" data-toggle="tooltip" title="" class="pull-right">';
        comment += '<i class="fa fa-chevron-down grey fa-1x no-pad"></i>';              
        comment += '<div class="tooltip-content">';
        comment += '<a role="button" class="btn-edit">Muokkaa</a>';           
        comment += '<form action="comments/delete" method="post">';
        comment += '<input type="hidden" name="event_id" value="'+ data.event_id +'">';
        comment += '<input type="hidden" name="comment_id" value="' + data.id +'">';
        comment += '<button type="submit" name="delete_comment">Poista</button>';
        comment += '</form>';
        comment += '</div>';
        comment += '</div>' 
        // Tooltip ends here                

        comment += '<a class="media-left" href="#">';
            if(data.is_fb_img == 0) {    
                comment += '<img class="comment-pic semi-round" src="'+url+'public/images/uploads/profiles/'+ data.profilepic +'">';
            } else {
                comment += '<img class="comment-pic semi-round" src="'+ url + data.profilepic +'">';
            }
        comment += '</a>';

        comment += '<div class="media-body wide">';
        comment += '<h5 class="media-heading">'+ data.name +'</h5>';
        comment += '<div class="edit_comment_area">';
        comment += '<div class="comment-container">';
        comment += '<form action="events/edit" method="post" class="edit-comment">';
        comment += '<input type="hidden" name="c_id" value="'+ data.id +'">';
        comment += '<div class="comment-text">'+data.comment+'</div>';
        comment += '</form>';
        comment += '</div>';
        comment += '</div>';

        comment += '<div class="comment-date">';
        comment += '<span data-livestamp="'+ new Date().toISOString() +'"></span>';
        comment += '</div>';        
        comment += '</div>';
        comment += '</div>';

        $('.comment-holder').append(comment);
}

0 个答案:

没有答案