So I'm working in express and using hbs as my view engine. I want to make a fetch call from the front end passing form data to my express server. I then want to send a partial with the data sent from the front end to the front end so only that section of the page is updated. Also I want the page to not refresh so I want it to be asynchronous. Is this possible and, if so, how can I do this?
I tried the same long time ago with ajax/jquery, and It could be exausting, extense etc, I recomend to you use vue, react or angular, to handle your front end.
If you want to continue with this you can see this answer:
express.js how to update UI without refresh all page using handlebars
Related
Picture of WebView
Hello, I am working on a login page for my app. Right now the webView login page works! However, there is one big issue with the current implementation.
Basically for my login I call a series of functions:
Opens hidden website with a webView,
Injects javaScript to login to website,
Changes to page of website containing data,
Extracts data,
Pushes to new view as login was successful
Now this is all working, except I had to hardcode times for each function to take place using DispatchQueue.main.async. This is of course problematic because some of the functions vary in time, for example the time it takes to load the webpage. This means my login is successful 75% of the time. I need a way to track if the webView is finished loading so I can call the next function only when it is done loading. However, every webView I have seen that has something like this, uses a completely different structure. When I have tried these other structures, I could not make certain things work like my login function that uses evaluateJavascript.
Is there anyway to have this feature by adding something to my current implementation? Thanks!
I have a function in express that updates a user in the database. The current url where this function is run, is at localhost:3000/users/specuser?key=<MY USER'S KEY HERE>. When I update the user in the database, the webpage should change to load the new db value (which is accessed in the view). I tried this code at the end of the function to try to reload the page.
res.redirect(302, '/users/specuser?key=<MY USER'S KEY HERE>');
return;
But the page doesn't reload. I'm assuming that's because express sees the same url that the user is currently navigated to and ignores it? How do I reload the page so that the view sees the new user data and changes?
It's worth noting that when I change the end of this function to:
res.redirect(302, '/');
return;
The website does navigate to the root directory
It might also be worth noting that my views are written in pug js.
I fixed it in the client side. In my pug view I have a script tag script(type='module' src='/javascripts/specuserexists.bundle.js') which links to a webpack compilation of a simple js file where my function is run that called the update to the user. At the end of this update the user function, I added location.reload(); and then it worked.
The following code snippet can illustrate the issue present in Blazor applications which are rendered on the server side:
App.Client/Pages/Test.razor
#page "/test"
<p>#text</p>
#code
{
private string text;
protected override async Task OnInitializedAsync()
{
await Task.Delay(1000); // wait 1000 milliseconds
text = "foo";
}
}
When the component is first initailized on the server, the text variable is set to foo and a HTML document containing the string is sent over to the client. However, the client Blazor app isn't aware of the value that the server has assigned to the variable, which becomes null again. OnInitializedAsync is called again on the client and text is set back to foo, but only after a one second period during which there's nothing on the screen - a situation server-side rendering aims to avoid in the first place.
Do you know of any way to send components already populated with data?
Ok -- just being a bit picky -- this is a Blazor page....it isn't a component.
Yes, the pre-render they use isn't great, but assuming you're using Blazor for a SPA it should only happen once. Be careful to avoid a hard reload if you use the Microsoft.AspNetCore.Components.NavigationManager NavigateTo method. A hard re-load triggers pre-rendering because you refresh the SPA.
To avoid the whiplash, you want to avoid needing 1 second to load the text value. So you could use a singleton controller and inject it into the page. On the pre-render pass the value isn't yet known so we need 1 second to load it. Then on the client side pass the data could be accessed via the controller immediately.
Granted this isn't perfect if there is a ton of data to display. But in cases like that I generally show a 'loading' spinner and it gives the customer a feeling of controlled motion.
When using Google Places API you execute pagination.nextPage() to get the next set of data.
How can you go back to the previous page?
pagination.prevPage(), pagination.previousPage(), pagination.backPage() do not work.
Moving to the previous page is not possible via the current client. I suggest that you temporarily store each page as you move through them, if you need to support reverse pagination.
Hi guys I'm working on this application using activeadmin. I've come to a point where I would like to add in some ajax based functions. I have the basic form set up using teh activeadmin resource and it generates a very pretty form.
I would like to while the user is entering the details on the form - run a ajax call which would retrieve some html based on the values being entered and populate it on the page.
More likely I would like a way to add custom javascript to the page. Whats the best way to do this - I'm facing issues with returning html without the entire activeadmin layout coming with it.
You can use the /config/initializers/active_admin.rb
You can add javascript resources like this:
config.register_javascript 'my_functions.js'
I use to put code directly to /app/assets/javascripts/active_admin.js
You can also include script in /config/initializers/active_admin.rb