Append Data on bootstrap carousel with ajax - javascript

I want to ask how I can append ajax data on the bootstrap carousel. 2 post-show on the bootstrap carousel when the page load for the first time then if someone clicks the next arrow bootstrap carousel slide and shows the next 2 posts I'm getting 2 posts per click with ajax now I want to append next 2 posts on the bootstrap carousel and so on like this
here's my blade code where I'm using foreach to show 2 posts when pages load for example I'm showing post 1 and 2 here
<div id="carousela" class="carousel slide" data-touch="false" data-interval="false">
<div class="carousel-inner">
#foreach($magazine->chunk(2) as $magazines)
<div class="carousel-item {{ $loop->first ? 'active' : '' }}">
#foreach($magazines as $row)
<div class="row no-gutters m-0 p-0">
<div class="col-md-2 col-sm-12">
<img src="{{(!empty($row->magazine_sys_file_name) ? asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
<h4 class="text-light m-0 p-0">{{$row->title}}</h4>
{{($row->magazine_des) ? $row->magazine_des: ''}}
<div>{{__('Read More')}}</div>
</div>
</div>
#endforeach
</div>
#endforeach
</div>
</div>
now I'm using onclick function to get the next 2 posts here's ajax code and with this code, i'm getting post 3 and 4 now I want to append these 2 posts on the bootstrap carousel
$('#nextclick').on('click',function(){
var val = $('#hidden').val();
var data = {val:val}
$.ajax({
url: "{{url('/user/nextmagazine')}}",
method: 'get',
data: data,
success: function(data){
$('#hidden').val(parseInt(val) + parseInt(2));
}
})
})
here's my result after onclick
if anyone can help me with how I can append this data in the ajax success function to show on the bootstrap carousel
Thank you

You can loop through your jsons return from backend and append that inside some variable using += .Finally , add generated html inside your carousel using $(html).insertAfter('#carousela .carousel-item:last') this will insert new slide after last slide .
Demo Code :
$(document).ready(function() {
$("#carousela").carousel();
//using `one` just for demo change it to `on`
$('#nextclick').one('click', function() {
/* var val = $('#hidden').val();
success: function(data){
//your other codes..
$('#hidden').val(parseInt(val) + parseInt(2));*/
//suppose data return look like this..
var data = [{
"id": 3,
"title": "Something3",
"magazine_sys_file_name": "somehting",
"link": null
}, {
"id": 4,
"title": "Something4",
"magazine_sys_file_name": "somehting",
"link": null
}]
if (data.length > 0) {
var html = ""
//loop
$(data).each(function(i, v) {
//generate htmls//
html += ` <div class="carousel-item">
<div class="row no-gutters m-0 p-0">
<div class="col-md-2 col-sm-12">
<img src="/uploads/${v.magazine_sys_file_name}" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
<h4 class="text-light m-0 p-0">${v.title}</h4>
<div>{{__('Read More')}}</div>
</div>
</div>
</div>`
})
//insert new html after last slide
$(html).insertAfter('#carousela .carousel-item:last')
}
/*}
})*/
})
});
#carousela{
background:black
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div id="carousela" class="carousel slide" data-touch="false" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row no-gutters m-0 p-0">
<div class="col-md-2 col-sm-12">
<img src="{{(!empty($row->magazine_sys_file_name) ? asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
<h4 class="text-light m-0 p-0">Something1</h4>
<div>{{__('Read More')}}</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row no-gutters m-0 p-0">
<div class="col-md-2 col-sm-12">
<img src="{{(!empty($row->magazine_sys_file_name) ? asset('/uploads/'.$row->magazine_sys_file_name):'')}}" class="img-thumbnail border-0 p-0" alt="" srcset="">
</div>
<div class="col-md-10 col-sm-12 px-4 m-0 m-mb">
<h4 class="text-light m-0 p-0">Something2</h4>
<div>{{__('Read More')}}</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousela" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#carousela" data-slide="next" id="nextclick">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>

Related

Smooth load animation in VUE 3

In component Home.vue I have an article thumbnail part and bottom a button for Show more
Here is a code example
<div class="g-services-thumbnail-area">
<div class="container-fluid">
<div class="row">
<!-- Article Thumbnail-->
<div class="col-lg-3 mb-4" v-for="item in articleList" :key="item.id">
<div class="g-services-thumb-single">
<img v-if="item.thumbnail_img" class="img-fluid" :src="item.thumbnail_img" alt="">
<img v-else class="img-fluid" src="" alt="">
<div class="g-services-thumb-meta">
<p>{{ item.en_title }}</p>
<!-- Click For More -->
<router-link :to="{ name: 'content', params: { slug: item.slug }}" class="nav-link">
<u>Click for more</u>
</router-link>
</div>
</div>
</div>
<!-- End Article Thumbnail-->
<!-- Load More Article-->
<div class="text-center w-100 mt-3" id="show_article_list">
<button role="button" class="btn btn-outline-success text-center" id="article_list"
#click="getAllArticleList()">Show More
</button>
</div>
<!-- End Load More Article-->
</div>
</div>
</div>
In <script> </script> tag function called
async function getAllArticleList() {
showAllListStatus.value.article = !showAllListStatus.value.article;
if (showAllListStatus.value.article == true) {
articleList.value = allArticleList.value;
$('#article_list').html('Show less')
} else {
articleList.value = allArticleList.value.slice(0, 12);
$('#article_list').html('Show More')
}
// articleList.value = allArticleList.value;
// $('#article_list').html("");
}
How can I animate for loading the rest of the thumbnails?

