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();
Related
I did live search by using ajax and have other jquery customizations (Tilt.js etc..) for my card component.
I get search results successfully but it doesn't have whole js customizations .
Ajax
$(document).ready(function() {
$('#location , #sector').on('change',function(){
var location = $('#location').val();
var sector = $('#sector').val();
$.ajax({
url:'search',
type:'GET',
data:{
'location':location,
'sector':sector,
},
success:function(data){
$('#content').html(data);
}
})
}) });
Component that returns from Controller
$output ='';
foreach($data as $post){
$output .='
<div class="card mb-4" id="card" data-tilt data-tilt-max="5" data-tilt-glare data-tilt-max-glare="0.2">
<div class="card-body">
<div class="card my-2 rounded shadow item" role="button" id="'.$post->id.'" >
<div class="row no-gutters">
<div class="col-sm-2 pt-3 pl-2">
<img src="'.$post->image.'" class="img-fluid resim" alt="...">
</div>
<div class="col-sm-10">
<div class="card-body">
<h4 style="font-weight: bolder;">'. $post->company_name.'</h4>
<h5 class="card-title" style="font-weight: bold;">'. $post->job_title.'</h5>
<p class="card-text">'. $post->description.'.</p>
<div class="row">
<div class="col-sm"><div class="rounded-pill text-white text-center py-2 sector " style="background-color: #003777;"> '.$post->sector.'</div></div>
<div class="col-sm"><div class="rounded-pill text-white text-center py-2 location " style="background-color: #003777;"> '.$post->location.'</div></div>
<div class="col-sm"><div class="rounded-pill text-white text-center py-2 " style="background-color: #003777;"> Apply Now!</div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
';
}
This is due to javascript only loads once the document has finished loading, It then scans all of your dom elements for the elements and adds the listeners, If you are loading dom elements in after this has happened they will not have the event listeners. To get around this there are a few ways but one of the easiest is
$(document).ready(function(){
$('body').on('click','.js-card',function(){
// This body click function will only trigger if the element has the class js-card.
});
});
Another way is to add the onclick to the elements you are loading in <button onClick="yourGlobalFunction">
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>
I am trying to use JQuery and this script (to filter my mySql output):
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#notes div").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
the mySql entries I want to filter look like this in html:
<div class="card" id="notes">
<div class="card-header">
<div class="float-left">
<h5 class="card-title float-left">Title ABC</h5>
</div>
</div>
<div class="card-body">
<p class="card-text">Text XYZ</p>
</div>
<div class="card-footer">
<div class="float-left">
<p class="card-date">Date 2020-03-13</p>
</div>
</div>
</div>
so each <div class="card" id="notes"> is one entry.
The problem is (as you can see) I probally use this function wrong because I filter $("#notes div").filter(function() {
so if I search "ABC" the script only display the div container which is containing the "Title ABC". same goes if I search "XYZ" etc.
So what I want is. Whatever I search for it shouls display the whole div container <div class="card" id="notes"> where the search entry is found in either title, text or date.
would someone be so kind to explain me how I can make it working? I am thankfull for every tipp or even a link to a good tutorial I can work with.
thanks in advance and best greetings.
#notes is only targetting 1 .card. "#notes div" then filters divs within it. If you want to filter .card's by their text content, you should find all .cards by searching on their parent like this:
const value = "xyz";
$(".cards .card").filter(function(i, el) {
const $card = $(el);
$card.toggle($card.text().toLowerCase().indexOf(value) > -1)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cards">
<div class="card" id="notes">
<div class="card-header">
<div class="float-left">
<h5 class="card-title float-left">Title ABC</h5>
</div>
</div>
<div class="card-body">
<p class="card-text">Text XYZ</p>
</div>
<div class="card-footer">
<div class="float-left">
<p class="card-date">Date 2020-03-13</p>
</div>
</div>
</div>
<div class="card" id="songs">
<div class="card-header">
<div class="float-left">
<h5 class="card-title float-left">Title Hmm</h5>
</div>
</div>
<div class="card-body">
<p class="card-text">Text xYz</p>
</div>
<div class="card-footer">
<div class="float-left">
<p class="card-date">Date 2020-03-13</p>
</div>
</div>
</div>
</div>
I have this mark up:
<div class="list-group-item participant-main">
<i class="fa fa-chevron-down" id="chevron-for-div" aria-hidden="true"></i>
<div class="row">
<div class="col-sm-8">
<h5 class="list-group-item-heading">A title</h5>
</div>
<div class="col-sm-4 list-group-item-quick-links ">
<a href="#" />
<a href="#" />
</div>
</div>
</div>
<div class='list-group-item hidden-group-item hide'>
<div class="row">
<div class="col-sm-8">
<p class="list-group-item-text">
Some text
</p>
</div>
<div class="col-sm-4">
<p class="list-group-item-text">
More text
</p>
</div>
</div>
</div>
Previously, I was using Jquery to unhide/hide .hidden-group-item when .participant-main was clicked via this code:
$('body').on('click', '.member-main, .participant-main', function() {
if ($(this).next('.hidden-group-item').hasClass('hide')) {
$('.hidden-group-item').addClass('hide');
$(this).next('.hidden-group-item').toggleClass('hide');
}
else {
$(this).next('.hidden-group-item').toggleClass('hide');
}
$('.hidden-form-item').addClass('hide');
});
I'm adding some links to .participant-main so I can't bind a click event to the whole div anymore so the new links work in parallel. I've tried then to bind the click event to particular elements inside the div thus I moved the target class to particular elements like this.
<div class="list-group-item">
<i class="fa fa-chevron-down participant-main" id="chevron-for-div" aria-hidden="true"></i>
<div class="row">
<div class="col-sm-8 participant-main">
<h5 class="list-group-item-heading">A title</h5>
</div>
<div class="col-sm-4 list-group-item-quick-links ">
<a href="#" />
<a href="#" />
</div>
</div>
</div>
I was hoping it would work but it does not.
I don't understand why is this happening and how to solve. As far as I understand .next() grabs the next element that matches the specified selector.
Since you've nested elements you should use stopPropagation() to stop the event from bubbling :
$('body').on('click', '.member-main, .participant-main', function(e) {
e.stopPropagation();
...
});
Hope this helps.
Can you please take a look at This Demo and let me know how I can add Animation / Speed or Duration to the following code
$("#ecolomodel").on("click",function(){
$("#ecolomodelno").toggleClass("switchshow switchhiden");
$("#ecolomodelyes").toggleClass("switchhiden switchshow");
});
using this mark up
<div class="panel panel-default">
<div class="panel-heading">Switch</div>
<div class="panel-body">
<div class="row">
<div class="switch col-lg-offset-1 col-md-offset-1 col-sm-offset-1 col-xs-offset-1 col-lg-10 col-md-10 col-sm-10 col-xs-10">
<button id="ecolomodelno" class="btn btn-primary switchshow norightradius col-lg-1 col-md-1 col-sm-2 col-xs-3">No</button>
<button id="ecolomodel" class="btn btn-primary noradius col-lg-11 col-md-11 col-sm-8 col-xs-9">New Model</button>
<button id="ecolomodelyes" class="btn btn-primary switchhiden noleftradius col-lg-1 col-md-1 col-sm-2 col-xs-3">Yes</button>
</div>
</div>
</div>
</div>
I already tried something like
$("#ecolomodel").on("click",function(){
$("#ecolomodelno").toggleClass("switchshow switchhiden", 6000);
$("#ecolomodelyes").toggleClass("switchhiden switchshow", 6000);
});
but it didn't work!
I think you really need to look into jQuery animate() and see how it works. It is a very simple function to use, and I find myself using it over and over again.
You can edit CSS directly. Try viewing and testing out some of the examples they have on their site.