Clojurians Log v2

When handling a success or failure after an http-xhrio event, how can I prevent re-frame forwarding to a blank page? Is it as simple as a correct return value (true or false) from the event handler? That’s usually the case, but doesn’t seem to work.

The usual trick is to have the # as part of the base URL for your web app. That prevents the browser from trying to load a new page.

It’s typically a setting in your client side router (reitit, secretary, bidi, etc)

In reitit, for example, there’s an option called :use-fragment that you can set to true to automatically put the # in the right place.

What do URL fragments have to do with the :http-xhrio effect? Redirecting to a blank page would make sense only if that URL is used for js/window.location. And even then, you would have to have something that displays an empty page.

@jmckitrick Are there any errors in the JS console in the browser?

Either there are some errors or you're not describing the full picture.

Here’s my base url: <http://localhost:3000/#/accounts>

Let me try again and check for errors…

I’m seeing all success messages in the console.

I need to know more about the fragment issue

Sorry, I was assuming that if the page is redirecting to a blank page, the error would have to be upstream from the :http-xhrio effect. I should have been more explicit.

@jmckitrick Then you're not describing the full picture. You said "forwarding" - what does it mean? Just a change in the UI? Or does the URL change as well? To what URL? And many other questions.

Ok, I’ll try to add details… it’s a SPA, and other click/http events work fine.

This is a new one, using a ‘save’ button and a POST

After clicking, the ‘on success’ handler is triggered, and the data are received correctly.

Your URL looks correct. If you’re not seeing anything in the web page, maybe something is happening to the contents of your app-db?

Let's go into a thread to prevent spamming the whole channel.

However, the screen goes white, to a basically empty page with just skeleton nodes

ok, here…

Before clicking, here’s the URL:

Do you use :button inside of a :form?

I’ve had buggy reg-event-db handlers that failed to update app-db correctly and screwed up the display.

You need a (.preventDefault evt) on your form submit-handler

good question, but no.

Just input fields in a div.

For example, if it returns nil instead of returning an updated db

Oh, if you have form elements on your page, yeah, that could be doing it to.

here’s the url before: <http://localhost:3000/#/accounts>

and after:

<http://localhost:3000/#/accounts>

With :http-xhrio you don’t need to use forms, you can just use inputs and buttons directly.

OK, so the URL is the same. Then where does the white page come from? What renders it?

I’m using a base setup from luminus template, which sets up re-frame and reitet front-end router

But it seems that he’s not returning db from the event actually it might be either

Ah, my hate for templates is tingling. :)

Or like Lu said, add .preventDefault to the form submit handler.

It doesn't matter what you use - check what is rendered.

ok another clue

The page is blank

However, a force refresh brings it back up again

It seems like you have something akin to

(when condition
   [main-app-component])

“Fragment” is just the part after the # in the URL. It’s designed to let web pages have a table of contents at the top of the page, with links to sections farther down the page.

let me see..

If the URL is not changing, then it means it's purely within your app's state and has nothing to do with requests. E.g. try to manually dispatch the event that fires when the request is successful - it should lead to the blank page just as well.

The part before the # is the web address of the page itself, and the fragment after the # is the name of an anchor tag within the page. So if the fragment is the only thing that changes, the browser stays on the same page and (in the old days) just scrolls to the section indicated by the fragment.

ok

BTW that "check what is rendered" is still meaningful even if you see a blank page. There might still be DOM elements (visible via regular DevTools) or React elements (visible via React DevTool extension).

Modern web apps hijack that functionality so they can use the fragment as the marker for different web app screens. It works really well, and you can even bookmark specific screens within your web app.

I really dislike Chrome, but I’ll start it up and try the react devtools

So.. after rendering, the react tools say I have the re_frisk element on the page and nothing else.

Check your components, from the root down the path that is supposed to be rendered with that URL. Somewhere there should be a condition that's false.

Also, check if you have any JS console filters in the browser - maybe there are errors but you have accidentally filtered them all out.

Got it!

It’s been a while, but I forgot the reg-event-db handlers need to return the updated db, and I had a console log statement as the last line in the function.

Thanks for your help!

Ha! Yep, that happens. :) HPH

ok, thanks for that

In the context of the reitit router, I don’t think I need to worry about it

Yeah, looks like you’ve got that all up and running correctly.

Hello guys, I'm working on a project that uses re-frame, but there are some pages when I press F5 to reload the information / data on the page disappear and sometimes I have to click on the homepage again. Does anyone know anything I can read to better understand why this happens? I was comparing it with react and sometimes in an application with redux the data is there whenever I give F5, the actions are called again and saved in storage. Can I believe that event-fx is not being called correctly for this problem to be happening with the re-frame? ps: srry my bad english

When you refresh the page, the app-db is created anew. It's a clean slate, that's it. Whatever you set to run when that particular page is loaded, will run, and the value of app-db will be created from that.

I can't really suggest any reading other than the excellent re-frame documentation.

Ok I'll read the documentation.. thks