I have a list of Pipelines and their stages, I need tho show the stages of each pipelines when these are clicked. The thing is that I don't want to show them all, just the ones that are clicked...
I have this code on my project, the thing is that with this it shows all of the stages of all of the pipelines, and I need just show the stages of the clicked pipeline. How can I dynamically link each other
<div class="panel-body" id="body-pipelines">
#foreach($pipelines as $key => $pipeline)
<div class="pipelines">
<div class="col-md-3 row">
<div class="col-md-12 col-sm-12 col-xs-12 p-t-10 p-b-10" id="pipelines-sidebar">
<i class="fas fa-lg fa-fw m-r-10 fa-{{$pipeline->icon}}"></i>
<span>{{$pipeline->name}}</span>
</div>
</div>
<div class="col-md-8">
<div class="row float-right">
<button class="btn"><i class="fas fa-plus-circle" id="agregar"></i></button>
</div>
<div class="sortable box row">
#foreach ($pipeline->stages as $stage)
<div class="stages txt username m-b-10" id="stages-{{$stage->id}}" style="background: {{$stage->color}}" onclick="javascript:;" data-type="text">{{$stage->name}} <div class="delete-stage float-right"><button class="btn btn-danger"><i class="fas fa-trash" id="eliminar"></i></button></div></div>
#endforeach
</div>
</div>
</div>
#endforeach
</div>
Related
I am a total amateur on Laravel and I am trying to find a way to display by default a specific category with it's services instead of showing ALL the services for alla the categories that exist.
<section class="categories sp-80-50 bg-dull">
<div class="container">
<div class="row">
<div class="col-12">
<div class="all-title">
<p>#lang('front.categoriesTitle')</p>
<h3 class="sec-title">
#lang('front.categories')
</h3>
</div>
</div>
</div>
<div id="categories" class="row justify-content-center">
#foreach ($categories as $category)
#if($category->services->count() > 0)
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 mb-30 categories-list" data-category-id="{{ $category->id }}">
<div class="ctg-item" style="background-image:url('{{ $category->category_image_url }}')">
<a href="javascript:;">
<div class="icon-box">
<i class="flaticon-fork"></i>
</div>
<div class="content-box">
<h5 class="mb-0">
{{ ucwords($category->name) }}
</h5>
</div>
</a>
</div>
</div>
#endif
#endforeach
</div>
</div>
</section> */
<section class="listings sp-80 bg-w">
<div class="container">
<div class="row">
<div class="col-12">
<div class="all-title">
<p> #lang('front.servicesTitle') </p>
<h3 class="sec-title">
#lang('front.services')
</h3>
</div>
</div>
</div>
<div id="services" class="row">
#foreach ($services as $service)
<div class="col-lg-3 col-md-6 col-12 mb-30 services-list service-category-{{ $service->category_id }}">
<div class="listing-item">
<div class="img-holder" style="background-image: url('{{ $service->service_image_url }}')">
<div class="category-name">
<i class="flaticon-fork mr-1"></i>{{ ucwords($service->category->name) }}
</div>
</div>``
and
var categories = `
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 mb-30 categories-list">
</div>`;
response.categories.forEach(category => {
if (category.services.length > 0) {
var url = category.category_image_url;
categories += `
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-4 col-12 mb-30 categories-list" data-category-id="${category.id}">
<div class="ctg-item" style="background-image:url('${url}')">
<a href="javascript:;">
<div class="icon-box">
<i class="flaticon-fork"></i>
</div>
<div class="content-box">
<h5 class="mb-0">
${category.name}
</h5>
</div>
</a>
</div>
</div>`
}
});
$('#categories').html(categories);
var services = '';
if (response.services.length > 0) {
response.services.forEach(service => {
services += `
<div class="col-lg-3 col-md-6 col-12 mb-30 services-list service-category-${service.category_id}">
<div class="listing-item">
<div class="img-holder" style="background-image: url('${ service.service_image_url }')">
<div class="category-name">
<i class="flaticon-fork mr-1"></i>${service.category.name}
</div>
<div class="time-remaining">
<i class="fa fa-clock-o mr-2"></i>
<span>έως ${service.time} ${makeSingular(service.time, service.time_type)}</span>
</div>
</div>
You can access the webpage at https://click-away.store
I need to set the default Services view for the 1st Button Category.
Sorry if my question is silly or the solution is simple but I couldn't find out what to do!
Your error is that you never loop over the category's services.
You check if there are any services, but you never loop over them. So, within the #if you should do that.
#foreach ($categories as $category)
#if($category->services->count() > 0)
#foreach($category->services as $service)
// your code
#endforeach
#endif
#endforeach
I'm working with one web app using Materialize, everything work fine till add search field. There are no error but button do nothing. In the same row, there are two buttons, first one work.
usuario.php:
<div class="container">
<div class="col s6 left">
Buscar:
<div class="input-field inline">
<input id="fCriterio" type="text" class="validate">
<label for="fCriterio">
</label>
</div>
<button class="btn-floating btn-small blue" onclick="buscarCrit()">
<i class="material-icons">search</i>
</button>
</div>
<div class="col s2 right">
<button class="btn modal-trigger blue" data-target="idModal1">
Nuevo
</button>
</div>
</div>
And js (user-functions.js) included is just a test:
function buscarCrit(){
M.toast({html: "Buscando", classes:'green'});
}
I copy another button who is working and doesn't work, no error, no nothing.
Ok I found the error, it was very simple but I did not see it, the call to the function has to have parentheses at the end of its name.
`
<a class="btn-floating btn-small green" data-toggle="modal" onclick="buscarCrit()">
<i class="material-icons">search</i>
</a>
</td>`
Thank's #imvain2 and #Zugor for your time and help!!
Try using a click event than inline onclick. Declare a click event listener for that button and call buscarCrit in there.
Example:
function buscarCrit(){
alert('Hello World!')
M.toast({html: "Buscando", classes:'green'});
}
window.addEventListener('load', () => {
document.getElementById('btn-foo').addEventListener('click', buscarCrit);
});
<div class="container">
<div class="col s6 left">
Buscar:
<div class="input-field inline">
<input id="fCriterio" type="text" class="validate">
<label for="fCriterio">
</label>
</div>
<button id="btn-foo" class="btn-floating btn-small blue">
<i class="material-icons">search</i>
</button>
</div>
<div class="col s2 right">
<button class="btn modal-trigger blue" data-target="idModal1">
Nuevo
</button>
</div>
</div>
I have a problem updating a section of a laravel view. that section is in another view and is filled with the data of a db. What I want to do is that when clicking on a link that content is filtered and the other parts of the page remain as they were.
thanks
coursesCategories.blade.php
#extends('courses')
#section('content')
#extends('courses')
#section('content')
<div class="tab-pane fade show active" id="pills-todas" role="tabpanel" aria-labelledby="pills-todas-tab">
<div class="row justify-content-sm-center">
#foreach($cursos as $curso)
<div class="col col-12 col-sm-12 col-md-6 col-lg-4 vista_curso">
<div class="card column_course">
<a><img class="card-img-top img_course" src="{{ asset('assets/images/pictureDefault.png') }}" alt="Foto de curso" width="240" height="135"></a>
<div class="card-body column_course_interna">
<div class="include">
<div class="card-title titulo_curso">
<h3><b>{{ $curso->nombre }}</b></h3>
</div>
<ul>
<li>
<i class="fas fa-file col-1"></i>
<span class="lista_contenido col-11"> 4 documentos explicativos </span>
</li>
<li>
<i class="fas fa-clock col-1"></i>
<span class="lista_contenido col-11"> 32 minutos </span>
</li>
</ul>
</div>
<div class="compra">
<div><button type="button" class="btn btn-lg btn_suscribe btn_ver" style="width: 84%;">Ver Curso</button></div>
<div><button type="button" class="btn btn-lg btn_suscribe" style="width: 84%;">Suscribirse</button></div>
</div>
<div class="texto_precio">
<span class="price">20.99€</span>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
#stop#stop
courses.blade.php
<div id="mostrar_cursos" class="container-fluid justify-content-center mostrar_cursos">
<div class="btn_filtros"> <button id="btn_filtros" type="button" class="btn btn-primary btn-sm btn-block d-md-none" onclick="viewfilter();ocult()">Filtrar</button></div>
<div class="row">
<div class="d-none d-md-block col col-md-4 col-lg-3 filter" style="max-width: 304px">
<div class="nav flex-column nav-pills" id="pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="pills-todas-tab" href="{{ action('CoursesController#showList') }}" role="tab" aria-controls="pills-todas" aria-selected="true">Todas</a>
#foreach($categorias as $categoria)
<a class="nav-link" id="pills-ofimatica-tab" href="{{ action('CoursesController#showCourses', $categoria->nombre) }}" role="tab" aria-controls="pills-".$categoria aria-selected="false">{{ $categoria->nombre }}</a>
#endforeach
</div>
<div class="rango_precio">
<form>
<label for="customRange">Rango de precio</label>
<input type="range" class="custom-range" id="customRange">
</form>
<div id="result">Valor menor que:
<b id="valor"></b>
<strong>€</strong>
</div>
</div>
<div class="order_by">
<button id="btn_ordenar" class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Ordenar por precio
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Precio más alto</button>
<button class="dropdown-item" type="button">Precio más bajo</button>
</div>
</div>
</div>
<div class="col col-md-8 col-lg-9 row">
<div class="navegador_category container">
<div class="tab-content" id="pills-tabContent">
#yield('content')
</div>
</div>
</div>
</div>
</div>
coursesController
class CoursesController extends Controller
{
// list all categories and courses
public function showList() {
// categories extracted from the bd
$categorias = \App\Categoria::listaTodasLasCategorias();
// filtering courses according to html
$cursos = \App\Curso::listaTodosLosCursos();
return view('courses.coursesCategories',['cursos' => $cursos, 'categorias' => $categorias]);
}
// list all categories and courses
public function showCourses(Request $request, String $category) {
// categories extracted from the bd
$categorias = \App\Categoria::listaTodasLasCategorias();
// filtering courses according to html
$cursos = \App\Curso::listarCursosPorCategoria($category);
$view = View::make('courses.coursesCategories', ['cursos' => $cursos]);
if(Request::ajax()) {
$sections = $view->renderSections(); // returns an associative array of 'content', 'head' and 'footer'
return $sections['content']; // this will only return whats in the content section
}
return $view;
}
}
routes
Route::get('/courses', 'CoursesController#showList');
Route::get('/courses/{category}', 'CoursesController#showCourses');
I am making a carousel which should display the info dynamically in it. And here i am trying to apply condition through which the result can be filtered but it doesn't seems to be working. Below is the code for it.(what i really want to achieve through this is to appear the results in a carousel). Any kind of help would be immensely appreciated
<div class="container">
<div class="row" style="padding: 75px">
#if($tours->continent_id == 5)
<div class="row">
<div class="col-md-9">
<h3>Featured {{$tours->continent->name}}</h3>
</div>
<div class="col-md-3">
<!-- Controls -->
<div class="controls pull-right hidden-xs">
<a class="left fa fa-chevron-left btn btn-success"
href="#carousel-example"
data-slide="prev"></a><a class="right fa fa-
chevron-
right btn btn-success" href="#carousel-example"
data-slide="next"></a>
</div>
</div>
</div>
<div id="carousel-example" class="carousel slide hidden-xs" data-
ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
#foreach($tours as $tour)
<div class="col-sm-3">
<div class="col-item">
<div class="photo">
<img src="{{$tour->photo->file ?
asset($tour->photo->file): asset('images/404.png')}}"
class="img-responsive" alt="a" />
</div>
<div class="info">
<div class="row">
<div class="price col-md-6">
<h5>{{$tour->location}}</h5>
<h5 class="price-text-
color">
{{$tour->service}}</h5>
</div>
<div class="rating hidden-sm
col-md-
6">
<i class="price-text-color
fa
fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="price-text-color
fa
fa-star"></i><i class="price-text-color fa fa-star">
</i><i class="fa fa-star"></i>
</div>
</div>
<div class="separator clear-left">
<p class="btn-add"> <i class="fa fa-shopping-cart"></i>Add to cart
</p>
<p class="btn-details"> <i class="fa fa-list"></i>More details
</p>
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
#endif
</div>
</div>
Here is the controller part of the code. which is including all the fillable values in the form view. which later can be used to apply conditions on the form or return it's table values in the form
public function index()
{$tours = Tour::all();
return view('admin/tour/slider',compact('tours'));}
Error page error message
What you want is to filter the tours and only interact with the ones that contain continent_id equals to 5?
In that case, you should improve the query on database
$tours = Tour::where('continent_id', 5)->get();
Or filter the collection
$tours->filter(function ($tour) {
return $tour->continent_id == 5;
}
In both cases, you won't be able to do {{ $tours->continent->name }} since you're working with a Collection of Tour, not with a Tour instance.
In order to print the title of the first tour you should do
$tours->first()->continent->name
All i had to do was to put if condition after the foreach statement for its values to be available for the loop at before that foreach loop i had to check for the existence of the values in the table like #if($tours). and it all worked nicely :)
I have written a code for modifying the inline style for a div. The code is shown below :
<div class="padd col-xs-12 col-sm-12 col-md-12 pern alert" id="bloc" style="display:none;">
<div class="pad col-xs-12 col-md-6">
<h4>dfdfdffddf</h4>
</div>
<div class="pad col-md-5">
<span class="next-step"><button class="ret_but butt label label-primary" id="equipment" name="equipment" type="button">Select Equipment</button></span>
<div class="status">
<b>Status</b>
<i class="open" id="open">Open</i>
</div>
</div>
<div class="pad col-xs-12 col-md-1">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button"> <i class="fa fa-trash-o" aria-hidden="true"></i> </button>
</div>
</div>
I want to change the style for the div with id = bloc as display: block. I have written a jquery code for it, but it is not working.
jquery :
$("#senddata").click(function() {
$(".padd").css('style','display:block;');
});
senddata is the id of a button inside a form.When I am clicking that button, the inline style of particular div should change to display:block. But it is not changing the style. Can anyone help me on this ?
style is not a valid style attribute. you need to change display
$(".padd").css('display','block');
It does not matter if the style is written in the style attribute or in a css file when you want to change it with jquery
your JQ is not correct . you could use the show() method instead
show()
$("#senddata").click(function() {
$(".padd").show()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="senddata">
senddata
</button>
<div class="padd col-xs-12 col-sm-12 col-md-12 pern alert" id="bloc" style="display:none;">
<div class="pad col-xs-12 col-md-6">
<h4>dfdfdffddf</h4>
</div>
<div class="pad col-md-5">
<span class="next-step"><button class="ret_but butt label label-primary" id="equipment" name="equipment" type="button">Select Equipment</button></span>
<div class="status">
<b>Status</b>
<i class="open" id="open">Open</i>
</div>
</div>
<div class="pad col-xs-12 col-md-1">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button"> <i class="fa fa-trash-o" aria-hidden="true"></i> </button>
</div>
</div>
If you have used display:none on inline style you have to use the show() and hide() methods in jQuery.
$("#senddata").click(function() {
$(".padd").show()
});