I got 7 colabsibles. for each i'd like to loade a listview with Ajax on the expand event.
My html code:
<div data-role="collapsible-set" id="workdaylists" data-inset="true" data-collapsed-icon="bars" data-expanded-icon="minus">
<div id="monday" data-role="collapsible" data-collapsed="true">
<h3><span id="headmonday">Montag</span></h3>
<ul id="mondaylist" data-role="listview"></ul>
</div>
<div id="tuesday" data-role="collapsible" data-collapsed="true">
<h3><span id="headtuesday">Dienstag</span></h3>
<ul id="tuesdaylist" data-role="listview"></ul>
</div>
<div id="wednesday" data-role="collapsible" data-collapsed="true">
<h3><span id="headwednesday">Mittwoch</span></h3>
<ul id="wednesdaylist" data-role="listview"></ul>
</div>
<div id="thursday" data-role="collapsible" data-collapsed="true">
<h3><span id="headthursday">Donnerstag</span></h3>
<ul id="thursdaylist" data-role="listview"></ul>
</div>
<div id="friday" data-role="collapsible" data-collapsed="true">
<h3><span id="headfriday">Freitag</span></h3>
<ul id="fridaylist" data-role="listview"></ul>
</div>
<div id="saturnday" data-role="collapsible" data-collapsed="true">
<h3><span id="headsaturnday">Samstag</span></h3>
<ul id="saturndaylist" data-role="listview"></ul>
</div>
<div id="sunday" data-role="collapsible" data-collapsed="true">
<h3><span id="headsunday">Sonntag</span></h3>
<ul id="tuesdaylist" data-role="listview"></ul>
</div>
JS:
$(document).on('pagecreate', '#home', function(){
$('#workdaylists').bind('collapsibleexpand', function () {
alert("Expanded");
});
})
How do I get the Id of the one thate expanded?
Thanks
Niki
Here you go, this should work with jqm 1.4.2 version, didn't test for 1.4.3:
$('#workdaylists').bind('collapsibleexpand', function (data) {
console.log(data);
console.log(data.target.id);
});
Related
First of all I'm new in Vue. I'm trying to use Isotope in Vue component in Laravel.
The code is working fine in HTML. Here are the working codes
main.js
if ($('.grid').length) {
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
gutter: 30,
});
// bind filter button click
$('.maan-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue,
});
});
// change is-active class on buttons
$('.maan-button-group').each(function (i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function () {
$buttonGroup.find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
});
});
}
_project.blade.php
<section class="maan-project-area">
<div class="container-fluid">
<div class="row align-content-center justify-content-between">
<div class="col-12 col-md-9">
<div class="maan-button-group text-center">
<button type="button" data-filter="*">All
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".trending">Trending items
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".wordpress">WordPress
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".html">HTML
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".code">Code
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".ui">UI Templates
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
</div>
</div>
<div class="col-md-3 d-none d-md-block">
<div class="maan-view-btn">
View All <i class="fas fa-angle-right fa-sm"></i>
</div>
</div>
</div>
<div class="row grid">
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item trending">
<div class="maan-project-item">
<div class="project-img">
<a href="{{ route('product','the-slug') }}"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title">Sala - Startup & SaaS WordPress</h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item html">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item code">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item ui">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item wordpress">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<i class="fas fa-star"></i>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Above codes are working.
Now I'm trying to do this with VueJS.
First, I've install isotope from their official site with npm
npm install isotope-layout
Then I've create this vue component file
project.vue
<template>
<!-- Project Area -->
<section class="maan-project-area">
<div class="container-fluid">
<div class="row align-content-center justify-content-between">
<div class="col-12 col-md-9">
<div class="maan-button-group text-center">
<button type="button" class="is-checked" data-filter="*">All
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".trending">Trending items
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".wordpress">WordPress
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".html">HTML
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".code">Code
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".ui">UI Templates
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
</div>
</div>
<div class="col-md-3 d-none d-md-block">
<div class="maan-view-btn">
View All <i class="fas fa-angle-right fa-sm"></i>
</div>
</div>
</div>
<div class="project-grid">
<div class="project-grid-item mix trending" v-for="project in projects">
<div class="maan-project-item">
<div class="project-img">
<img src="assets/front/images/project/project.png" alt="Image">
<span class="project-category">{{ project.category.name }}</span>
</div>
<div class="maan-content">
<h3 class="maan-title">{{ project.name }}</h3>
<div class="author">
<img src="assets/front/images/author/author.png" alt="">
<div>by <span class="font-medium">Maan Theme</span> in {{ project.category.name }}</div>
</div>
<div class="project-price">
<div class="sales">Sales : <span>{{ project.total_sale }}</span></div>
<div class="price">Price : <span>${{ project.regular_price }}</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Project Area -->
</template>
<script>
import Isotope from "isotope-layout"
export default {
components: {
Isotope,
},
data: function(){
return {
projects : [],
}
},
mounted() {
this.loadProjects();
this.filterProjects();
},
methods: {
loadProjects : function(){ //this function is working, projects are loading from database
axios.get('api/projects')
.then((response)=>{
this.projects = response.data.projects
})
.catch(function(error){
console.log(error)
});
},
filterProjects : function(){
const $grid = $('.grid').isotope({
itemSelector: '.element-item',
gutter: 30,
});
// bind filter button click
$('.maan-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue,
});
});
// change is-active class on buttons
$('.maan-button-group').each(function (i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function () {
$buttonGroup.find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
});
});
}
}
}
</script>
I've an error in console
Uncaught TypeError: $(...).isotope is not a function
I don't know my question is well structured or not. Ask my if you need any additional information.
I want to open a model for edit item. I have added wire:click on a div but that only works for the first item of foreach.
Livewire Method
public function selectMealPlan($mealId)
{
$this->dispatchBrowserEvent('openEditMealModal');
}
View file
#foreach ($meal_plans as $meal)
<div class="meals-plan-item">
<div class="meals-plan-item-type">
<div class="meals-plan-item-label" wire:click="test">MEAL TYPE:</div>
<div class="meals-plan-item-value">{{ $meal->meal_type }}</div>
</div>
<div class="meals-plan-item-names">
<div class="meals-plan-item-label">MEAL NAMES:</div>
<div class="meals-plan-item-value">{{ $meal->getMealItems() }}</div>
</div>
<div class="meals-plan-item-actions">
<div class="action-button edit" wire:click="selectMealPlan({{ $meal->id }})">
<i class="fas fa-pencil"></i>
</div>
<div class="action-button delete" data-toggle="modal" data-target="#deletePlan{{ $meal->id }}">
<i class="fas fa-trash"></i>
</div>
</div>
</div>
#endforeach
<script>
window.addEventListener('openEditMealModal', function() {
alert('hello');
})
</script>
The component should have only one root element, a div for example:
<div class="meals-plan-item">
#foreach ($meal_plans as $meal)
<div class="meals-plan-item-type">
<div class="meals-plan-item-label" wire:click="test">MEAL TYPE:</div>
<div class="meals-plan-item-value">{{ $meal->meal_type }}</div>
</div>
<div class="meals-plan-item-names">
<div class="meals-plan-item-label">MEAL NAMES:</div>
<div class="meals-plan-item-value">{{ $meal->getMealItems() }}</div>
</div>
<div class="meals-plan-item-actions">
<div class="action-button edit" wire:click="selectMealPlan({{ $meal->id }})">
<i class="fas fa-pencil"></i>
</div>
<div class="action-button delete" data-toggle="modal" data-target="#deletePlan{{ $meal->id }}">
<i class="fas fa-trash"></i>
</div>
</div>
#endforeach
</div>
I saw other questions that usually use preg_grep but my problem was not solved
In the LiveWire component, I receive information from the web service and display it in a table.
Now the user does the search and I want to display the items that look like the searched phrase
I wrote the code like this:
class Cryptolist extends Component
{
use WithPagination;
public bool $loadData = false;
protected $paginationTheme = 'bootstrap';
public $perPage = 10;
public $search = '';
public function init()
{
$this->loadData = true;
}
public function getBalance($asset)
{
$this->dispatchBrowserEvent('setPrice' ,[
'asset' => $asset,
'price' => getCryptoBalance($asset)
]);
}
public function setPerPage(int $page)
{
$this->perPage = $page;
}
public function render()
{
try {
if ($this->loadData == true) {
$api = new \Binance\API('','');
$coins = $api->coins();
} else {
$coins = [];
}
return view('livewire.backend.crypto.cryptolist')->with('coins' , collect(preg_grep('~'.$this->search.'~i', $coins))->paginate($this->perPage));
}catch(\Exception $e)
{
return view('wrong')->with('e' , $e);
}
}
}
and this is view:
<div class="nk-block" id="loadesh1" >
<div class="card card-bordered card-stretch">
<div class="card-inner-group">
<div class="card-inner position-relative card-tools-toggle">
<div class="card-title-group">
<div class="card-tools mr-n1">
<ul class="btn-toolbar gx-1">
<li>
<a class="btn btn-icon search-toggle toggle-search" data-target="search" href="#"><em class="icon ni ni-search"></em></a>
</li>
<li class="btn-toolbar-sep"></li>
<li>
<div class="toggle-wrap">
<a class="btn btn-icon btn-trigger toggle" data-target="cardTools" href="#"><em class="icon ni ni-menu-right"></em></a>
<div class="toggle-content" data-content="cardTools">
<ul class="btn-toolbar gx-1">
<li class="toggle-close">
<a class="btn btn-icon btn-trigger toggle" data-target="cardTools" href="#"><em class="icon ni ni-arrow-left"></em></a>
</li>
<li>
<div class="dropdown">
<a class="btn btn-trigger btn-icon dropdown-toggle" data-toggle="dropdown" href="#"><em class="icon ni ni-setting"></em></a>
<div class="dropdown-menu dropdown-menu-xs dropdown-menu-right">
<ul class="link-check">
<li><span>show</span></li>
<li #if($perPage === 10) class="active" #endif>
10
</li>
<li #if($perPage === 20) class="active" #endif>
20
</li>
<li #if($perPage === 50) class="active" #endif>
50
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="card-search search-wrap" data-search="search">
<div class="card-body">
<div class="search-content">
<a class="search-back btn btn-icon toggle-search" data-target="search" href="#"><em class="icon ni ni-arrow-left"></em></a><input wire:model="search" class="form-control border-transparent form-focus-none" placeholder="type for search" type="text"><button class="search-submit btn btn-icon"><em class="icon ni ni-search"></em></button>
</div>
</div>
</div>
</div>
<div class="card-inner p-0" wire:init="init">
<div class="nk-tb-list nk-tb-ulist">
<div class="nk-tb-item nk-tb-head">
<div class="nk-tb-col">
<span class="sub-text">name</span>
</div>
<div class="nk-tb-col tb-col-mb">
<span class="sub-text">balance</span>
</div>
</div>
#foreach ($coins as $item => $value)
<div class="nk-tb-item">
<div class="nk-tb-col">
<a href="/demo5/user-details-regular.html">
<div class="user-card">
<div class="user-avatar d-none d-sm-flex">
#if(file_exists(public_path() . '/img/crypto/'.strtolower($value['coin'].".svg")))
<img style="border-radius: 0" src="{{asset('/img/crypto/'.strtolower($value['coin']))}}.svg" class="img-fluid" alt="">
#else
<img style="border-radius: 0" src="https://demo.rayanscript.ir/-/vendor/cryptocurrency-icons/32/color/noimage.png" class="img-fluid" alt="">
#endif
</div>
<div class="user-info">
<span class="tb-lead english" style="font-weight: bolder">{{$value['name']}}</span>
<span class="english">{{$value['coin']}}</span>
</div>
</div>
</a>
</div>
<div class="nk-tb-col tb-col-mb">
<div class="btn-group" aria-label="Basic example">
<button type="button" class="btn btn-sm btn-dim btn-light" wire:click="getBalance('{{$value['coin']}}')">
<div wire:loading wire:target="getBalance('{{$value['coin']}}')">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
</div>
<span class="w-120px" id="coin-{{$value['coin']}}">get balance</span>
</button>
<button type="button" class="btn btn-sm btn-dim btn-primary">add coin</button>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
But this error is given. Is my search method correct?
Array to string conversion
I'm new to ajax and I have two little problems.
With my code I can write the data in the database. I get no error messages and the data are not synonymous directly loaded into the view.
how can I load the data directly into the view without reload the page?
if the privacy is 1, the code should be displayed in the right column, and if the privacy is 0, the code should be displayed in the left column.
How can I output the error messages with my errormessage code?
view
<div id="content" class="dashboard padding-10">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<a data-toggle="modal" data-target=".todolist-create-modal" class="btn btn-success btn-block btn-sm margin-bottom-10">Neue Liste erstellen</a>
</div>
<div class="col-md-6">
<div id="panel-misc-portlet-l3" class="panel panel-default text-center">
<div class="panel-heading nohover">
<span class="elipsis">
<strong>Private Tasks</strong>
</span>
</div>
</div>
<div class="alert alert-danger margin-bottom-30 {{ $todolistpublic->count() ? 'hidden' : '' }}">
Es wurden keine <strong>Einträge</strong> gefunden.
</div>
#foreach ($todolistpublic as $list)
<div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
<div class="panel-heading panel-pointer">
<span class="elipsis"><!-- panel title -->
<strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
</span>
<ul class="options pull-right relative list-unstyled hover-visible">
<li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden">
<i class="fa fa-plus"></i> Erstellen
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-info btn-xs white hover-hidden">
<i class="fa fa-edit"></i> Bearbeiten
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-delete-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-danger btn-xs white hover-hidden">
<i class="fa fa-times"></i> Löschen
</a>
</li>
<li></li>
</ul>
</div>
<div class="panel-body">
<div class="slimscroll" data-always-visible="false" data-rail-visible="false" data-railOpacity="1" data-height="100">
{{ $list->description }}
</div>
</div>
</div>
#endforeach
<div class="panel-footer mtm-10">
<span id="todo-list-counter-public">{{ $todolistpublic->count() }}</span> <span>{{ $todolistpublic->count() > 1? 'Listen' : 'Liste' }}</span>
</div>
</div>
<div class="col-md-6">
<div id="panel-misc-portlet-l3" class="panel panel-default text-center">
<div class="panel-heading nohover">
<span class="elipsis">
<strong>Öffentliche Tasks</strong>
</span>
</div>
</div>
<div class="alert alert-danger margin-bottom-30 {{ $todolistprivate->count() ? 'hidden' : '' }}">
Es wurden keine <strong>Einträge</strong> gefunden.
</div>
#foreach ($todolistprivate as $list)
<div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
<div class="panel-heading panel-pointer">
<span class="elipsis"><!-- panel title -->
<strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
</span>
<ul class="options pull-right relative list-unstyled hover-visible">
<li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden"><i class="fa fa-plus"></i> Erstellen</a></li>
<li><a data-toggle="modal" data-target=".todolist-modal" class="btn btn-info btn-xs white hover-hidden"><i class="fa fa-edit"></i> Bearbeiten</a></li>
<li><i class="fa fa-times"></i> Löschen</li>
<li></li>
</ul>
</div>
<div class="panel-body">
<div class="slimscroll" data-always-visible="false" data-rail-visible="false" data-railOpacity="1" data-height="100">
{{ $list->description }}
</div>
</div>
</div>
#endforeach
<div class="panel-footer mtm-10">
<span id="todo-list-counter-private">{{ $todolistprivate->count() }}</span> <span>{{ $todolistprivate->count() > 1? 'Listen' : 'Liste' }}</span>
</div>
</div>
#include('elements.addTodoList')
#include('elements.createTodoList')
#include('elements.addTask')
</div>
</div>
$(document).ready(function () {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
$('#add-todo-list').click(function(e) {
e.preventDefault();
var _token = $("input[name='_token']").val(); // get csrf field.
var title = $("input[name='title']").val();
var description = $("textarea[name='description']").val();
var privacy = $("select[name='privacy']").val();
$.ajax({
url:'{{ route('todolists.store') }}',
type: 'POST',
data: {_token:_token, title:title, description:description, privacy:privacy},
success: function (data) {
console.log(data);
}
});
});
});
Controller
public function store(Request $request)
{
$validator = Validator::make($request->all(), [
'title' => 'required|min:5',
'description' => 'required|min:10',
'privacy' => 'required|integer'
]);
$attributeNames = array(
'title' => 'Title',
'description' => 'Description',
);
$validator->setAttributeNames($attributeNames);
//Redirect back if validation fails
if($validator->fails()) {
return response()->json(['error'=>$validator->errors()->all()]);
}
else{
$todolists = new Todolists;
$todolists->admin_id = auth::user();
$todolists->title = $request->title;
$todolists->description = $request->description;
$todolists->privacy = $request->privacy;
$todolists->save();
return response()->json(['success'=>'Your enquiry has been successfully submitted!']);
}
}
modal
<div class="modal fade todolist-create-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Erstelle eine neue Liste</h4>
</div>
<div class="modal-body">
<form action="{{ route('todolists.store') }}" method="post">
{{ csrf_field() }}
<div class="form-group">
<label for="" class="control-label">Titelname</label>
<div class="fancy-form">
<i class="fa fa-header"></i>
<input id="title" name="title" type="text" class="form-control input-lg" placeholder="Titel">
</div>
</div>
<div class="form-group">
<label for="" class="control-label">Beschreibung</label>
<div class="fancy-form">
<textarea id="description" name="description" rows="2" class="form-control" placeholder="Beschreibe deine Aufgabe"></textarea>
<i class="fa fa-comments"><!-- icon --></i>
</div>
</div>
<div class="form-group">
<label for="" class="control-label">Privatsphäre</label>
<div class="fancy-form fancy-form-select">
<select id="privacy" name="privacy" class="form-control">
<option selected value="0">Öffentlich</option>
<option value="1">Privat</option>
</select>
<i class="fancy-arrow"></i>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" id="add-todo-list">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
errormessages
#if (count($errors) > 0)
<div class="toastr-notify"></div>
#foreach ($errors -> all() as $e)
<script type="text/javascript">
_toastr("{{$e}}","top-right","error",false);
</script>
#endforeach
#endif
#if (session('fail'))
<div class="toastr-notify"></div>
<script type="text/javascript">
_toastr("{{ session('fail') }}","top-full-width","warning",false);
</script>
#endif
#if (session('status'))
<div class="toastr-notify"></div>
<script type="text/javascript">
_toastr("{{ session('status') }}","top-full-width","info",false);
</script>
#endif
#if (session('success'))
<div class="btn btn-info toastr-notify"></div>
<script type="text/javascript">
_toastr("{{ session('success') }}","top-full-width","success", false);
</script>
#endif
#if (session('error'))
<div class="toastr-notify"></div>
<script type="text/javascript">
_toastr("{{ session('error') }}","top-full-width","error",false);
</script>
#endif
I believe you have a typo in your ajax backend code; this line to be specific:
$todolists->admin_id = auth::user();
This should be:
$todolists->admin_id = auth()->user()->id;
The typo is generating a Throwable error, which is getting caught by the laravel exception handler and it's detecting that the code is being executed under a ajax request and hence returning a 500 internal server error.
people:
I'm using ui.router in my page and Firefox is not loading the views.
This is the config:
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('inicio', {
url: '/',
templateUrl: '/templates/principal.html'
})
.state('tienda', {
url: '/tienda',
templateUrl: 'templates/tienda2.html'
})
.state('carrito', {
url: '/carrito',
templateUrl: 'templates/carrito.html'
})
.state('contacto', {
url: '/contacto',
templateUrl: 'templates/contacto.html'
})
In the html, I'm using the tag for the section where I want the views to appear and ui-sref attribute on the navbar but Firefox shows them as if they were paragraphs.
<nav class="navbar navbar-inverse navbar-custom" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a ui-sref="inicio"><span class="glyphicon glyphicon-home"></span> PRINCIPAL</a></li>
</li>
<li>
<a ui-sref="tienda"><span class="glyphicon glyphicon-usd"></span> TIENDA</a></li>
</li>
<li>
<a ui-sref="carrito"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> CARRITO</a></li>
</li>
<li>
<a ui-sref="contacto"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> CONTACTO</a></li>
</li>
</ul>
</div>
</div>
<button type="button" class="btn btn-success pull-right">Ingresar</button>
</div>
</nav>
<div class="container">
<div ui-view></div>
</div>
This is the code as of now. In chrome works wonderfully, yet Firefox doesn't recognize the ui-sref at all.