Develop Reference

Passing Javascript variable to route in laravel 5.3

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>

How to prevent PHP Post Max Size being exceeded on a Form submission

I have a FORM on a PHP web page that accepts a table of data (editable-grid) which the end-user is in control of in that they can add as many rows as they like. One of the fields is also a TEXTAREA which means each row has a variable size.
If the post is too large however, it will be rejected by the server and all the target page will see is an empty $_POST. Worse, if the user navigates back to the input page, it will show its initial empty state, losing all data entered and annoying the end-user to say the least.
I could increase the POST_max_size setting in PHP, but all that will do is push the boundary at which it will fail.
I could also check in JavaScript what the size of the post will be, PRIOR to them submitting the form, ideally as they add each row or change the textarea content, but I'm not sure how accurate or slow that will be. It also means they would have to remove some data or rows.
The only other option I can think of is to submit each row individually in a hidden FORM, through AJAX, once they click the Submit button. I'm not sure it is a good idea to replace one post with hundreds of posts to the server.
Any other ideas?

Instead of sending the entire datagrid you can just send the edited row as if it were a single form using javascript. If you send each row in a loop with ajax even if it is not edited you can choke the server in the same way as if you were sending the entire datagrid. Instead of sending 20k rows of data with just one column modified, just send one row when the user leaves the textarea.
I don't know how you manage the editing events but with jQuery (for the sake of simplicity) could be something like this.
$(document).ready(function() {
$('textarea, input').on('blur', function(e) {
var $row = $(this).closest('tr')
var data = {
id: $row.data('id'),
input: $row.find('td input').val(),
textarea: $row.find('td textarea').val()
};
// e.g. foo.php/1
$.post("foo.php/" + data.id, data)
.success(function() { /* silent success */ })
.fail(function() { alert('Error') })
});
});
with html
<table>
<tbody>
<tr data-id="1">
<td><input /></td>
<td><textarea></textarea></td>
</tr>
<tr data-id="2">
<td><input /></td>
<td><textarea></textarea></td>
</tr>
<tr data-id="3">
<td><input /></td>
<td><textarea></textarea></td>
</tr>
</tbody>
</table>
example jsfiddle https://jsfiddle.net/vt0a0udx
ps: sorry for the bad english.

try to change this value in php.ini
max_input_vars = 1000 to 10000

Where and how to store data locally using $.post

I am using this code to edit data on table ,this is allowing me to edit data ,but I am not able to find that where and how should I store data locally on that form itself ,if i don't want to store it in database, I want to know what this "/somewhere" should be(url or some file or what).
<table id="mylist_remark"><tr>
<td class="editable" contenteditable="true">Something</td>
</tr></table>
$("#mylist_remark .editable").bind("blur", function(e) {
console.log($(e.target).text());
$.post("/somewhere", {remark: $(e.target).text(), candidate_id: $(e.target).nearest("tr").attr("id")}, function() { console.log("success"); });
});

