How to implement a redirect with HTMX? - javascript

HTMX is great and using AJAX for most of the stuff is awesome! But from time to time I just need a real "phyiscal" redirect to another page.
Any ideas how to achieve this without starting to write custom JS code?
Thx!

Luckily, after googleing for ages I found this post at Reddit: https://www.reddit.com/r/htmx/comments/ot6kai/comment/h6v5cn9/?utm_source=share&utm_medium=web2x&context=3
You can easily set the HX-Redirect header in your backend and on the return of the response, your browser will magically redirect.
The docs state this here but unfortunately don't explain it in more detail on other pages.
Supplemantal: I experienced an issue with JS errors occuring after the redirect - even though everything works fine.

Related

Generic exception submitting form via JavaScript

I am moving an application from JBoss 7.1.q to WildFly. Parts of the navigation are done with by creating a form in JavaScript and submitting it via the submit method. All of these calls still work with the exception of one.
Instead of navigating to the page, I get a message of
A Generic Exception Occurred while accessing this page.
I grepped through the code to see if someone had created a window.onerror function to catch exceptions but could not find one. Even more odd, I added one to the js page and it failed to catch the exception.
I have waded through the JavaScript with Firebug and Chrome dev tools and from what I can see, everything looks to be OK, but clearly it is not.
I know it is not much to go on. I am looking for ideas for the next steps to triage this issue. I also find it curious that this problem did not appear until the move to WildFly but I have no clue how that could cause this issue - maybe the form posting is more strict?
Any ideas?

window.location failing on Android Browser

I've run into this and while the internet seems to be full of answers and discussions on this issue nothing seems to be working.
I'm building a mobile web page where I run a jQuery JavaScript function off a submit button, it calls an AJAX query comes back does it's business and then I get to the dreaded:
window.location = "url";
Now I've personally tried every version of this I've seen deprecated or not:
window.location.href =
window.location.replace() --I know this is achieving something different
window.location.assign()
window.navigate()
document.location =
document.location.href =
document.location.replace()
document.location.assign()
In each instance my Android Browser version 5.5 just stops at the point it is supposed to move through to the next url. I'm using full urls from the "http://..." so not missing that.
In contrast Android Chrome is moving through like a champ. Same Phone. Have I missed some crucially important piece to the puzzle here to get this moving on Android Browser?
My searches online seem to only say that:
window.location.href = '';
...is the most technically correct, right now I'd settle for working rather than technically correct.
If anyone has any ideas or at least some avenues to go off and explore I'll get all over that first thing in the morning.
Thanks for any help you can offer.
I found that this was a result of a faulty AJAX call. The weird thing that was throwing me off was that some items would work within the call (even though the call failed) and some would not.
The answer in my own case was to fix the PHP that the AJAX was calling and then changing pages worked as I would expect it to.

jQuery on MTurk, why does Chrome report "Unsafe JavaScript attempt to access frame with URL"?

I'm doing a couple of things with jQuery in an MTurk HIT, and I'm guessing one of these is the culprit. I have no need to access the surrounding document from the iframe, so if I am, I'd like to know where that's happening and how to stop it!
Otherwise, MTurk may be doing something incorrect (they use the 5-character token & to separate URL arguments in the iframe URL, for example, so they DEFINITELY do incorrect things).
Here are the snippets that might be causing the problem. All of this is from within an iframe that's embedded in the MTurk HIT** (and related) page(s):
I'm embedding my JS in a $(window).load(). As I understand it, I need to use this instead of $(document).ready() because the latter won't wait for my iframe to load. Please correct me if I'm wrong.
I'm also running a RegExp.exec on window.location.href to extract the workerId.
I apologize in advance if this is a duplicate. Indeed - after writing this, SO seems to have a made a good guess at this: Debugging "unsafe javascript attempt to access frame with URL ... ". I'll answer this question if I figure it out before you do.
It'd be great to get a good high-level reference on where to learn about this kind of thing. It doesn't fit naturally into any topic that I know - maybe learn about cross-site scripting so I can avoid it?
** If you don't know, an MTurk HIT is the unit of work for folks doing tasks on MTurk. You can see what they look like pretty quick if you navigate to http://mturk.com and view a HIT.
I've traced the code to the following chunk run within jquery from the inject.js file:
try {
isHiddenIFrame = !isTopWindow && window.frameElement && window.frameElement.style.display === "none";
} catch(e) {}
I had a similar issue running jQuery in MechanicalTurk through Chrome.
The solution for me was to download the jQuery JS files I wanted, then upload them to the secure amazon S3 service.
Then, in my HIT, I called the .js files at their new home at https://s3.amazonaws.com.
Tips on how to make code 'secure' by chrome's standards are here:
http://developer.chrome.com/extensions/contentSecurityPolicy.html
This isn't a direct answer to your question, but our lab has been successful at circumventing (read hack) this problem by asking workers click on a button inside the iframe that opens a separate pop-up window. Within the pop-up window, you're free to use jQuery and any other standard JS resources you want without triggering any of AMT's security alarms. This method has the added benefit of allowing workers to view your task in a full-sized browser window instead of AMT's tiny embedded iframes.