how to Put div to same Position on reload and load using jquery 1.5.2

I wanted to know if there was an easy way to change the div position when i refresh my browser I don't want to lose the place that I have changed to i have 3 Div (Div1 Logo - Div2 Text - Div3 Langue) I want to change Div2 and Div3 when witdh page <=765 and refresh and don't lose this position (Div1 -Div2 -Div3)
$(document).load($(window).bind("resize", listenWidth));
function listenWidth( e ) {
if($(window).width() <= 765)
{
$(".welcomeheader1").remove().insertAfter($(".welcomeheader2"));
} else {
$(".welcomeheader1").remove().insertBefore($(".welcomeheader2"));
}
}
HTML Code
<div id="header" class="header clearfix">
<div class="row clearfix">
<div class="col-lg-3 col-md-3 col-sm-6 col-4 xs-last txtRight">
<div id="headerLogo" ></div>
</div>
<div id="welcome" class="txtCenter col-lg-6 col-md-7 col-sm-12 col-12 clearfix welcomeheader1">
<!-- <img src="./resources/_images/wifi.png?1595436503" class="wifi-img" alt="WIFI" /> -->
<!--
<div class="wifi-symbol">
<div class="wifi-circle first"></div>
<div class="wifi-circle second"></div>
<div class="wifi-circle third"></div>
<div class="wifi-circle fourth"></div>
</div>
-->
<img class="wifi_welcome" src="./resources/_images/wifi_welcome.png?1590753851" alt="">
<h1 id="welcomeHeadline">WELCOME</h1>
<h2 id="connectezvous">Connectez-vous au Wifi gratuit</h2>
</div>
<div class="col-lg-3 col-md-2 col-sm-6 col-8 welcomeheader2 " align="Right">
<div id="lang_block">
<i id="showLanguages"> <span id="language_text_id">Langue</span> <img class="left_arrow" src="./resources/_images/left-arrow.png?1590753851" alt=""></i>
<div id="langContainer">
<a id="lang_link[en]" href="#" style="display:none"><img src="./resources/_images/flags/en.png?1595436503" title="English"></a>
<a id="lang_link[fr]" href="#" style="display:none"><img src="./resources/_images/flags/fr.png?1595436503" title="Français"></a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<!-- The header template -->
<!-- Will be added on top of the page -->
So call the function on load
$(document).load( function () {
listenWidth();
$(window).bind("resize", listenWidth)
});

How to pass and get data attribute inside vue components

I'm new to vue, but I'm learning how to use it without webpack.
I have the necessity to use some components nested inside a main component that will render the homepage of my wordpress custom theme. The components I want to nest need to pass a data attribute to an ajax call that will fetch the related data to display, I will set it manually for each instance of it I need to use. How I can do this?
This is the component code
Vue.component('theme-section',{
template: '#section-tpl',
data(){
return{
sectionData: []
}
},
mounted: function(){
this.getSection();
},
methods: {
getSection: function(){
axios.get(theme.base_url+'theme/v1/sections?slug='+ )
.then( (response) => {
console.log(response.data);
response.data.forEach( (item, i) => {
this.sectionData = [item];
});
});
}
}
});
This is the markup of the component. I'm loading it using get_template_part() function of wordpress in the footer of the theme where also all the other components markup is loaded.
I will call it inside the home component I have definde
<script type="text/x-template" id="section-tpl">
<div class="container-fluid p-0">
<div class="row m-0" v-for="section in sectionData" :data-section="" >
<div class="col-sm-12 col-md-12 col-lg-12 p-0">
<!-- <a class="h4 mt-5" href=""></a> -->
<div class="col-sm-12 col-md-6 col-lg-6 p-4">
<h1 class=" font-weight-bold mt-3 mb-3"></h1>
<h4 class="mt-3 mb-3"></h4>
</div>
</div>
</div>
</div>
</script>
// this is the home component markup where the other component will be reused
<script type="text/x-template" id="home-tpl">
<div class="container-fluid p-0">
<div class="row m-0" v-for="page in pageData">
<div class="col-sm-12 col-md-12 col-lg-12 p-0" v-if="page._embedded['wp:featuredmedia'][0].source_url">
<img class="img-fluid w-100" :src="page._embedded['wp:featuredmedia'][0].source_url">
</div>
<div class="col-sm-12 col-md-12 col-lg-12 p-5 mt-5">
<h1>{{ page.title.rendered }}</h1>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 p-5 mt-5" v-html="page.content.rendered"></div>
</div>
<theme-section data-section="about"></theme-section>
</div> <!-- end container-fluid -->
</script>

change div img to the active image in another one

