We Keep Coding

How to save information about page on redirect in Laravel Blade View in PHP

In Laravel 9 I've got 2 tables, one inside of another.
To avoid second table from taking too much space, by default, it's display is set to none and can be "rolled out" when button is pressed
<button
type="button"
class="btn btn-warning"
id="hidden{{ $buttonIndex }}"
onclick="
$('.items{{ $buttonIndex }}').slideToggle(function() {
$('#hidden{{ $buttonIndex }}')
.html(
$('.items{{ $buttonIndex }}').is(':visible')
? 'Roll'
: 'Rollout'
);
});"
>Rollout</button>
but when I refresh the page or do any CRUD operation, opened tabs are getting closed again.
Is there any way to keep them opened after page refresh?
I tried my way with AJAX, but if I would like to use it, I will need to rebuild whole CRUD operations and view, so I would prefer to avoid it.
Other way I'm about to try is to send button ID data on request, so in case it would be clicked, it will appear in the request(or url), but I've got no idea how to achieve it yet.
How can I keep second table opened on page refresh/reload

It sounds like the Session Storage is perfect for your use case
From Mozilla's documentation:
Window.sessionStorage
The read-only sessionStorage property accesses a session Storage object for the current origin. sessionStorage is similar to localStorage; the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends.
Whenever a document is loaded in a particular tab in the browser, a unique page session gets created and assigned to that particular tab. That page session is valid only for that particular tab.
A page session lasts as long as the tab or the browser is open, and survives over page reloads and restores.
Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.
Opening multiple tabs/windows with the same URL creates sessionStorage for each tab/window.
Duplicating a tab copies the tab's sessionStorage into the new tab.
Closing a tab/window ends the session and clears objects in sessionStorage.
Let's say your table is in a div like this.
<div id="hidden-table-{{ $index }}" class="hidden-table">
</div>
In your jquery, you get set its display based on some sessionStorage key.
$(() => {
$('.hidden-table').each(element => {
(sessionStorage.getItem('should-show-'+$(element).attr('id')) !== null)
? $(element).show()
: $(element).hide();
});
})
For this to work, you need to set this sessionStorage item whenever you're showing the table.
// show table with id 'table-id'
sessionStorage.setItem('should-show-table-id', true); // or anything that isn't null really.
And remove the key when you're hiding it
// hide table with id 'table-id'
sessionStorage.removeItem('should-show-table-id'); // removes the key. Using getItem on a key that doesn't exist returns null, so that works just fine.

How to use a button to come back to the index, checking the pagination table of a specific ID?

I have this problem: I use Yii2 and, when I go to an index page, I select a view for an element (Example, I go to the page 4, because I want to enter in the view of the element with ID 41, which is at the page 4 because I have the pagination set to 10). This is ok for me but, when I enter in the view, I have this link to come back to the index:
<?= Html::a ( "Back", ['codici/index/','CodiciSearch[IDCodice]='=>$model['IDCodice']], ['class' => 'btn btn-primary']) ?>
Actually, this return to the index, but it show me only the record with the ID that I pass to the link. So, in this case, only the record 41. I want, instead, that the Back button turn to the previous page checking the pagination in which I was, and not only the ID. So, the link must checking the pagination of an ID. I hope to be clear. I don't need a solution like "window.history.go(-1)" because this create a problem if I came to the view by another way. I would to have a specific option: the link must to return to the index and get the pagination of an ID (so, in this ex. case, to the page 4).
I hope to be clear. Thank you in advance!!!!

Here are the solutions I use:
most times I just open the target page in a new tab. That is the simplest solution. If this is acceptable then simply add a parameter to the Html::a options as follows:
Html::a(“text”,[url],[‘target’=>’_blank’]);
Note: if the link is within a Gridview you need to set the format to raw (“format”=>”raw”)
on the index page, pass the pagination number to the new page.
Html::a(“text”,[url, ‘index_pagination’=>5]);
You can then use this in your button
instead of passing the pagination, you can capture the referring page and send the user back:
$url = Yii::$app->request->referrer
This is easy but it can cause challenges if the user reloads the page in which case the referring page is the current page.

Change a state param and not reload the state. Feasible?