linkedin button dynamic rendering

How to render linkedin button in a dynamic way? e.g. writing the "<script type='in/share'></script>" at runtime or after the page has finished loading. I already tested on writing it or appending it in the body tag using jquery but it doesn't work.
I'll appreciate any help. thanks.
For anyone still wondering how to do this, after you load your
<script type="IN/Share"></script> //Don't forget other attributes
Just call IN.init() in your javascript and it will render the buttons.
The Developer guide does say something about using undocumented functions, but this forum post on the developer site:
https://developer.linkedin.com/forum/3-problems-share-button
As stated by Eugene O'Neill (Web Developer for LinkedIn)
1) IN.Parse() and IN.Init() are here to stay. While we do employ the policy that any undocumented methods may or may not be supported indefinitely, these two are uniquely crucial to the functionality of the framework. The amount of work it would require to remove IN.Parse()... I don't even want to think about it ;). IN.Init() is our preferred method for loading the framework asynchronously and won't be going anywhere. Feel free to use either method.
Here is how I am doing it with jQuery. I just call the linkedInShare function when I want that share widget to load.
function linkedInShare() {
$.getScript('http://platform.linkedin.com/in.js', function() {
$('.something').append('<script type="IN/Share" data-counter="top"></script>');
});
}
Hope that helps!

Google Analytics: _trackPageview without page refresh?

I'm reworking some site tracking for a site I'm working with. For the tracking we are currently using Google Analytics, which seems to be working fairly well. However, I'm having some troubles resembling the ones in this question, but it's old and no one answered, so I'm bumping a bit here. :)
Basically, I'm tracking two kinds of things. Raw pageviews (entering a page), and events on the page (lightbox opened, something important clicked, etc). I'm using _trackPageview for both kinds of events, because I need to be able to track some lightbox flows in GA's goal funnel tracking, and as I understand it _trackEvent calls can't be tracked in goal funnels.
The problem here is that it seems like the way GA works, it doesn't really post its data instantly (firebug doesn't show any requests happening, at least), but defers it to a page refresh or something like that. I'm not totally sure what happens, but basically I'm getting all events up to the first one leading to a page refresh all shuffled up in the funnel and looking like they all happened as an exit from the event causing the refresh. (Did that make sense? :) Is there any way of forcing GA to "flush" an event when it happens and not defer it? Or am I using things totally wrong?
EDIT: I was a bit blind reading the firebug logs... It does actually do the request to __utm.gif with the correct data. Makes the funnel being weird even more strange though, so the basic question is still valid.
Thanks
I made a function for this. We wanted to track how many people click on each on of a few links we have so we "track pageviews" for it.
function trackPV(trackerCode, url)
{
var tracker = _gat._getTracker(trackerCode);
if(url)
{
tracker._trackPageview(url);
}
else
{
tracker._trackPageview();
}
}
Basically, you pass in your tracker code (UA-XXXXX) and a url if you'd like to, such as "http://www.example.com/link1", by default it just tracks the page you are on.
Hope this helps.
I believe each call to _trackPageview will submit a unique request to Google Analytics (via parameters to the __utm.gif object). Google Analytics is pretty tough to debug since there is such a lag between the time your send your data, until it is actually visible online. Typically, you will have to wait 4+ hours before your data will show up - so maybe you just need to wait to confirm that your code is working.
Hmmm... I really only have experience with the old GA, but it seems to me that your best course of action is decoding the utm.gif request and seeing if it contains incorrect information. Here's a list of debugging tools that Google recommends.
use "event tracking" . At least check it out in google analytics help.

Categories