Repositioning bootstrap card after filtering - javascript

through Bootstrap Studio and a few lines of PHP, I dynamically generate a series of Cards.
I can filter the cards via an input box, but the filtered cards, don't reposition....they do if i change the width of the browser window....is there a way to make them reposition?
I'm posting my code
<div style="padding: 20px;border-radius: 20px;" id="card-list">
<div class="row" id="myItems" data-masonry="{"percentPosition": true }" >
<?php
//creo l'elenco dei campionati che si disputeranno fra oggi e domani
foreach ($arr_fed_NS as $key => $value) {
$text_camp=str_replace(']','',str_replace('[','',$value));
// echo '<br>ecco: '.$text_camp.'<BR>';
echo'
<div class="col-sm-6 col-lg-4 mb-4">
<div class="card">
<picture type="" srcset=""><img class="card-img-top p-3" src="'.$arr_camp[$text_camp].'" style="border-radius: 24px; object-fit: cover"></picture>
<div class="card-body">
<h3 class="fw-bolder card-title" style="text-align: center;--bs-body-font-weight: bold;">'.$text_camp.'</h3>
</div>
</div>
</div>';
}
?>
</div><script async="" src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"></script>
</div>
function prova(){
const input = document.getElementById('filter').value.toUpperCase();
const card = document.getElementsByClassName('card');
for (let i = 0; i < card.length; i++) {
let title = card[i].querySelector(".card-body h3.card-title");
if (title.innerText.toUpperCase().indexOf(input) > -1){
card[i].style.display="";
}else {
card[i].style.display="none";
}
}
}

Related

Replace div class to another class using php or Javascript

I want to replace the class in the div from
this
<div class="producttitle"></div>
to this
<div class="producttitle h3"></div>
The above class is under the main div it has around 5 other classes to it
<div class="col-md-3 col-xs-6 cegg-gridbox">
<div class="cegg-thumb"></div>
<div class="producttitle"><div class="cegg-mb10"></div></div>
<div class="cegg-btn-grid cegg-hidden hidden-xs"></div>
</div>
const div = document.querySelector('producttitle');
div.classList.replace('producttitle','producttitle h3');
console.log(document.querySelector('producttitle').classList.value);
// Expected output: multi-class header first title
document.querySelector('producttitle').classList.replace('producttitle', 'producttitle h3')
console.log(document.querySelector('producttitle').classList.value);
// Expected output: multi-class header first bundle
I tried both the aboves ones but it's not working, correct me what I'm doing wrong here.
The snippet below is a proof-of-concept, basically I added two buttons to test adding or removing the class. For the sake of simplicity I assumed that you want to apply this for a single element, hence the use of .querySelector.
function add(selector, cl) {
let element = document.querySelector(selector);
if (element.classList.contains(cl)) {
alert('Class was already added');
} else {
element.classList.add('h3');
}
}
function remove(selector, cl) {
let element = document.querySelector(selector);
if (!element.classList.contains(cl)) {
alert('Class was already removed');
} else {
element.classList.remove('h3');
}
}
.h3 {
background-color: green;
}
<div class="col-md-3 col-xs-6 cegg-gridbox">
<div class="cegg-thumb"></div>
<div class="producttitle">The title<div class="cegg-mb10"></div></div>
<div class="cegg-btn-grid cegg-hidden hidden-xs"></div>
</div>
<input type="button" onclick="add('.producttitle', 'h3')" value="Add h3">
<input type="button" onclick="remove('.producttitle', 'h3')" value="Remove h3">
Let's see how we can support plural class additions/removals:
function add(selector, cl) {
let elements = document.querySelectorAll(selector);
for (let element of elements) {
if (!element.classList.contains(cl)) {
element.classList.add(cl);
}
}
}
function remove(selector, cl) {
let elements = document.querySelectorAll(selector);
for (let element of elements) {
if (element.classList.contains(cl)) {
element.classList.remove('h3');
}
}
}
.h3 {
background-color: green;
}
<div class="col-md-3 col-xs-6 cegg-gridbox">
<div class="cegg-thumb"></div>
<div class="producttitle">The title<div class="cegg-mb10"></div></div>
<div class="cegg-btn-grid cegg-hidden hidden-xs"></div>
</div>
<div class="col-md-3 col-xs-6 cegg-gridbox">
<div class="cegg-thumb"></div>
<div class="producttitle">The second title<div class="cegg-mb10"></div></div>
<div class="cegg-btn-grid cegg-hidden hidden-xs"></div>
</div>
<input type="button" onclick="add('.producttitle', 'h3')" value="Add h3">
<input type="button" onclick="remove('.producttitle', 'h3')" value="Remove h3">
Here I'm not alerting when the addition/removal did not succeed because it does not make sense to alert partial failures in the context of this test.
So, I found the solution
<h3 class="producttitle">
<?php if ($merchant = TemplateHelper::getMerhantName($item)): ?>
<div class="cegg-mb10">
<small class="text-muted title-case"><?php echo \esc_html($merchant); ?></small>
</div>
<?php endif; ?>
<?php if ($item['rating']): ?>
<div class="cegg-title-rating">
<?php TemplateHelper::printRating($item, 'small'); ?>
</div>
<?php endif; ?>
<?php echo \esc_html(TemplateHelper::truncate($item['title'], 80)); ?>
</h3>
From basic paragraph to a wrapped heading h3