I have two divs I need first div"border text-center rounded h-100 product-image" image change to the active image in the second div"item-slideshow" how to do that with jquery or javascript??
note it works only when clicking on the image how to make it slide dynamically with the active image?
document.ready(() => {
$('.page_content').on('click', '.item-slideshow-image', (e) => {
const $img = $(e.currentTarget);
const link = $img.prop('src');
const $product_image = $('.product-image');
$product_image.find('a').prop('href', link);
$product_image.find('img').prop('src', link);
$('.item-slideshow-image').removeClass('active');
$img.addClass('active');
});
})
<div class="col-md-4 h-100">
<div class="border text-center rounded h-100 product-image" style="overflow: hidden;">
<img itemprop="image" class="website-image h-100 w-100" src="/files/developmentandsoftware-01.svg">
</div>
<div class="item-slideshow">
<img class="item-slideshow-image mt-2" src="/files/developmentandsoftware-01.svg" alt="None">
<img class="item-slideshow-image mt-2 active" src="/files/AutomatetoSurvive-01.svg" alt="None">
<img class="item-slideshow-image mt-2" src="/files/completeSoultions-01.svg" alt="None">
</div>
</div>
</div>
I used your jQuery code inside slideDynamic() function and some modification + add logic by automatically click with set time interval of 3500 microseconds.
I hope below snippet will help you lot.
$(document).ready(() => {
$('.page_content').on('click', '.item-slideshow-image', (e) => {
slideDynamic(e);
});
setInterval(function(){
var totalSlide = $('.item-slideshow-image').length-1;
var getActiveInded = $('.item-slideshow-image.active').index();
if (totalSlide==getActiveInded) {
$('.item-slideshow-image').removeClass('active');
$('.item-slideshow-image:nth-child(1)').addClass('active').trigger('click');
}
else{
$('.item-slideshow-image.active').next().trigger('click');
}
},3500);
});
function slideDynamic(e){
const $img = $(e.currentTarget);
const link = $img.prop('src');
const $product_image = $('.product-image');
$product_image.find('a').prop('href', link);
$product_image.find('img').prop('src', link);
$('.item-slideshow-image').removeClass('active');
$img.addClass('active');
}
.item-slideshow-image{
width: 60px;
margin-right: 5px;
}
.item-slideshow-image.active{
outline: 4px solid green;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="container page_content">
<div class="row">
<div class="col-sm-6 col-md-4 h-100">
<div class="border text-center rounded h-100 product-image" style="overflow: hidden;">
<img itemprop="image" class="website-image h-100 w-100" src="https://via.placeholder.com/150/0000FF/FFFFFF?text=Slide1">
</div>
<div class="item-slideshow">
<img class="item-slideshow-image mt-2 active" src="https://via.placeholder.com/150/0000FF/FFFFFF?text=Slide1" alt="None">
<img class="item-slideshow-image mt-2" src="https://via.placeholder.com/150/FF0000/FFFFFF?text=Slide2" alt="None">
<img class="item-slideshow-image mt-2" src="https://via.placeholder.com/150/000000/FFFFFF/?text=Slide3" alt="None">
</div>
</div>
</div>
</div>
</div>

function to remove/delete template from the DOM

I've been working on this for a few hours and I can't seem to figure it out.
I am trying to get this function to remove the template when the button is clicked
here is the html of the template.
<script id="movieTemplate" type="text/template">
<div class="row my-3 t-3 card-movie ">
<div class="col-md-12 mb-4">
<div class="card border-0 shadow">
<img src="https://i.pravatar.cc/400?img=48" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Title in Template</h5>
<div class="card-genre text-black-50">Genre in Template</div>
<div class="card-year text-black-50">Year in Template</div>
<button type="button" class="btn btn-danger deleteMovie mt-2">Delete</button>
</div>
</div>
</div>
</div>
and this is the function calling that button
function wireHandlers() {
$(".deleteMovie").on("click", onDeleteMovie);
};
and finally the function that should delete the template
function onDeleteMovie() {
$(".card-movie").remove();
};
I know there is probably a shorthand way to do this but I would really like to keep it as simple as possible. Any help is appriciated! :D
You could call click directly on the button:
$( ".deleteMovie" ).click(function() {
$(".card-movie").remove();
});
This method is a shortcut for .on( "click", handler )
Documentation for the same is here
You did not attached event because you not executed wireHandlers()
Your class selector was wrong .delete-movie
You have to attach event when document loads. More easy way to do is:
$(document).on("click",".deleteMovie", function(){
$(this).parent().parent().parent().parent().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row my-3 t-3 card-movie ">
<div class="col-md-12 mb-4">
<div class="card border-0 shadow">
<img src="https://i.pravatar.cc/400?img=48" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title mb-0">Title in Template</h5>
<div class="card-genre text-black-50">Genre in Template</div>
<div class="card-year text-black-50">Year in Template</div>
<button type="button" class="btn btn-danger deleteMovie mt-2">Delete</button>
</div>
</div>
</div>
</div>
This is best way when data is dynamically added:
$(this).parent().parent().parent().parent().remove();

Categories