首页 > 解决方案 > Ajax 请求在搜索完成后没有打开请求

问题描述

我使用 CodeIgniter 创建了一个图片库。我工作正常,并且还通过 ajax 请求将图像加载到模态中,并提供更多详细信息。但是当我使用 CodeIgniter 搜索时,它会加载结果,但 ajax 请求不起作用。我什么都不加载。我尝试使用控制台打印结果,但除了错误之外什么也没显示。这是ajax代码

        $("img.gallery__image").on('click', function () {
            // remove like button on loading new image
            $('#model-img').attr('src', "");
            $('#views').text("");
            $('#info_views').text("");
            $('#publish_date').text("");
            $('#downloads').text("");
            $('#resolution').text("");
            $('.links').empty();
            $('#related-gallery').empty();
            $('#modal-user').attr('href', "");
            $('#modal-user').empty();
            var row1 = "";
            var row2 = "";
            var row3 = "";

            <?php if($page == "explore") :?>
            var btn = $('button.like-btn')[0];
            btn.classList.remove('like-btn-active');
            btn.childNodes[1].classList.remove('icon-active');
            <?php endif; ?>

            // showing model
            $('#imgModel').modal('show');
            var id = this.id;
            console.log(id);
            var base_url = "<?=base_url()?>";
            console.log(base_url);

            jQuery.ajax({
                url:'<?=base_url("user/getImage")?>',
                method: 'POST',
                data: {id:id, page: <?= "'$page'" ?>},
                dataType: 'JSON',
                success: function(r){
                    console.log(r);
                    var today = new Date(r['image'].created_at);

                    const month = today.toLocaleString('default', { month: 'short' });
                    var date = (month)+' '+today.getDate()+ ', ' +today.getFullYear();

                    if(r['image'].image.length == 0)
                        $('#modal-user-image').attr('src', "uploads/images/profile/avater.jpg");
                    else
                        $('#modal-user-image').attr('src', base_url+r['image'].image);

                    $('#model-img').attr('src', base_url+r['image'].img_thumbnail);
                    $('#views').text(r['image'].views);
                    $('#info_views').text(r['image'].views);
                    $('#publish_date').text(date);
                    $('.download-image').attr({
                        'href': base_url+r['image'].img_original,
                        'alt': r['image'].alt_text,
                        'id': id,
                    });

                    <?php if($page == 'all-images') : ?>
                        $('#modal-likes').text(r['image'].likes);
                    <?php endif; ?>
                    
                    $('#downloads').text(r['image'].downloads);
                    $('#modal-user').attr('href', base_url + "user/" +r['image'].username.toLowerCase());
                    $('#modal-user').append('<span>' +CFL(r['image'].first_name) + ' ' + CFL(r['image'].last_name)+ '</span>');
                    $('#resolution').text(r['image'].width + "px X " + r['image'].height + "px");

                    r['tags'].map((item) => {
                        a = $('<a href="search/' + item.tag + '"></a>').text("#"+item.tag);
                        $(".links").append(a);
                    });

                    rLength = r['related'].length;
                    if(rLength < 24)
                        $("#modal-blur").addClass('d-none');
                    else
                        $("#modal-blur")[0].removeClass('d-none');
                    
                    r['related'].map((item, i) => {
                        var related = '<a href="#" class="gallery__link">';
                        related += '<figure class="gallery__thumb">';
                        related += '<img src="' + item.img_thumbnail + '" alt="' + item.name + '" class="gallery__image" id="' + item.id + '">';
                        related += '<figcaption class="gallery__caption">' + item.name.toUpperCase() + '</figcaption>';
                        related += '</figure>';
                        related += '</a>';

                        if(i%3 == 0){
                            row1 += '<div class="gallery__column">';
                            row1 += related;
                        }
                        else if(i%3 == 1){
                            row2 += '<div class="gallery__column">';
                            row2 += related;
                        }
                        else if(i%3 == 2){
                            row3 += '<div class="gallery__column">';
                            row3 += related;
                        }
                    });
                    row1 += '</div>';
                    row2 += '</div>';
                    row3 += '</div>';
                    var relatedGallery = $('#related-gallery').append(row1, row2, row3);

                },
                error: function() {
                    alert('There was some error performing the AJAX call!');
                }
            }).done(function( data ) {
                if ( console && console.log ) {
                    console.log(data);
                }
            }).fail(function() {
                console.log("error");
            });

它调用模态并将数据显示到其中。这是搜索前的图像和结果 搜索前

搜索后 这是搜索后的响应

请尽快帮助我。我被困在这一点上,不知道该怎么办。

标签: ajaxcodeignitersearchresponse

解决方案


推荐阅读