... how should I store data locally on that form itself ,if i don't want to store it in database...
One solution would be to use localStorage to save the form elements locally.
If you felt like using jQuery, you could make the problem simple:
$("input").change(function(){
var input = $(this).val();
localStorage.setItem("input",input);
}
Then when the page loads, you set the val to the localStorage item:
var input = localStorage.getItem("input");
$("input").val(input)
More on localStorage, and even more on localStorage.

localStorage save content of multiple list items by id on click and get saved content on different page

I'm trying to have functionality where you can click on the, "MAKE IT MY STORE," link and it saves the content of the li based on the id and will pull the content of the li onto another page.
This code:
<li><xsl:attribute name="id">store-<xsl:value-of select="#id"/></xsl:attribute></li>
outputs to
<li id="store-1075"></li>
and the number 1075 represented by, "#id," changes based on each store location and there are multiple locations.
The li in this section auto-generates any store locations added in the backend. So on the frontend it currently displays more than one list item store location.
<ul id="storeList">
<xsl:for-each select="$currentPage/* [#isDoc]">
<xsl:sort select="#nodeName" order="ascending" />
<li>
<xsl:attribute name="id">store-<xsl:value-of select="#id"/></xsl:attribute>
<a href="{umbraco.library:NiceUrl(#id)}">
<img class="location-image" alt="">
<xsl:attribute name="src">
<xsl:value-of select="storeImage"/>
</xsl:attribute>
</img>
</a>
<a href="{umbraco.library:NiceUrl(#id)}">
<xsl:value-of select="location"/>
</a>
<p><xsl:value-of select="./address"/></p>
<p><xsl:value-of select="./addressCity"/></p>
<div class="makeMyStoreWrapper"><a class="makeMyStore" href="#"><xsl:attribute name="id">store-<xsl:value-of select="#id"/></xsl:attribute>MAKE IT MY STORE</a></div>
</li>
</xsl:for-each>
</ul>
Right now I have it setup to save the state of the, ul id="storeList" when clicked using localStorage.setItem. And then any time the id of #storeList appears in the code it will pull in whatever value was saved to localStorage as seen below:
$(function() {
var save = $('#storeList').get(0);
$(save).click(function() {
localStorage.setItem('saved', this.innerHTML);
});
if ( localStorage.getItem('saved') ) {
save.innerHTML = localStorage.getItem('saved');
}
Obviously this is not what I want it to do. Instead I want it to save the content of each individual li clicked. I want the code to be something like this:
var id = any of the store ids or the specific ids, whatever works better.
var save = document.getElementById('store'+id);
or maybe var id equals an array of all the possible store id numbers.
The main purpose is a store locator page where you can click on one or more of the stores and save them to your, "My Store," page. I almost have it working but I've hit a wall. Any help would be awesome and let me know if there is anything I need to clarify. I don't ever work with ASP so this is tricky for me and this is my first time doing any jQuery or javascript from scratch. I originally tried using it with cookies but decided to use localStorage instead since there is no user login.

I just finished a similar type project, hopefully this will get you in the right direction
Inside the document ready function:
$('.store').on('click', function () { // something with the class store clicked
var storeStorageKey = $(this).attr('id'); // store id of the item
$(this).data('value', 1); // use of html5 data values on the html line helped alot, just settin static right now
//set in local storage so refreshing the page remembers what youve clicked
localStorage.setItem(storeStorageKey, $(this).data('value'));
});
Now you can have a collection you can access via store ids, although it might be better to store the entire local storage value as a JSON object to iterate thru, whichever you prefer
Heres a link to my project javascript that used local storage if you would like reference https://github.com/Jrizzi1/ND-mSummit-bingo/blob/master/js/script.js

jQuery cleaning HTML table

This is my table:
<tr class=stuff>
<td id=id></td>
<td id=city_id></td>
<td id=temp></td>
<td id=date></td>
</tr>
This is my Javascript:
<script>
$(document).ready(function() { // waits when document is ready
$('.data').change(function() { // when dropbox value changes do this
getWeather(); // here I tried inserting table clearing code
});
});
function getWeather() {
$.getJSON('getTemperature/' + $('.data option:selected').val(), null, function(data) { // JSON request
$("#id").text(data.id); // changes fields accordingly
$("#city_id").text(data.city_id);
$("#temp").text(data.temperature);
$("#date").text(data.date);
});
}
</script>
Every item in dropdown menu does not have response from server, so I want it to clear the table just before making a new JSON request. So when JSON comes back with data, data is updated accordingly, but when JSON comes back with nothing, then all the tables will be empty.
At the moment when JSON retrieves no data, the old data still remains in the table.
I tried using $('.stuff').remove() and $('.stuff').clean() , but after using them right before getWeather(); then later I wasn't able to put info into table which I received from JSON. It just did not work anymore.
Feel free to ask any questions.

Try this
$('.stuff td').text("");
getWeather();

Depending how much of this sort of thing you will be doing on your site you might want to look into KnockoutJS, it is designed for dynamic displays with changing data, including auto hiding sections.