im trying out the HTMX lib and so far i like it alot. something that i cant quite get my head around is handling full page reloads.
Links
<a class="nav-link" href="#" hx-get="/api/?action=feed" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/feed">Feed</a>
<a class="nav-link" href="#" hx-get="/api/?action=profile" hx-target="#app" hx-swap="innerHTML" hx-push-url="/#/profile">Profile</a>
its quite nice in that it loads the content in my required div, and applies a /#/link into my url bar and browser history.
But when i reload the page on any of the urls /#/profile or /#/feed the page reloads to its default state not including the content thats designated on the /#/profile or /#/feed pages.
If i just use a url of /profile or /feed, i get a 404 error as expected.
Everything is amazing, am i doing something wrong?
For full page loads you would need to either:
Render the content server side
Use htmx with the load trigger to load the content on page load. You can find an example of that here https://htmx.org/attributes/hx-trigger/
In the second case you still need to be able to determine the type of page being loaded server side to render the appropriate div. Something like this:
<div hx-get="/api/?action=feed" hx-trigger="load" hx-target="#app" hx-swap="innerHTML"></div>
Related
I have a link defined in nuxt pages like this:
<NuxtLink to="/#section-x">Section X</NuxtLink>
The link is actually added to the menu in my global layout file. When I try to click the link from a page different than a root page (/any-path) the link is taking me back to the landing page and displaying the section as expected. But when I try to click the link from the root page (/), it's not performing any navigation.
I tried using anchor tag in the same way:
<a href="/#section-x">Section X</NuxtLink>
The anchor tag will work fine for the root page internal navigation but when clicked from a different page, it will provide a navigation to the root page but not to the internal link(e.g. #section-x).
Is there any way to use the or tag and providing an internal html navigation too from any pages as it should?
According to this, installing vue-scroll-to package
You could give this a shot
<nuxt-link
:to="{path: '/', hash: 'section-x'}"
v-scroll-to="{el: '#section-x'}
">
Section X
</nuxt-link>
I don't know how to Do it without adding more dependencies but I hope it helps
I am using jquery featherlight (https://github.com/noelboss/featherlight) after trying to get jquery lightbox (https://lokeshdhakar.com/projects/lightbox2/) to work. I am using DataTables to generate a list. One of the items in the table is a link to a php page that returns links. The problem is I am calling an external PHP page that generates a list of links. So my link code is like this:
<i class="fas fa-link fa-lg"></i>
The page "lenker.php" does a search and outputs html code. It looks fine in the chrome inspector. But the popup is empty. If I link to another page with the code hardcoded it shows fine. Why does it not show when it is generated on the fly? The html code looks just fine like this:
<div><a class="external" href="http://databank.artsdatabanken.no/FremmedArt2012/N63753" data-featherlight="ajax">fremmedartsvurdering 2012 for edelgran</a></div>
<div><a class="external" href="http://eol.org/pages/1033070" data-featherlight="ajax">edelgran hos Encyclopedia of Life</a></div>
<div><a class="external" href="http://linnaeus.nrm.se/flora/barr/pina/abies/abiealb.html" data-featherlight="ajax">edelgran i Virtuella floran, Sverige</a></div>
but the popup opens and then resizes to almost nothing since there is no content. Featherlight does not need any other initialization since it looks for data-featherlight="ajax".
Is the problem that datatable is dynamic content?
jQuery ajax expects one object so I solved this with enclosing my content in one DIV.
I am a newbie in Vue.js. I am currently using Vue.js on top of asp.net core.
I noticed that in 99% time page is served before Vue.js syntax is rendered. How can I prevent this from happening?
For example
When page load first I see
<ol>
<li v-for="u in subscribers">{{ u.name }} - {{u.email}}</li>
</ol>
And then after split of a second I see
<ol>
<li>John - john#domain.com</li>
<li>John1 - joh1n#domain.com</li>
</ol>
Since the template is written inside the page HTML code it will always be shown first by the browser when it’s loading the page. Usually Vue components include a template which is used to render the data and this won’t happen.
You can take the template that is written on the page and add it to the Vue component so it will use it to render, not the contents of the page. The simplest way is to just add the template as a parameter to the Vue component, but later on it may be better to use separate template files, or Single File Components which may take a bit more work.
I'd like to my "SPA" refresh when I click a link, instead of its default behavior where you see the minimal component replacement.
It sounds like I'm killing the best part of SPA, but I feel that the links without refresh cause more troubles than benefits - the worst one I suppose is that the page doesn't apparently respond if you click a link to the current page, which is rather confusing in my opinion:
<!-- You click, then of course nothing happens when you're at HelloWorld -->
<router-link :to="{name: 'HelloWorld'}">link</router-link>
Okay, I didn't know that a normal <a> tag works as my expectation if history mode is used, so I ended up doing this:
<a :href="$router.resolve({name: 'HelloWorld'}).href">link</a>
or maybe just:
link
Thanks akai, I use your help in the case when I want to use the same component. I have a list of categories and when I click on a certain category page needs to be reloaded.
<a :href="$router.resolve({name:'category', params: {id: category.id}}).href">
{{category.name}}
<span>({{category.posts.length}})</span>
</a>
I'm trying to properly close a modal when if I press the x button.
At first i tried doing this in the main index.cshtml page
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
#Html.Partial("Create")
</div>
</div>
and when closing the modal in my create page i had this
<button type="button" class="close" data-dismiss="modal">×</button>
And the modal closed properly but this was a popup from the main screen.
Although it technically worked I wanted the screen to be a bit bigger. So I tried doing this in the index.cshtml page.
#Html.ActionLink("Create new link", "Create")
The create screen still has the same design with the inline class of "modal-content" but the close button doesn't seem to work. I wasn't sure if it was because the ActionLink part is treating it as a brand new page since most links i looked online seem to say include the "data-dismiss="modal"" part and everything is fine.
If I do another actionlink back to the main page that completely refreshes the page and that isn't what I want because it refreshes the data that the user currently has. There's dropdown lists, query results and filtering done.
Is there a way to treat a modal page like a cshtml page properly so that I can close it without completely refreshing the entire page? Or am I going about this problem the wrong way.
Using Html.ActionLink, literally just drops a static a tag to the page. When you click on that, the entire browser view is changed to the new URL. In this context, "closing the modal" doesn't make sense, because there's no modal. You're just display the response from an action that just happens to be the content from a partial view.