So I am struggling with something that I am sure has an elegant solution that I am missing. I have a nested route system where the parent /data/streams (green) has a list of items that have action forms on them and where the action loader is located. However, these can be submitted from a child route /data/streams/$streamId (purple). All works fine except if the user is on a child route they are redirected back to the parent. I can kind of solve this with redirect and embedding the current location in the small pause form, but then I can't use useActionData for displaying error notifications when a call fails.
Remix treats <Form> submissions as navigations (standard browser feature). That is why your child route POST is navigating to the parent route (since that's where you're posting to).
Remix also supports form submissions that are not navigations (standard fetch). To do this, use <fetcher.Form>. NOTE: data returned from the action is available on fetcher.data. Also check fetcher.state and fetcher.submission to handle optimistic UI.
const fetcher = useFetcher()
return <fetcher.Form method="post" action="/data/streams">
https://remix.run/docs/en/v1/api/remix#usefetcher
Related
I'm new with Ember and I would like to show a full screen overlay when a user presses a "get stuff from the server" button.
What is the best way to achieve this?
Does Ember already provide something built-in? Or is it that the only way is to have a piece of HTML in one of my templates, to show/hide it when the promise where I make the AJAX call returns?
You have a few options available to you.
The first concerns a route change. Conventionally speaking, if the user is hitting a button that transitions to another route, a separate route can be created to handle this in-between loading experience.
To describe this briefly, if you have a route named foo, creating a sibling route named foo-loading with an associated template, will show a "foo-loading" page state while things are being fetched, and then dismiss it once things are good.
Alternatively, as you've hinted, if the call to action for a user intends an updated result on the same route, a loading service could be useful. In your application template, you could have a loading div that is hidden by default. Prior to initiating an AJAX request, you could turn the loading state on and reveal the loading div. Then, once the AJAX call is settled, the finally block could include a call to conceal the loading div.
This latter approach would involve a conditionally loaded block in the primary application template, a loading service handling show and hide, and a loading template.
You could use ember-modal-dialog to create a loading screen component that gets rendered when you're waiting for your ajax request.
For example:
// view.js
showLoadingScreen: true
// view.html
{{#if showLoadingScreen}}
{{loading-screen}}
{{/if}}
// loading-screen.html
{{#ember-modal-dialog}}
<div class="loader-full-screen-class"></div>
{{/modal-dialog}}
The advantage of the component/ember-modal-dialog is that this pattern is usually implemented as a modal, and this library is the standard in ember. The component then allows you to put it anywhere you need it to be.
Currently my users must get the visit form given by Route::get then fill it in to get back a result view given by Route::post. I need to create a shareable link such as /account/search/vrm/{vrm} where {vrm} is the VRM that is usually filled in on the form page. This VRM then needs to redirected to Route::post as post data. This needs to be done by my controller. How can I do this in my controller?
Routes:
// Shows form view
Route::get('/account/search', 'User\AccountController#getSearch')->name('account.search');
// Shows result view
Route::post('/account/search', 'User\AccountController#runSearch');
// Redirect to /account/search as POST
Route::get('/account/search/vrm/{vrm}', function($vrm) { ???????? });
POSTs cannot be redirected.
Your best bet is to have them land on a page that contains a form with <input type="hidden"> fields and some JavaScript that immediately re-submits it to the desired destination.
You can redirect to a controller action or call the controller directly, see the answer here:
In summary, setting the request method in the controller, or calling a controller's action.
Ps: I don't want to repeat the same thing.
For those who comes later:
If you are using blade templating engine for the views, you can add '#csrf' blade directive after the form starting tag to prevent this. This is done by laravel to prevent cross site reference attacks. By adding this directive, you can get around this.
return redirect()->route('YOUR_ROUTE',['PARAM'=>'VARIABLE'])
I am having an issue with Sammy routing, and combining use of the back button with history.replaceState. Is there an alternative way to replace the browser's URL without adding to the history stack, and fire a Sammy route other than history.replaceState?
history.replaceState triggers the Sammy route initially, but if I use history.pushState, then click the back button, then history.replaceState, it does not trigger the Sammy route.
It also seems to break if I use location.hash or location.href in combination with history.replaceState
I am wanting to use replaceState to control pagination and sorting of a table, but let the standard history stack work for different search parameters and navigating to different pages and back to a search screen.
Edit: I am looking into ways to set Sammy's internal URL without triggering routing.
Faced with the same problem. Solved with:
history.replaceState(path);
sammy.setLocation(path);
First- update browser history (sammy doesn't trigger location changes)
Second- force sammy to raise events with new path.
Also custom route logic is needed:
Sammy.mapRoutes([{'get': 'myPath', callback}])
Callback should parse new path, and if only params after '?' symbol are changed, then pass these parameters to the viewModel's method.
Then inside this method you could handle changes like this:
public onParamsChanged({page}) {
this.myTable.setPage(page);
}
If I have a controller method that sets flash.success("some.i18n.key"); and I render a page that is loaded via ajax that item does not get removed from flash. Even though I've rendered the content to the screen (html loaded into a div in the success handler of my ajax post) the next page I visit still has the success message in flash. Pages that work with a normal form post,non ajax) this issue does not happen. Any idea whats going on?
Further investigation seems like this might be some sort of race condition. When I do a normal post and the FLASH cookie is returned it expires immediately and on the next request it is not sent back to the server. In the case of the AJAX post and then a subsequent request the cookie IS sent back to the server.
flash values are kept for one redirect. If you call render in your controller at the end of your method, you do not issue a redirect, so values will be available for the next request. To avoid this you have the choice :
use renderArgs in your method to pass your value to the view
at the end of your method, do not call render but call another method of the controller, thus you will issue a redirect instead of a direct render.
Since play 2 they changed the flashing a bit, instead of 2 maps (incoming, outgoing) there is just one.
What I end up doing is calling:
#flash.clear()
Just after the flash messages are rendered (in the view). This way, you are sure they are rendered just once, regardless of weather you use direct render, or redirect.
I am trying to use CodeIgniter and jQuery-ui dialog to create a modal window with form to update user information.
The process should be like:
1. Press a button on a view page.
2. A modal window pops up.
3. Inside the window is a form that a user can fill.
4. If the user filled something before, the information should be shown in corresponding field
5. Click the update button on the modal window to save the changes to database.
Can anyone provide a good sample of this process?
I used ajax to pass the data but it didn't work when I was trying to update the data to the database. It would be nice if an example of how to pass data from ajax to php and how php handle that.
Thanks,
Milo
well the jquery bit for post(), get(), ajax() works the same in any measure you would normally use it.. key difference here is with CI you can't post directly to a file-name file-location due to how it handles the URI requests. That said your post URL would be the similar to how you would access a view file normally otherwise
ie: /viewName/functionName (how you've done it with controllers to view all along. post, get, ajax doesnt have to end in a extension. I wish I had a better example then this but I can't seem to find one at the moment..
url = '/home/specialFunction';
jQuery.get(url, function(data) {
jQuery("#div2display").html(data);
});
in the case of the above you notice despite it not being a great example that. you have the url with 2 parameters home and specialFunction
home in this case is the controller file for home in the control folder for the home file in views the specialFunction is a "public function" within the class that makes the home controller file. similar to that of index() but a separate function all together. Best way I have found to handle it is through .post() and a callback output expected in JSON cause you can form an array of data on the php side json_encode it and echo out that json_encode and then work with that like you would any JSON output. or if your just expecting a sinlge output and not multiples echoing it out is fine but enough of the end run output thats for you to decide with what your comfortable doing currently. Hopefully all around though this gives you some clairity and hopefully it works out for you.