Vue.js does not display value on html

I really don't know what to do about it.
I'll try to explain:
I need to output value "senderName" in block of chat. For it, iteration over the arrays is used on mounted method. There are successfully output in console and Vue debagger extension, but the field for name is empty.If you enter text instead of the {{}} template, then everything is displayed.
This is html code
<div
v-for="chat in chats"
:key="chat.id"
#click="changeChat(chat.private_chat_id)"
class="card chat-chart"
style="
width: 100%;
margin-bottom: 1px;
box-shadow: none;
border: 1px solid #eee;
"
>
<div
class="card-body mt--3"
style="
height: 100px !important;
padding: 0.8rem i !important;
"
>
<div class="row align-items-center justify-content-start">
<div class="col-2">
<span class="avatar avatar-sm rounded-circle">
<img
src="https://ptetutorials.com/images/user-profile.png"
alt="avatar"
/>
</span>
</div>
<div class="col-8 d-flex align-items-center">
<h4 class="card-title align-self-center mb-0">
{{ chat.senderName }}
</h4>
</div>
</div>
<div
class="row align-items-center justify-content-end mt--4 mb-4"
style="height: 1px"
>
<div
v-if="chat.unreadCount > 0"
class="d-inline-block rounded-circle bg-success text-light ml-2 p-1"
style="
color: white !important;
font-weight: bold;
width: 30px;
height: 30px;
"
>
<!-- <p
class="text-center font-weight-bold"
style="line-height: 1.4"
>
{{ (chat.unreadCount > 99) ? 99 : chat.unreadCount
}}
</p> -->
</div>
</div>
<div
class="row align-items-center justify-content-start ml-1"
>
<p>chat.msg</p>
</div>
</div>
</div>
And here mounted method
mounted() {
// Get all chats for user with id - userId
axios
.get("/api/users/" + this.userId + "/privatechat")
.then((res) => {
appChats.chats = res.data;
// console.log(this.chats);
// Itereate array of user's private chats
for (let i = 0; i <= res.data.length; i++) {
if (!res.data[i]) {
continue;
} else {
// console.log(res.data[i]);
let chatObj = res.data[i];
// Get info of the chat with its id
axios
.get("/api/privatechat/" + chatObj.private_chat_id)
.then((response) => {
// console.log(response.data);
for (values of response.data) {
// If user's id of the chat equals id of our user then skip
if (values.user_id == appChats.userId) continue;
else {
// console.log(values.user_id);
appChats.chats[i]["senderId"] = values.user_id;
// Get userName of our interlocutor
axios
.get("/api/users/" + values.user_id)
.then((r) => {
appChats.chats[i]["senderName"] =
r.data[0].username;
});
}
}
});
}
}
});
},
There are some pics:
https://i.imgur.com/tSKBIeK.png
https://i.imgur.com/nxbhOvE.png // this pic is about Vue js extension

