Website keeps causing a postback when clicking a # link - javascript

I think my issue is simple but I can't seem to figure out what I've done to screw things up but...
I can't do simple page postbacks without the page fully reloading for some unknown reason on my website..
EXAMPLE: I have an ANCHOR created called
<a id="multi" href="#"></a>
I can't call this link from within the page without it completely reloading the page. This is causing other serious issues such as me pulling up my website on my Android phone.. the Menu itself compresses completely fine, but when you click on the menu it actually forces the page to reload like its doing a postback or something when its not suppose to.
Same thing with my Chat Widget i have on my website on the bottom right corner... it uses javascript and has it pointed to "http://www.website.com/#" so that nothing is suppose to happen so it can load the window after its received a click, but something is causing my site to actually do a post and its trying to access that as an actual website.
Anyone have any idea what could be causing this? I've tried even completely deleting and removing all my javascript and CSS references and everything what am i missing?

The # should only be making the page jump up. However, there'll be instances where:
Check if # is still on that link
There are times where some script removes the # and make that link point somewhere else. If you're on Chrome, you can inspect the link by right-clicking on it and inspecting it (other browsers should also have this too). Check if # is still the href.
Check for click handlers
There are also times when a handler is attached to links (I have a co-developer that did this once) and introduced too much magic to the page. Inspect the element and on the Elements tab of the inspector, there should be a tab called Event Listeners. Check for click handlers and inspect that. The harder thing to catch are delegated event handlers, so check for the ancestors as well.
Overlooking the obvious
You might have missed the #
You might be editing old code
You might be editing another file (always happens)
Clean the cache or debug in incognito or another browser profile which you can openly clear the cache.

Related

How to run popup.html without using default_popup? (CHROME EXTENSION)

So, I've got a situation where I want a background and content script to be run everytime the browser extension icon is clicked. The ideal behaviour is that extension icon is clicked, the script runs, and the popup will open, displaying the data that was grabbed by the script (but this should happen quickly, the script runs and gets the data very fast). Since chrome.pageAction.onClicked will not work if there is a default_popup defined in manifest.json, I think this leaves me with two options:
Use default_popup and figure out that the extension icon has been clicked some other way. I found this solution in another stack overflow post, but the workaround is to use default_popup: "popup.html", and then the popup.js that is defined in popup.html will send a message saying that the icon has been clicked, then when background.js receives this message, it executes the script. I implemented this idea and it worked... kinda. The trouble is, the popup will always come up before the script is fully executed, so you can't actually display the data grabbed by the script in the popup until the next click. I'm not sure there's any way to get the behaviour I desire using this method, so on to the next:
The other solution I can possible think of is to use onClicked, and then make the popup come up some other way, besides using default_popup in manifest.json. I'm also not sure if this is possible, I have looked on stackoverflow and haven't found anything similar.
Is the second method possible? Can the first method work somehow?
Your option #1 is correct, I think all that is needed is a loading screen when the user first sees the popup, and add some code that updates the popup as soon as it hears from the backend. Might need to see some code to better help there.
Option #2 will not really work, unless you opened the popup in a new tab (or just made it a whole new HTML page). I say this because there is a note here from the Chrome Dev team they will not support opening a popup unless it is from a user gesture -- https://stackoverflow.com/a/10484764/4875295.
If you wanted to go that route it would probably look something like:
Delete from your manifest.json browser_action.default_popup
In your background script add something like:
chrome.browserAction.onClicked.addListener(() => {
const data = dataMaker();
chrome.tabs.create({
url: `${chrome.runtime.getURL("app.html")}?data=${data}`
});
});
Then in your html file have some JS that reads the query string and updates the page accordingly.
Though, that's a different approach than you asked for and I think your original route may still be the best bet (with some added JS around loading).

How to find the JS function being called from Chrome Dev Tools in Angular application?

I'm working on trying to find a defect in an angular application in the javascript being used to scroll a page. Person clicks link, page scrolls. Simple.
Alas, I have no idea what functions are actually being called when a user clicks the link and given this app consists of dozens and dozens (and dozens) of separate files, I'm having trouble finding what's going on.
I've read about using breakpoints and setting them up via the SOURCES tab in devtools. However, regardless of which of the many JS files I open in there, I never get any breakpoint options to check.
Is there a way to see what JS is getting fired with a particular event on the page within Chrome's Devtools?
Go to Sources tab.
Unfold Event Listener Breakpoints
Unfold Control, check scroll checkbox.
Scroll the page.
Javascript runtime will stop on event listener bound to page scroll and place will be showed in main window under Sources tab. If it's library file (in You case Angular files), right click on the file and Blackbox script. Scroll page again ;)

Using history.pushState with the pageShow and similar events

