I'm building a site using bootstrap and have created a navbar with some links. The index page consists of the navbar and a body with a single div that pulls in content (pages I've created) via jQuery's ajax feature (depending on what link was clicked in the navbar, that page is displayed in the div).
The site is for users who have permission to access pages based on folder settings I've created (if a user has access to a folder, he can view the pages within it). It works fine for the most part, but when a user who does not have access to a page clicks on a link, I assumed that the error page would show up in the div. However, it just bounces the user off the site completely to an error page.
My solution is to use a jQuery unload event.
I placed this in a .js file:
$( window ).unload(function() {
alert( "Bye now!" );
});
But a popup now shows up when I click on any external link, when I close the browser, or when I refresh the page. I only want it to activate when a user clicks on a specific link (one with an id class). I want to let them know that they clicked on a link that they do not have access to, and if they do not stay on the page they will be forwarded to an error page. How would I go about doing this?
--Update--
Here is the JSFiddle Link to JSFiddle
So for example, all users have access to the page "technology", so when they click that link on the navbar it is fetched and displayed in the div id "result". However, only some users have access to the page "inspections"; for those who have access the page is fetched, for those without it redirects them from my page to an external error page. I want a warning to pop up so they know that they don't have access and if they follow the link they opened that they will end up on an error page.
--Update 2--
Using Mr. Genuis' code got it working, but I have one final question. I implemented the code and a pop up appears for users who don't have access to the link (exactly what I wanted to happen), but when they click the OK button or click the x button on the popup, they are still forwarded to the error page.
Is there anyway to disable that? I tried updating the unload function (that Mr. Genuis provided) with this code, and it works (it gives the user an option to stay on current page which prevents the error page from loading), but the pop up function also activates when a user tries to close the browser page. I just want it to trigger when the link is clicked.
Here is the code i used:
$(window).bind('beforeunload', function(){ return '>>>>>Before You Go<<<<<<<< \n Your custom message go here'; })
I am really not sure if your approach is right for the given problem.
About activating the window unload event conditionally,
move that unload event hookup inside the link click event, that way you hookup the window unload event only when needed. Not always!
Update:
Something like below. For illustration purpose only.
Warning: I feel there is a smell in this approach.
$(".link").click(function(){
if(true){//Your condition check goes here.
$( window ).unload(function() {
alert( "Bye now!" );
});
}
else{
window.location.href = "someurl";
}
});
Related
I'm developing a Chrome Extension that automates click. My extension worked on Multi-Page Application. It can click the buttons on the website. But I'm having a problem with this specific website which is a Single Page Application.
My extension can't trigger button click using this JavaScript
function clickButton(){
var submit = document.getElementsByClassName(".class");
submit.click();
}
My Question is, how to trigger button click on a single page application? Because it seems like using .click() isn't working
Further information
The way my extension works is that I click on a search button, it shows me result. If there is a result, I do specific things. But if result is empty, I go back to previous page (search page) and then hit the search button again. And my extension can't click the search button nor back button. My assumption is, when I click the button using .click(), the web doesn't request that specific HTML page to show. Am I wrong?
Another Info About This Site
So this web is a single page application. After I login to this site, it brings me to https://sample.com/page1 -which is a home. Then I go to the search page (the URL is still the same but it shows a different layout, which is search page). On the search page, I input the search parameters, then hit the search button (the URL is still the same but it shows the different layout, which is search results). So I guess the way these web works is every time I click on a certain page, it requests page layout using history.pushState -i guess. So I'm wondering if there's a way to manipulate this history.pushState? For example, instead of clicking the back button, can I just go straight to the desired page?
document.getElementsByClassName(".class") returns an array, so array.onclick() will not work.
To trigger html event, not only click:
function trigger(elm, type) {
if (elm) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent(type, true, true);
elm.dispatchEvent(evt);
}
}
In your case, I think you want:
trigger(document.querySelector('.class'), 'click')
I want to be able to toggle a javascript function that opens a certain tab on my page when the page loads. However I only want this function to run automatically when coming from another page.
For example:
Page A has the function that opens said tab, which is triggered when clicking on a button normally.
I want the user to click a button on page B and redirect to page A, where the function on page A automatically triggers.
However if the user reaches page A from anywhere but page B I do not want this function to trigger automatically.
This is the best way I can describe it, any help would be great. (I should also mention this is being done is ASP.NET MVC4)
You can use document.referrer. Something like this.
if (document.referrer === 'pageB') {
// trigger the function
}
When a Page unload, i want a confirm box and it is possible with following code
$(window).on('beforeunload', function (event) {
return "Chandan From Mandya";
});
But instead of confirmation box i want to show customized dialog box.
I have read so many blogs, all are saying that we can't override.
But in facebook they are doing it. When in fb status we write something, and without posting, if we try to leave the page. they are show customized dialog box.
How that is possible ???
In jQuery, this is done with unload event.
The unload event is sent to the window element when the user navigates away from the page. This could mean one of many things. The user could have clicked on a link to leave the page, or typed in a new URL in the address bar. The forward and back buttons will trigger the event. Closing the browser window will cause the event to be triggered. Even a page reload will first create an unload event.
You can use it like this:
$( window ).unload(function() {
//Handling the event
});
The link to jQuery page is: http://api.jquery.com/unload/
As for the custom dialog box, try some of these:
http://bootboxjs.com/
http://www.queness.com/post/1696/create-a-beautiful-looking-custom-dialog-box-with-jquery-and-css3
There are a lot of custom dialogbox solutions out there, just google it.
Presently I have a button which will open a popup and it also pass some parameters(like id,name) in the same page.But now i want to open a welcome page(href link) and there it should the popup page with that id and name what i have passed.My onclick event is a javascript code which will open a popup.I have used something like this
This can be done in several ways. One simple way is:-
Redirect the user to your welcome page when onclick is fired.
At the same time of redirection, pass the information u want to show in the popup as get parameters to the welcome page.
Once the welcome page is loaded, check whether the particular get variables are set. If they are set, show a popup window in that page with the information passed via GET.
I searched a lot to get rid of this problem on the internet but could not find a specific solution despite the problem being discussed in details previously.
The query is simple. My javascript dynamically adds an Iframe to the web page (which displays a feedback form). The problem is that, "after answering", now when the user clicks the back-button of the browser the iframe instead of the browser window is affected i.e. the questionnaire is displayed again. I want the browser back button to behave normally.
This behavior is really annoying and I am having real trouble fixing this.
I am using firefox.
Looking forward to the replies. Please inform me if I should give more details.
Thanks,
Your form has a submit button, which posts the page to the server. The back button will always send the user back to the form regardless of whether you use a iframe or not. The ideal way is to notify the user of a completed action, in this case thank the user for the feedback (using an alert box) and redirect the user to the home page or provide a button in the page saying "Back to Home".
Firefox and IE indeed act like you mentioned, but Chrome do not, and I'd guess other WebKit browsers would do the same.
In Chrome, clicking the Back button will land you where you want to go (the previous URL of the parent frame). i.e. Chrome to not add iframe URL changes in the back button history.
Sadly, I've found no way to force IE and FF to replicate this, so I used the AJAX post approach suggested above by Arun.
Here's my iframe source, which use jQuery to post the form, and replace the whole page with the result of that POST:
<form method="post" onsubmit="postForm(this);return false">
...
</form>
<script type="text/javascript">
function postForm(form) {
$.post(form.action, $(form).serialize(), postCompleted);
}
function postCompleted(data) {
$('html').html(data);
}
</script>
This works in all browsers; clicking the Back button will send you back to the previous URL a seen by the end user, instead of the initial form loaded dynamically in the iframe.
I encountered the same problem: I use a dynamically created iframe to show a "popup" on my page, whose SRC points to another page that has got a form and a submit button. After submitting that page, a JS callback is used to hide the iframe. As you explained, this causes a new entry to be added to the history (on IE at least).
But I found out that removing the iframe element from the DOM (instead of hiding it) results in the unwanted history entry being removed (tested on IE9)! Which is what the user would expect in that situation.
You can observe this yourself on IE9:
Open the back button menu (right-click the back button): you only have one entry for the current page
Press submit in the iframe => the back button menu shows one extra entry for the iframe
Remove the iframe from the DOM => the back button menu no longer shows that entry