How can I print a specific Index of an Array on the DOM after a button click redirecting to a different HTML file?

I am using a Bootstrap Carousel, but the slides of the carousel are generated through DOM by looping through an array called "Capris".
There is a button that displays on each slide that is also specific to each index.
What I am trying to do is when a User clicks on one of the buttons, it redirects them to a different HTML file and prints to DOM that same index, just on the other HTML page.
I managed to do everything except having that index print to DOM on the second HTML file. Here is a snippet of my code for the carousel and the button's event listener:
const buyCapriBttn = () => {
for (let i = 0; i < capris.length; i++) {
document.querySelector(`#${capris[i].name}`).addEventListener('click', function () {generateProduct(capris[i])});
}
}
const capriCarousel = () => {
let domString = '';
for (let i = 0; i < capris.length; i++) {
if (i === 0) {
domString += `
<div class="carousel-item active">
<img class="d-block w-100" src="${capris[i].imageUrl}" alt="Capri 1">
<div class="d-flex justify-content-center">
<a id="${capris[i].name}" class="btn btn-primary capri-btn" href="/capris.html" role="button">Buy ${capris[i].name}</a>
</div>
<p class="capri-description">${capris[i].description}</p>
</div>
`;
} else if (i >= 1) {
domString += `
<div class="carousel-item">
<img class="d-block w-100" src="${capris[i].imageUrl}" alt="Capri 1">
<div class="d-flex justify-content-center">
<a id="${capris[i].name}" class="btn btn-primary capri-btn" href="/capris.html" role="button">Buy ${capris[i].name}</a>
</div>
<p class="capri-description">${capris[i].description}</p>
</div>
`;
} else;
}
printToDom("#carousel-items", domString);
buyCapriBttn();
}
When the button is clicked, it runs the generateProduct function for that index. Here is a snippet of that function that is run:
const generateProduct = (selectedPants) => {
domString = '';
console.log(selectedPants);
for (let i = 0; i < capris.length; i++) {
if (capris[i] === selectedPants) {
domString += `
<div id="caprisDom">
<img id="buycaprispic" src="${capris[i].imageUrl}">
<div id="nameandrating">
<h5 id="buycaprisname">${capris[i].name}</h5><h2>☆☆☆☆☆</h2>
</div>
<div class="caprisinfobox">
<p id="caprisinfo">${capris[i].description}</p>
<div class="sizeandprice">
<div id="sizeselector">
<label id="sizelabel">Size:</label>
<select name="sizelist" id="size">
</select>
</div>
<h3 id="price">$${capris[i].price}</h3>
</div>
<button id="cartbutton">Add to Cart</button>
</div>
</div>
`;
}
}
printToDom('#caprismain', domString);
}
I have a printToDom function that prints to those ids if you need that as well.
NOTE: In this exercise, I am trying to not use JQuery
Any thoughts and help are much appreciated!
Is all you need the index position of the item? I'd probably add it dynamically in the a declaration. Something like <a id="${capris[i].name}" class="btn btn-primary capri-btn" href="/capris.html?index=${i}" role="button">Buy ${capris[i].name}</a>
So it should look like this:
const capriCarousel = () => {
let domString = '';
for (let i = 0; i < capris.length; i++) {
if (i === 0) {
domString += `
<div class="carousel-item active">
<img class="d-block w-100" src="${capris[i].imageUrl}" alt="Capri 1">
<div class="d-flex justify-content-center">
<a id="${capris[i].name}" class="btn btn-primary capri-btn" href="/capris.html?index=${i}" role="button">Buy ${capris[i].name}</a>
</div>
<p class="capri-description">${capris[i].description}</p>
</div>
`;
} else if (i >= 1) {
domString += `
<div class="carousel-item">
<img class="d-block w-100" src="${capris[i].imageUrl}" alt="Capri 1">
<div class="d-flex justify-content-center">
<a id="${capris[i].name}" class="btn btn-primary capri-btn" href="/capris.html?index=${i}" role="button">Buy ${capris[i].name}</a>
</div>
<p class="capri-description">${capris[i].description}</p>
</div>
`;
} else;
}
printToDom("#carousel-items", domString);
buyCapriBttn();
}
Then, in the other page, in your js, you'd grab the query select using URLSearchParams like so:
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('index');

