Я пытаюсь сделать так, чтобы при нажатии кнопки поиска она удаляла предыдущие результаты поиска с экрана и создавала новые результаты поиска. Однако, когда я делаю это, я получаю ошибку скользящего слайдера, и все мои элементы располагаются вертикально. Я не совсем уверен, что то, что я пытаюсь сделать, возможно сделать с помощью скользящего слайдера, потому что я по сути создаю search-slider div. Когда я не удаляю () мой search-slider div, предыдущие результаты будут загружены рядом со старыми результатами, но они будут отображаться с помощью скользящего слайдера. Я не уверен, куда я должен идти отсюда.
К вашему сведению, фрагмент не будет работать здесь. Я сделал это для удобства просмотра кода. Если кто-то может помочь, это будет очень ценноСпасибо.
$(function() {
$('#search').click(function() {
var nameVal = $('#shouhinName').val();
var makerVal = $('#makerName').val();
var categoryVal = $('#selectText').val();
var sliderVal = $('#hideme').val();
$.ajax({
type: "POST",
url: "shelf/test",
data: {
shouhinName: nameVal,
makerName: makerVal,
selectText: categoryVal,
best: sliderVal
},
success: function hi(j_data) {
alert(j_data.url);
// create a new div element
//const images = j_data;
// console.log(imagePath);
/* for (const image of imagePath) {
const img = document.createElement("img");
if (image.slice(0, 5) == "shelf") {
img.src = `/check/assets/img/${image}`;
} else {
img.src = '/check/assets/img/noimage.png';
}
img.classList.add("new");
var div = document.createElement("div");
div.id = `${image}`
div.classList.add("image");
linebreak = document.createElement("br");
// div.classList.add("column");
document.getElementById('search-slider').appendChild(div);
// document.getElementById('rows').appendChild(div);
//img.setAttribute("style", "text-align: center;");
// document.body.appendChild(img);
document.getElementById(image).appendChild(img);
} */
console.log(j_data);
// console.log(images);
let index = 0;
const display = "table"; // or "grid" if horizontal, but this migh depend where you place the rest of the code, cause i added the style to the body
const x = 0;
const y = 0;
document.body.style.display = display;
$('#search-slider').remove();
// function createHTML() {
// console.log("E: Execute & R: Request & I: Informative");
//loop to go true all images
const search = document.createElement("div");
search.id = 'search-slider';
search.className = "search-items";
console.log(search.id);
document.getElementById("divbox").appendChild(search);
for (const image of j_data.url) {
// console.log();
//each image will correspond to a canvas element
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
//each canvas element will has is own properties (in this case all the same)
canvas.id = "option" + [index];
var canId = canvas.id;
var tooltip = j_data.tooltip;
// console.log(tooltip[index]);
// tooltip is the array
// var tooltipSel = document.getElementById(canId);
/* canvas.height = images.height;
canvas.width = images.width; */
// canvas.setAttribute('heigth', '0');
canvas.setAttribute('width', '75px');
canvas.setAttribute('padding-top', '56.25%');
canvas.setAttribute('object-fit', 'contain');
canvas.setAttribute('data-html', 'true');
// canvas.title = "hi";
// console.log('#'+ canvas.id);
var div = document.createElement("div");
div.setAttribute('data-html', 'true');
div.id = j_data.itemid[index]; //image.slice(26, 34);
// $('#'+div.id).remove();
/* var itemID = div.id;
var itemidArray = [];
itemidArray = itemID; */
// console.log(itemidArray);
console.log(div.id);
// canvas.style.padding = "10px";
// canvas.classList.add("suiteiCanvas");
//function to get the corresponded image of that particular canvas element
drawImages(canvas);
//add an event listener for when a user click on the particular canvas
canvas.addEventListener("click", optionClicke, false);
//all html part was handle we can append it to the body
// document.body.appendChild(canvas);
//console.log(image);
var text = j_data.tooltip[index];
/* div.title = "";
$('#' + div.id).data('powertip', function() {
return div.title = tooltip[index];
}); */
div.title = text;
document.getElementById('search-slider').appendChild(div);
document.getElementById(div.id).appendChild(canvas);
// $(div.id).prepend(text);
index++;
}
// }
// console.log(itemidArray);
function drawImages(canvas) {
//we need to use the getContext canvas function to draw anything inside the canvas element
const ctx = canvas.getContext("2d");
const background = new Image();
// for text
//This is needed because if the drawImage is called from a different place that the createHTML function
//index value will not be at 0 and it will for sure with an heigher id that the one expected
//so we are using regex to remove all letters from the canvas.id and get the number to use it later
index = canvas.id.replace(/\D/g, "");
//console.log('E: Drawing image ' + index + ' on canvas ' + canvas.id);
//get the image url using the index to get the corresponded image
// background.src = images.url[index];
if (j_data.url[index] !== '/check/assets/img/noimage.png') {
background.src = "/check/assets/img/" + j_data.url[index];
} else {
background.src = '/check/assets/img/noimage.png'
}
//no idea why but to place the image, we need to use the onload event
//https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
background.onload = function() {
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
};
/* background.onerror = function() {
const text = "インバ ど";
ctx.fillText(text, 0, 0 + 10 * 1);
}; */
}
function drawX(canvas, item) {
const ctx = canvas.getContext("2d");
// console.log("E: Placing X on canvas " + canvas.id);
ctx.beginPath();
ctx.arc(40, 75, 25, 0, 2 * Math.PI, false);
ctx.lineWidth = 5;
ctx.strokeStyle = "#FF0000";
ctx.closePath();
ctx.stroke();
console.log(item);
hdnName.value = item;
}
/* function fillTextLine(canvas, x, y) {
var text = "インバ ど";
const ctx = canvas.getContext("2d");
var textList = text.split(" ");
var lineHeight = ctx.measureText("あ").width;
textList.forEach(function(text, i) {
ctx.fillText(text, x, y + lineHeight * i);
});
} */
function clear(canvas) {
// console.log("E: clearing canvas " + canvas.id);
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
drawImages(canvas);
}
function optionClicke(e) {
log = true;
const canvas = document.getElementsByTagName("canvas");
var hdnName = document.getElementById("sendServ");
let index = 0;
for (const option of canvas) {
if (log)
// console.log("I: User clicked at option " + e.target.id + ":" + option.id);
log = false;
if (e.target.id === option.id) {
// console.log("R: Drawing request at canvas " + option.id);
// console.log(j_data.itemid[index]);
const item = j_data.itemid[index];
console.log('draw' + item);
console.log(index);
drawX(option, item);
} else {
// console.log("R: Clearing request at canvas " + option.id);
clear(option);
//console.log('clear'+item);
}
index++;
}
}
$('.search-items').slick('unslick').slick('reinit');
$(document).ready(function() {
$('.search-items').not('.slick-initialized').slick({
infinite: false, //true
slidesToShow: 8,
slidesToScroll: 8,
arrows: true,
centerMode: false,
width: 200,
prevArrow: $('.prev'),
nextArrow: $('.next')
});
});
// console.log(j_data);
// need to do my image processing in here
},
error: function(xhr, status, error) {
console.log("post error");
console.log(error);
alert(error);
},
complete: function(xhr, status) {
console.log("fin");
},
});
});
});
.search-items{
max-width: 1800px;
}
<div class="search-items" id="search-slider">
</div>