ajax - 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");
});
它调用模态并将数据显示到其中。这是搜索前的图像和结果 搜索前
搜索后 这是搜索后的响应
请尽快帮助我。我被困在这一点上,不知道该怎么办。
解决方案
推荐阅读
- r - R:读取缺少最后一列的 fwf 文件
- java - 在同一 TomEE 实例上的并行应用程序中使用 JasperReports 是不可能的(JasperReports 上下文)?
- c# - 自定义模型绑定器不会影响 ASP.NET CORE 3.1 中的属性
- javascript - 如何获取所选选项的索引
- java - 如何将精灵移动到与 Java 中的其他精灵相同的级别?
- php - Hostgator 与服务器的连接失败 PHP V 7.1
- python - 使用 re.findall 在没有括号的数据框中创建新列
- paw-app - JSON视图不按键排序结果有什么特殊原因吗?
- cakephp - Cakephp 4 Url->使用数组构建会引发找不到路由错误,但不是字符串
- google-ads-api - 在 Google Ads 中提醒未获批准的产品脚本