I'm having a Laravel blade form which includes a table wihch displays some data from the database. And when i click on a certain column i wrote a js function to catch that id of the certain selected item to a js variable "var selectedItem".
Now i wanna pass this js variable to the 'edit.item.blade' page and load the relevant record corresponding to this value.
My question is what is the best way to edit a selected item in laravel ? and is there anyway to pass this JS variable to a route at a button click event and load the 'edit.item.blade' using the relevant record to edit.
What you usually do in laravel is pass the id of the record you want to see in the url. Say you want to view the details of a report with the id of 1 you'd go to the url "/reports/1" which points to a show function in the reports controller.
Routes
In your routes/web.php you'd add:
Route::get('/reports/{report}',RecordController#show);
What this is does is take anything typed after /reports/ and pass it to the show function. So if you'd go to /reports/1 the route would pass 1 to the show function
Controller
In your controller you have to make a show function which accepts the variable passed by your route. You'd then take that variable to look up the corresponding record and pass it along to a view.
Which would look like this
public function show($id){
$report = Report::find($id); // Find the corresponding report
// Pass the report along to the view resources/views/reports/show.blade.php
return view('reports.show',compact($report));
}
Show view
In your show view you can now use $report to get any information from the report like $report->name, depending on your database.
Index
Now in the index view, the view you were talking about I presume, you loop over all records from some table. Since you haven't included any code in your post I'm just going to assume you loop over your data using a foreach loop. Using that loop we can give each record a link depending on their id.
Which would look a bit like this
<table>
<tr>
<td> Name </td>
<td> Edit </td>
</tr>
#foreach($reports as $report)
<tr>
<td> $report->name </td>
<td>Edit</td>
</tr>
#endforeach
</table>
Related
I have a list of items, and each one has a link to click to edit it. I am using stimulus to make the edit "modal" form visible when they click that edit link. The id of what is going to be edited is present as an id= on the corresponding link tag of the list
So, the edit link looks like this:
<td>
<a data-action="click->content#edit"
data-target="content.editBtn"
id="<%= url_for(content) %>")>
Edit
</a>
</td>
And the idea is that the content#edit action in the stimulus controller examines the and locates the id of it and uses that to edit the right row.
However the problem I am having is, I think, that as a result all the rows of this list have a data-target with the same name and the wrong one (the first one?) gets bound to the target..
However if I wanted to make each data-target different by e.g. appending the id to it, now I have a long list of targets in the controller.js so that doesn't make sense.
What's the right way to handle?
If you're using Rails as the backend like your other questions seem to indicate, there may be a simpler, non-Stimulus solution. To use Stimulus, you'd need to fetch the data for the item from the server or from the DOM, display it in a form, then submit the correct form with the correct ID to the server through JavaScript. Why not just have a remote link_to button to the edit action for each item? Rails gets a JS request to the edit controller action, and you can load the modal form with the data that you have from your Ruby object.
If you use Stimulus for anything on the form, I'd use this opportunity to craft a Stimulus controller that listens to the ajax->send/error/complete events and automatically disables/enables buttons, sets loading spinners on buttons, and closes the modal. Those would be good areas to sprinkle in some functionality that Stimulus makes very simple.
This is actually a good use of Stimulus since it is modular. You add a controller for each row instead of having the controller around the page or table.
<tr data-controller="content">
<td>
<a data-action="click->content#edit" data-target="content.editBtn" id="<%= url_for(content) %>")>
Edit
</a>
</td>
</tr>
I was just having a similar problem.
This helped:
https://codepen.io/smashingmag/pen/ExPprPG
Basically you can loop over the targets like:
for(let tgt of this.mySameNameTargets) {
tgt.innerHTML = "Some Value"
}
This assuming you have this in the controller:
state targets = ["mySameName"]
You can also use "Action Parameters" to put the id in each row:
https://stimulus.hotwired.dev/reference/actions#action-parameters
From those docs it looks like this:
<div data-controller="item spinner">
<button data-action="item#upvote spinner#start"
data-item-id-param="12345"
data-item-url-param="/votes"
data-item-payload-param='{"value":"1234567"}'
data-item-active-param="true">…</button>
</div>
// ItemController
upvote(event) {
// { id: 12345, url: "/votes", active: true, payload: { value: 1234567 } }
console.log(event.params)
}
You can set the id of the item in that row in a param, and then when they click on that row you can dig it out of the params.
I have a table in ReactJS that is displaying data from a database using the map function. It works like so:
displayData(){
return this.state.legoParts.map((legoPart) => (
<tr key={legoPart.id} onClick={() => this.showForm(legoPart)}>
<td>
{legoPart.piece}
</td>
<td>
{legoPart.type}
</td>
</tr>
)
)
}
However I want a form, using the same data as the table row, to appear when the row is clicked so that I can then use the form to update the data. I honestly have no idea how to go about this- I'm not sure if I should put the form in the table and have it display when clicked or something else. Any help would be appreciated!
You'll need your app state to keep track of the part you're editing, and while you are rendering the table, decide whether to render a table row or the form based on that app state. I've put an example here: https://codesandbox.io/s/624p7zpzww
I have a table that is built from items in a DB and they contain sensitive information that I don't want to display until you click on a link contained in another table cell.
|item1|item2|click to show item3|(hidden span within cell)|
When you click on the link in cell 3 it will then show cell 4. I know how to accomplish this in typical jquery, but am not sure how to accomplish this in emberjs. Any ideas?
A JS fiddle of your setup would make this easier, but basically you would set a property on your controller from an action.
<span {{action showCell4}}>click to show item3</span>
on your controller have the showCell4 action:
actions: {
showCell4: function() {
this.set('cell4visible', true);
}
}
then for the table add a class binding
<td {{bind-attr class="cell4visible:visibleClassName:hiddenClassName">
sensitive info here
</td>
I have a list of tasks and each task has an associated address. I am putting markers on a map when the page loads so our team gets a visual representation of where the tasks should occur. We also have some extensive filtering on the page. How can I update the map markers anytime the filtered data changes?
<tr ng-repeat="detail in filteredDetails = (details|filterByStatus:page.statusFilter|filterDetailByDate:page.dateFilterFrom+'.'+page.dateFilterThrough|filter:{ColorStatus: page.colorFilter}|filter:{MilestoneIdTaskId: page.milestoneTaskFilter}|filter:{CustomerId: page.storeFilter}|filter:{RepId: page.techFilter}|filter:page.detailFilter)">
</tr>
Basically, anytime the filters execute and the table data is refreshed I want to call my code that puts the markers on the map and pass in the filteredDetails as the parameter.
Just write filter that you add at the end and inside you run your refresh:
ng-repeat="detail in filteredDetails = (details|...|filter:page.detailFilter|refresh)"
.filter('refresh', function() {
return function(input) {
//refresh the map. input will be filteredDetails
});
});
I have two pages (page1.jsp and page2.jsp). in page1.jsp i retrieve some values from database and display hyperlinks corresponding to those values. Now what i want is when i click any of those hyperlinks, in page2.jsp i should display other fields coressponding to the vlaue from the database. So what i essentially want is when a link is clicked the associated value must be passed to page2.jsp where i query the database to retrieve other fields.
when a link is clicked the associated value must be passed to page2.jsp where i query the database to retrieve other fields
So, you want to preprocess the HTTP request before displaying the JSP? For that you need a servlet.
Assuming that the links in page1.jsp are displayed like follows:
<ul>
<c:forEach items="${ids}" var="id">
<li>View data for ID ${id}</li>
</c:forEach>
</ul>
Then you will be able to preprocess the HTTP request in the doGet() method of a HttpServlet which is listening on an <url-pattern> of /page2:
Long id = Long.valueOf(request.getParameter("id"));
Data data = dataDAO.find(id);
request.setAttribute("data", data); // Will be available as ${data} in JSP.
request.getRequestDispatcher("/WEB-INF/page2.jsp").forward(request, response);
In page2.jsp you will be able to access the data as follows:
<p>The data for ID ${param.id} is:</p>
<p>Field 1: ${data.field1}</p>
<p>Field 2: ${data.field2}</p>
See also:
All about Servlets - contains Hello World example and useful links
You can do that by either passing GET or POST variables to the corresponding jsp page and reading them using jsp:
using GET method:
link
If you want to do this dynamically you will have to add to that on click using javascript:
GET using jQuery js library:
<script>
$(document).ready(function(){
$('#mylink').click(function(){
$(this).attr('href', $(this).attr('href')+'?datatobesend=value');
});
});
</script>
link
There are many ways to use GET/POST to send data from one page to another, this is just as quick as I could write one up :-) Using form submissions are another place you should look into if this way doesn't work out for you.
lIf you are talking about a variable that can't be serialized as a string and passed as an http parameter, as suggested, then you need to store the variable within the session.
--page1.asp
<?
session.setAttribute( "val", record );
?>
--page2.asp
<?
//Cast this to your type
Object record = session.getAttribute("val");
// Clean it up now that you're done
session.removeAttribute( "val" )
?>