Laravel Javascript - Check if theme exists in session, add class

I'm working on a system where the user can select a product and go to the next page. This product then gets saved in the session using laravel sessions. When the user decides to go to the next page and come back. The chosen product is indeed saved in the session, but the is no way for them to see what product they have chosen because the class isn't applied to the product that was chosen.
The code may clarify it better:
#foreach($themes as $theme)
<div class="col-md-4 mb-4">
<div class="card theme-card card-hover depth-2 border-0" id="theme-id-{{$theme->id}}">
<a href="" class="theme-link" data-toggle="modal" data-target="#theme{{ $theme->id }}">
<div class="card-image" style="height: 200px; background-image: url('/uploads/{{ $theme->thumbnail }}'); background-size: cover; background-position: center center;"></div>
<div class="card-body">
<div class="row">
<div class="col-md-2 vertical-center">
<i class="fab fa-magento fa-lg"></i>
</div>
<div class="col-md-10">
<p class="m-0">{!! str_limit($theme->name, $limit = 32, $end = '...') !!}</p>
<small class="text-muted">{{ $theme->productable_type }}</small>
</div>
</div>
</div>
</a>
<div class="card-footer bg-white border-0 text-right pt-0">
<div class="row">
<div class="col-md-6 text-left">
<input type="hidden" class="theme-name" name="theme[{{$theme->id}}]">
{{--<input type="hidden" value="{{ $theme->composer_package }}">--}}
<button data-card-id="{{$theme->id}}" class="btn btn-orange btn-sm btn-theme-choice">Kiezen</button>
</div>
<div class="col-md-6 text-right">
<span style="font-size: 20px;" >€ {{ $theme->price }} EUR</span>
</div>
</div>
</div>
</div>
</div>
#endforeach
In the above code, I for each trough every so-called "Theme" and I'm giving the ID of the theme as a data target and as ID. Then in my Javascript code, I do the following:
$('.btn-theme-choice').on('click', function (event) {
event.preventDefault();
newSelectedCardId = $(event.target).data('card-id');
if(cardId === null) {
cardId = newSelectedCardId;
} else if (cardId !== newSelectedCardId) {
$('#theme-id-' + cardId).removeClass('theme-chosen').find("input[name='theme["+cardId+"]']").val('');
cardId = null;
}
var card = $('#theme-id-' + cardId );
card.toggleClass('theme-chosen');
selectedCardInput = card.find("input[name='theme["+cardId+"]']");
if( !$('.theme-card').hasClass('theme-chosen') ) {
selectedCardInput.val('');
} else if ( $('.theme-card').hasClass('theme-chosen') ) {
selectedCardInput.val('selected');
}
console.log(selectedCardInput);
});
Here I add the class to the card so the user can See which card they've selected. This choice then gets saved in the session using some PHP code in the controller
if( $theme == null ) {
return redirect('plugins');
} elseif( $theme != null ) {
foreach($this->predefinedArray as $value) {
$request->session()->put('chosen_theme.' . $value, $theme->$value);
}
$request->session()->put('chosen_theme.composer_package', $theme->productable->composer_package);
return redirect('plugins');
}
problem
How can I read the session and add the class to the card with the IDs that were stored in the session so if the person leaves the page and comes back, they can see what cards they've selected?
Thanks in advance
Try this in your view..
<div class="card theme-card card-hover depth-2 border-0 {{ \Session::get('chosen_theme.composer_package') == $theme->id ? 'theme-chosen' : '' }}" id="theme-id-{{$theme->id}}">
Whenever the theme id is in the session and the page loaded the class will be added, and if it is not in the session then the class won't be added.
Let me know the result..

How to Change Data from the right side to the left by clicking using EF

