I working with Laravel, with blade views.
I have an array of cars. The user can choose one car from the list, each user can only show his list.
After selecting a car, a modal view appears into the same HTML for showing more information about the car.
If the user wants to remove the car, a post request is called, and HERE is the problem.
How can I pass to the modal, the id of the car that he selected? Because I need it for the post request if he wants to delete the car for example. May be save into variable.
I know how to pass parameter to the modal and then show it into "h3" or "inputs"but this id I can't show him, also he can't change it because he can modify it to remove another car from the list.
Thanks for help
I think i understand what you need, so you have a main controller
public function cars()
{
$cars = Cars::all();
return view('cars',compact('cars'))
}
Then what you can do if you a view single car or delete you can pass the model.
public function single(Cars $cars)
{
return view('single',compact('cars'))
}
Your routes willl look like this
Route::get('cars',['uses' => 'CarsController#cars','as' => 'cars.all']);
Route::get('cars/{cars}',['uses' => 'CarsController#single' => 'as' => 'cars.single']);
and your HTML will be
{{$car->name}}
Hope this helps?
If you was posting via Ajax you would do something like this.
#foreach($cars as $car)
<tr>
<td>{{$car->name}}</td>
<td><a class="view" href="#" data-id="{{$car->id}}">View</a></td>
</tr>
#endforeach
<script>
$('.view').click(function() {
var car = $(this);
var car_id = car.data('id');
$.ajax({
url: '/car/single'+car_id,
type: 'get',
success: function(data) {
$('#details').html(data);
}
});
});
</script>
Will use the same controller:
public function single(Cars $cars)
{
return $cars;
}
Related
I'm quite new to angular and wanted to know how to make it so i can have 1 page that you put the info you want to filter in the table and when you press "search" it will lead you to the second page where you see the table after its filtered.
i my question is odd but i really couldn't find any answer how to do this online.
I cant share code as its confidential to my work.
Something that looks like this site : https://maerskcontainersales.com/
I have tried using mock data but still couldn't put my head into the right thing to do.
There can be multiple ways how you can achieve this.
Using Provider
Suppose you have two pages and , serach-page is where you will enter your filters and result-page is where the table renders.
In search-page, you will create inputs( ex: textbox, dropdown etc ) and have ngModels for all of them, or you can use Angular reactive forms i.e FormGroup and FormControls. Users will select their input and click on search button, which will read values from models or controls and store them in the provider.
search-page.component.html
<form [formGroup]="searchForm" (submit)="search()">
<input formControlName="country" />
<input formControlName="city" />
...
<input type="submit">
</form>
search-page.component.ts
export class SearchPage {
...
search() {
const country = this.searchForm.get('country').value
...
// get rest of the values
...
this.searchService.setData({ country, city });
this.router.navigate(['/result']); // '/result' is path on the result-page
}
...
}
search.service.ts
#Injectable()
export class SearchService {
_data : any;
set data(val) {
this._data = val;
}
get data() {
return this._data;
}
}
result-page.component.ts
export class ResultPage {
...
ngOnInit() {
const filters = this.searchService.getData();
// filters will be your data from previous page
}
...
}
Using RouterParams
search-page.component.html
// same as before
search-page.component.ts
export class SearchPage {
...
search() {
const country = this.searchForm.get('country').value
...
// get rest of the values
...
this.router.navigate(['/result', { country, city }]); // '/result' is path on the result-page
}
...
}
result-page.component.ts
export class ResultPage {
...
constructor(route:ActivatedRoute) {
this.country = route.snapshot.paramMap.get("country")
// alternatively you can also do below
route.paramMap.subscribe(filters => {
// you will have your filters here
});
}
...
}
And once you have values of filters in result-page, use them to get data or filter data if already fetched, then render the table accordingly.
Let me know if I wasn't clear.
The simple solution I would suggest you to use a filter component and a results component a third container component. This component will get the filter criteria as an input variable and will output the filter criteria (using an output variable) when you press the "filter" button.
The container app will look like this:
<filterComponent (onFilter)="changeFilter($event)" [data]="someDate" *ngIf="!filterCriteria"></filterComponent>
<resultsComponent [data]="someDate" [filterCriteria]="filterCriteria" *ngIf="!!filterCriteria"></resultsComponent>
The filterCriteria that is sent to the second tableComponent will come from the eventEmmiter of the first tableComponent. The filterCriteria variable will be initiate to null and this will allow you to switch from one table to the other.
I have a pins table in my database with a pin_date column.
In my migration I have this:
$table->dateTime('pin_date')->nullable();
I have a button that points to a post route
Route::post('/pins/pin-date/{id}', 'PinsController#pinDate');
that leads to a pinDate controller method:
public function pinDate($id)
{
$pin = Pin::find($id);
$pin->save();
}
I want to update the pin-date column in the database to the current date and time when I click the button and hit the route. I am not really sure how to do this. Any help would be greatly appreciated! Thank you!
I would do this whenever the model is saving, you can bind to the boot function of the model and set it there:
public static function boot()
{
parent::boot();
static::saving(function($pin) {
$pin->pin_date = \Carbon::now()
});
}
If you want to update this value instead of handling it whenever the model is saved - such as through a button click, you can use Ajax. You will need 1.) a route, 2.) a click handler, 3.) an AJAX request and 4.) a controller to handle processing the request:
Click handler with Ajax:
$('.btn').on('click', function(e) {
$.ajax({
url: '/route/to/update/my/pin' + $(this).closest('.pin').data('id')
});
});
Then a route:
Route::post('/route/to/update/my/pin/{id}', 'PinController#updatePinDate');
Then make the controller method and update it accordingly:
public function updatePinDate(Request $request, Pin $pin)
{
$pin->pin_date = \Carbon::now();
$pin->save();
}
If you don't want to use javascript, you can just use a standard form with the same route/controller methods:
<form action="/route/to/update/my/pin/{{ $pin->id }}" method="POST">
{{csrf_field()}}
<button type="Submit"> Update Pin Date </button>
</form>
public function pinDate($id)
{
$pin = Pin::find($id);
$pin->pin_date = \Carbon\Carbon::now();
$pin->save();
}
I hope it works.
So, I am very confused here. I want to filter books that are already presented on the page by a value of a property from its array and that property is its specific Category(Philosophy, Classic, Poetry, etc...) when user click on the specific corresponding button on the panel.
Here is source-code: https://github.com/EgomortIncognitus/bookstore
This is my first Angular project, and I am quite a beginner in all of this, so I know that StackOverflow is not a "write code for me" service, but I genuinely want to understand this in depth as I do not have a single idea how to do this. Please, if you can provide me step-by-step examples I would be truly grateful to learn from you. Thank you in advance, big time.
You will do the filtering on your book-listing.component.ts:
You declare an array of categories which we instantiate with a first value 'All' so later we'll be able to reset the filter and to show all books:
categoryArray = ['All'];
Then, to be able to go back and forth with filtering we keep the books array only for display filtered books and we declare another booksDatasource array where we are going to keep the books list unmodified, as received from the service. This way, each time we filter on booksDatasource and add the filtered result to books for display.
booksDatasource: Array<any> = [];
After this, we modify the ngOnInit like this:
ngOnInit() {
this.booksService.getAllBooks()
.subscribe(
data => {
this.booksDatasource = data;
this.books = this.booksDatasource;
this.fillCategory(this.booksDatasource, this.categoryArray);
},
error => this.error = error.statusText
);
}
First, we fill the booksDatasource with all data, then we bind booksDatasource to books for the first time to show all books and we call the new added method fillCategory in which we iterate the datasource and extract all categories we have and add then to categoryArray:
fillCategory(data, categoryArray) {
for (const book of data) {
if (categoryArray.indexOf(book.category) === -1) {
categoryArray.push(book.category);
}
}
}
On book-listing.component.html, we add a new select that will display all the categories we have on categoryArray and we bind onChange event to trigger the categoryChanged() on component:
<div class="col-sm-4">
<label for="sort-field">Category</label>
<select (change)="categoryChanged($event.target.value)" name="cat-field" id="cat-field" class="form-control">
<option
*ngFor="let cat of categoryArray"
[value]="cat">
{{ cat }}
</option>
</select>
</div>
On the categoryChanged(cat) we pass the selected category from the select and we filter the booksDatasource for books having the passed category and we add them to books array for display:
categoryChanged(cat) {
if (cat === 'All') {
this.books = this.booksDatasource;
} else {
this.books = this.booksDatasource.filter(item => {
if (item.category === cat) {
return true;
}
return false;
}
);
}
}
I forked your repository, added the working code and made a pull request with the changes so you'll have all this working on your repo.
I have recently started working with backbone.js and i am finally started to get my head around after many tutorials.
One thing i am stuck on is how to use the routing to allow a list to pull different rest request.
Say i have the following in my collection
var NewsCollection = Backbone.Collection.extend({
model : News,
url: 'http://api.example.com/index.php/news/all/format/json',
});
From my understanding correct me if i am wrong backbone stores all the data pulled from the above feed into my model that extends this collection, this will all work i will pull in the feed and then display it in the view
This is where i get confused within my routing i have the following.
var NewsRouter = Backbone.Router.extend({
routes: {
"": "defaultRoute",
"news/:country_code":"updatedRoute"
},
defaultRoute: function () {
console.log("defaultRoute");
var movies = new NewsCollection()
new NewsView({ collection: movies });
movies.fetch();
//setInterval(function(){movies.fetch({success: function(){}});}, 60000);
},
updatedRoute:function (country_code) {
//confused
this.movie = this.movies.get(country_code);
}
})
I need to run the updatedRoute function when that will display a list of news based on cat of country code see below.
http://api.example.com/index.php/news/country/gb/format/json
How do i update the whole feed when a list item is click so the browser url would be.
http://localhost:8888/backbonetut/#news/gb
my list item is.
<li><a href='#news/gb'>GB</a></li>
I can get that in the updateRoute function with
this.movie = this.movies.get(country_code);
Can someone please help
You can either override the fetch function on your collection or temporarily change the url of the collection in your router action.
I am trying to change the table data in JSP on change of ListBox.
When user select Organisation Name then, the table will be only display list of users belonged to that organisation.
I feel like the action class isn't being called from javascripts.
<script type="text/javascript">
function getOrganisationUsersList(value){
var submitUrl = "listUserByOrganisation.action?organisationId="+value;
$.ajax({
url:submiturl,
type: 'get',
beforeSend: function(){
$("#loading").show();
alert("parsed");
},
success: function(result){
if(result!=''){
$('.myTableWrapper').html(result);
} else {
alert(result);
}
}
});
}
</script>
Below is select tag which calls the javascript.
<s:select listKey="%{organisationId}" list="organisationList" listValue="%{organisationName}"onchange="getOrganisationUsersList(this.value)"/>
I populate all users at the start of the page.
so, to only display selected user for particular organisation, do I need to create another action class? I am now trying to use the same action. Help needed !!!
Thanks.