Using UI-Router v1.0rc1, is it possible to transition to the current state, changing only one param, without reloading the state. Let me give you my use case:
On the left of the page I show the listings titles of a user. When clicking on a title the main content is changed to... the listing data obviously. When clicking on another title, the current 'listing' state is reloaded and fed with other data. In my listing template, I have a map. Each time a new listing must be displayed, the dom is destroyed and reloaded (with the same template) which kills the map and rebuilds it. I would prefer to only change the params (the listing id) of the listing state, detect it and change the content of the template (and reposition the map). The actual listing data is currently loaded in the resolves thanks to the id param.
Is it something feasible?

Try this:
$state.go('some.state', { param: 'x' }, {reload: false});
more about reload can be found here

jquery back button to previous category in sortable gallery

I have a jquery portfolio gallery with 4 categories which are sortable. When you click on a category the portfolio is rearranged on the same page through jquery showing only those project in that category. Upon clicking a specific project the user can then see the project page/details. I want to add a back button on this page so that when a user is viweing a project they can return to category they were at before.
I tired the following which creates the back button but it take me back to the main portfolio page, not the category which I was browsing before.
function goBack() {
window.history.back();
}
This is one of the gallery page just in case: http://goo.gl/JeSNjD

Not knowing any of your application's code, this is a bit of a shot in the dark but I think I know what you're probably missing.
Using the history.back() will take you to the last page you visited (a page visit is only recorded if the URL is updated). If you are updating content in your website with jQuery and not loading a new page, your browser's history doesn't record this so back takes you back to the top page still.
What you will need to do is change your back button code to hide the current project, and redisplay the category page. You cannot use history.back().
Edit:
If you need more data to correctly rebuild the previous page, you can either change the url for the category page (not necessarily simple to implement but perhaps the most robust thing to do), or to store information about what page they came from. If you are using cookies, you could save navigation there, but you could also add a ref value to the query string when you navigate to a project page.
Category page:
Link to project
Project page:
Back button
Then use that information to reopen or resort your categories.

One problem is knowing which category a back button should return to.
For example, /portfolio/foothill-pasadena-2 should route back to the office category and /portfolio/131house should route back to the Residential category. If I emailed you a link to one of those and you clicked it to go straight to the project page, should there be a back button on the page when you go to it and would it take you back to all categories or to the category related to the project?
One thing you could do is to change your permalink structure to include the category, such as /portfolio/office/foothill-pasadena-2 and /portfolio/residential/131house. Then your could hard-code your back button to go to /projects. You have some jquery running there (wp-content/themes/yourtheme/js/jquery.custom.js):
var isotopeContainer = jQuery('.portfolio-wrapper, .gallery-wrapper'),
isotopeFilter = jQuery('#filter'),
isotopeLink = isotopeFilter.find('a');
isotopeContainer.isotope({
itemSelector : '.isotope-item',
layoutMode : 'fitRows',
filter : '.food-service'
});
isotopeLink.click(function () {
var selector = jQuery(this).attr('data-category');
isotopeContainer.isotope({
filter : '.' + selector,
itemSelector : '.isotope-item',
layoutMode : 'fitRows',
animationEngine : 'best-available'
});
isotopeLink.removeClass('active');
jQuery(this).addClass('active');
return false;
});
That is finding the four category links inside your filter div and adding a click function.
Maybe you can add some extra code that would get the document.referrer, checks it for a match against yoursite.com/new/projects/{category}/{project}, and pulls out the value of {category}. If the category matches one of your four values (food-service, office, residential, other), then call the click function on that element.

How do I change the URL of using $location with angularJS

I am currently trying to set up a table to go to a profile page when you click a row. But $location.url will simply append the 'profile.html' to the end of the current html page and not take me to the profile page. How do I change the current url to allow me to go to my page.
index html:
http://localhost:9080/AgentOnlineApp/index.html
html I get when I click the row:
http://localhost:9080/AgentOnlineApp/index.html#/profile.html
I want:
http://localhost:9080/AgentOnlineApp/profile.html
current AngularJS code:
$scope.selectTableRow = function(agent)
{
$location.url('/profile.html');
}

You might want to try this to load another page (outside your application):
$window.location.replace("profile.html")
Don't forget to inject $window

If you want to use the HTML5 history API, you need to set:
$locationProvider.html5Mode(true);
If you actually want to change the location entirely and reload the page, you are not quite using Angular as intended since this wouldn't be a single page app. However, you could do it with window.location = "profile.html"