I want to know how can I change my data from the right side to the left by clicking correctly using Entity Framework. The data is in spanish, sorry for that but I can´t change it.
Here is my View where I can only change the "Titulo" that means in enlgish Title and the Content but I have problem with my DateTime and my Images that become a related table and with int data. The Id change because it appears in the right side (I dont want to show the Image and Id data in the right side).
To show the principal Image I use this #foreach where I get the data from the second table called "Noticias1" that means in english News1 where are the Image data for every News and if (img != null && img.Nombre.Equals(#principalId+"_0")) to show me only the Principal Img that is equal to the selected Id (I will show the others Img behind the content.)
Here the code
#foreach (var n in Model)
{
var img = n.Noticias2.FirstOrDefault();
if (img != null && img.Nombre.Equals(#principalId+"_0"))
{
var imgRuta = #img.Ruta+#img.Nombre+#img.Extension;
<img id="currentprincipalImagen" src="#imgRuta" class="img-responsive" alt="Imagen de Marte" />
<figcaption>
<p id="currentPrincipalImagenTitulo">#img.Descripcion</p>
</figcaption>
}
}
Here is my full view code
#{
var format = "dddd, MMMM dd, yyyy";
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_LayoutPage.cshtml";
int principalId = Model[0].IdNoticia;
string principalTitulo = Model[0].Titulo;
string principalContenido = Model[0].Contenido;
DateTime principalFechaDesde = Convert.ToDateTime(Model[0].FeDesde);
DateTime principalFechaHasta = Convert.ToDateTime(Model[0].FeHasta);
}
<script type="text/javascript">
function changeDisplay(e) {
var principalTitulo = $(e).text();
var principalContenido = $(e).siblings(".Contenido:first").html();
var principalId = $(e).siblings(".IdNoticia:first").html();
var principalFechaDesde = $(e).siblings(".FeDesde").html();
$("#currentprincipalTitulo").html(principalTitulo);
$("#currentprincipalContenido").html(principalContenido);
$("#currentprincipalId").html(principalId);
$("#currentprincipalFechaDesde").html(principalFechaDesde);
}
</script>
<!-- Principal -->
<div class="col-md-12 main">
<div class="header sec-title-hd">
<div class="bg-calendar"></div>
<div class="col-md-7">
<h5 class="pull-left">NOTICIAS</h5>
<div>
<img src="slider/img/arrow-left.png"> VOLVER
</div>
</div>
</div>
<div class="content-inter">
<div class="container-fluid sec-title-hd-sub">
<div class="row">
<div class="col-md-7">
<div>
<figure class="img_N">
#foreach (var n in Model)
{
var img = n.Noticias2.FirstOrDefault();
if (img != null && img.Nombre.Equals(#principalId+"_0"))
{
var imgRuta = #img.Ruta+#img.Nombre+#img.Extension;
<img id="currentprincipalImagen" src="#imgRuta" class="img-responsive" alt="Imagen de Marte" />
<figcaption>
<p id="currentPrincipalImagenTitulo">#img.Descripcion</p>
</figcaption>
}
}
</figure>
</div>
<div class="textnota">
<br>
<h6 id="currentprincipalId">#principalId</h6>
<h5 id="currentprincipalTitulo" class="titulo_N uppercase">#principalTitulo</h5>
<p id="currentprincipalFechaDesde" class="time">FeDesde: #principalFechaDesde.ToString(format)</p>
<div class="noti_P">
<p id="currentprincipalContenido">#principalContenido</p>
</div>
</div>
</div>
<div class="col-md-5">
<!-- Right Side -->
#foreach (var n in Model)
{
<blockquote class="blockquote-nopadding bg-calendar-border-left">
<h6 class="IdNoticia">#n.IdNoticia</h6>
<p class="time_f feDesde">#n.FeDesde.ToString(format)</p>
#n.Titulo
<p class="text-justify limit Contenido">#n.Contenido</p>
</blockquote>
}
Págnia #(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) de #Model.PageCount
#Html.PagedListPager(Model, page => Url.Action("Index", new { page }))
<div>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks. I know that in my Jquery Script code I dont have something to change the Image but I remove this because I cant do the relation to change the Id into the #foreach in the left side to changue my principal Image. my english is not good I hope you could understand me.
Here is the relation where If I click the first with Id = 1 I want to get the images from that Id and the same with Id = 2, 3, 4...
I found my own solution, the problem was in my Jquery code. Maybe it is not the best way to do it in Entity Framework but this is how I solve this. (If you have a better way please share it).
Here my full new code.
#{
var format = "dddd, MMMM dd, yyyy";
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_LayoutPage.cshtml";
int principalId = Model[0].IdNoticia;
string principalTitulo = Model[0].Titulo;
string principalContenido = Model[0].Contenido;
DateTime principalFechaDesde = Convert.ToDateTime(Model[0].FeDesde);
DateTime principalFechaHasta = Convert.ToDateTime(Model[0].FeHasta);
}
<script type="text/javascript">
function changeDisplay(e) {
var principalTitulo = $(e).text();
var principalContenido = $(e).siblings(".Contenido:first").val();
var principalId = $(e).siblings(".IdNoticia:first").val();
var principalFechaDesde = $(e).siblings(".FeDesde:first").val();
var principalFechaHasta = $(e).siblings(".FeHasta:first").val();
var principalDescripcion = $(e).siblings(".Descripcion:first").val();
var principalImagen = $(e).siblings(".imgRuta").val();
$("#currentprincipalTitulo").html(principalTitulo);
$("#currentprincipalContenido").html(principalContenido);
$("#currentprincipalId").html(principalId);
$("#currentprincipalFechaDesde").html(principalFechaDesde);
$("currentprincipalFechaHasta").html(principalFechaHasta);
$("#currentprincipalDescripcion").html(principalDescripcion);
$("#currentprincipalImagen").attr("src", principalImagen);
}
</script>
<!-- Principal -->
<div class="col-md-12 main">
<div class="header sec-title-hd">
<div class="bg-calendar"></div>
<div class="col-md-7">
<h5 class="pull-left">NOTICIAS</h5>
<div>
<img src="slider/img/arrow-left.png"> VOLVER
</div>
</div>
</div>
<div class="content-inter">
<div class="container-fluid sec-title-hd-sub">
<div class="row">
<div class="col-md-7">
<div>
<figure class="img_N">
#foreach (var n in Model)
{
var img = n.Noticias2.FirstOrDefault();
if (img != null && img.Nombre.Equals(#principalId+"_0"))
{
<img id="currentprincipalImagen" src="#img.Ruta#img.Nombre#img.Extension" class="img-responsive" alt="#img.Nombre" />
<figcaption>
<p id="currentprincipalDescripcion">#img.Descripcion</p>
</figcaption>
}
}
</figure>
</div>
<div class="textnota">
<br>
<h6 id="currentprincipalId">#principalId</h6>
<h5 id="currentprincipalTitulo" class="titulo_N uppercase">#principalTitulo</h5>
<p id="currentprincipalFechaDesde" class="time">Desde: #principalFechaDesde.ToString(format)</p>
<p id="currentprincipalFechaHasta" class="time">Hasta: #principalFechaHasta.ToString(format)</p>
<div class="noti_P">
<p id="currentprincipalContenido">#principalContenido</p>
</div>
</div>
</div>
<div class="col-md-5">
<!-- Right Side -->
#foreach (var n in Model)
{
<!-- Data mostrada -->
<blockquote class="blockquote-nopadding bg-calendar-border-left">
<p class="time_f">#n.FeDesde.ToString(format)</p>
#n.Titulo
<p class="text-justify limit">#n.Contenido</p>
<!--Data Enviada al lado Izquierdo-->
<input class="IdNoticia" type="hidden" value="#n.IdNoticia" />
<input class="Contenido" type="hidden" value="#n.Contenido" />
<input class="FeDesde" type="hidden" value="Desde: #n.FeDesde.ToString(format)" />
<input class="FeHasta" type="hidden" value="Hasta: #n.FeHasta.ToString(format)" />
#foreach (var img in n.Noticias2)
{
var imgRuta = #img.Ruta + #img.Nombre + #img.Extension;
<input class="Descripcion" type="hidden" value="#img.Descripcion" />
<input class="imgRuta" type="hidden" value="#imgRuta" />
}
</blockquote>
}
</div>
</div>
</div>
</div>
Here the new view,
notice that all the data in the left side are from the id 2.

Categories