Bit of background in the problem: I am working on a project that loads most of it's content via api calls in JS. The initial page is built in PHP and delivered ready to use, but every interaction/load after that is just done in JS async and pushed to the "content area" of the html. I'm adding QoL so that you can navigate back to where you were using your history/back/forward button, but in order to do that, every time you navigate using those buttons, I would like to force-refresh the page (for various reasons which I don't think are relevant but am happy to describe if requested).
I'm struggling to understand both pushState and pageShow when used in conjunction. As far as I know, I can use pushState to push new entries to the history object every time it's run, like so:
// Update history
var stateObj = {};
history.pushState(stateObj, response.data.title, uri);
That seems to be working when I run that section of code and check my browser history; a nice neat entry sitting there every time I run it. As far as I know, the title isn't actually supported by any browser, but it doesn't hurt to have it.
My issue occurs when I try to use that newly generated history with the back/forward buttons. As far as I can tell doing some google research, typical browser behavior will not actually reload the page when I press the back button. Herein is where I believe my problem occurs. While navigating to any url fresh will load that specific piece of content into the content area, the site is basically a single page application, loading content into the content area async as it needs it. It doesn't actually change pages. I'm not sure, but I think that is the core problem. I have tried to use several events to "catch" the back/forward behavior:
window.onunload
window.onpageshow
$(window).on("pagehide", function() {})
window.addEventListener("pageshow", function(event) {})
I know several of those are basically the same thing, but I was trying to cover my bases. I have looked around for a solution, and I know that window.onunload is SUPPOSED to override the bfcache (not even sure if that is my problem), but it doesn't seem to fire at all, no matter how many times I navigate between the history.pushState entries. I'm not familiar enough with any of these functions to tell where my problem is. What am I doing wrong?

waitForKeyElements(); - Stop a script firing on a popup in Chrome Extension?

This question is a follow-on to another question which needed asking and warranted a new post, so excuse me if I refer to things which may not be clear without reading the other question.
When using the utility waitForKeyElements() I'm facing an issue in which a div is included inside a small popup contained within the same URL. My extension is currently running on the Twitter site, and my intention is that a div contained on the profile pages (e.g. http://twitter.com/todayshow) gets moved above another div on the page. I'm doing this via waitForKeyElements() because of some loading issues which are resolved by using this utility.
However, on a profile page you can click a link to another users name which pops up a small window (inside the same window/tab, on the same URL) showing some info about them and a few previous tweets. The issue here is that the same div appears on this popup and is then moved to the main page behind the popup window, where it shouldn't be. On a profile page, this can be stopped by plugging in the false parameter to waitForKeyElements(), however on a non-profile page it is still possible to activate this popup which is then moving onto the main page, as the div I wish to move it above on a profile page still exists here, causing clear issues.
I'm wondering if there's a way around this, as bugs in Chrome have stopped me from excluding these pages. So far (just brainstorming) I'm thinking:
on a page where the div doesn't exist to begin with, create an empty one meaning false will handle the issue.
somehow stop the script from firing on a given URL, although due to the way Twitter works this would have to monitor OnClick() and the page URL (I think) which I'm unsure how to do.
stop running when the popup appears, but I have almost no idea where to start with that.
Any help is appreciated. Any necessary code related to this question can be found in the first two links, and the issue I'm facing can be seen by a quick visit to Twitter.
EDIT: When plugging in the false param it works when going directly to profiles via the URL bar, if you're on a profile and use a link to get to a profile, the script isn't inserted and my extension fails. So this would need resolving too, or an alternative method altogether.
I had a brainwave that I could use insertAfter() to insert the <div> I was originally moving in front of, after the <div> I was originally moving. This <div> is not present on the popup, which means that nothing is moved onto the back page when it shouldn't be.
In regards to the previous question, my code is now simply:
waitForKeyElements (
"jQuery selector for div(s) you want to move", // Opposite to what it was.
moveSelectDivs
);
function moveSelectDivs (jNode) {
jNode.insertAfter ("APPROPRIATE JQUERY SELECTOR"); // Again, the opposite.
}
This solves the issue I was having and my extension is now working just fine, however I will leave this question posted in case anybody comes back to it in future.

How to get rid of Internet Explorer 7 reloading on fragment change

I have an anchor General somewhere in my page. Clicking this in any browser but IE7 (haven't tried IE6) causes no page reload, as expected. However, under IE7 it reloads the page as soon as it's clicked. The strangest thing is that I have the exact same anchor elsewhere in the page and it causes no reload. The only difference I can see between these is a slight difference in style, and the fact that the faulty anchor is deeply nested in divs, where the other is closer to the top.
My questions:
Is this a known bug with IE7?
If so, is there any work around?
If not, any clue as to what might be
going wrong?
Edit:
If you want to see this yourself, go to http://filouguestbook.appspot.com/#!main sign-in with a google account and click on the Settings link in the the top bar. Switch between the General and Accounts pages, the app will reload. From the Accounts page, click on Settings in the top bar, this will switch tab but not reload!
We run in the same problem. There's an issue for this and some workarounds mentioned.
I've had a similar issue, it seems if there is no '#' in the location already, adding it dynamically will cause IE to reload the page. If there is already a '#' in the current location, you can change / append to the fragment without a refresh.
So you could make sure all links to that page end with a #, and/or onload add the # if it doesn't already exist (which will cause the page to double refresh once when it's loaded).

Categories

Resources