I have the following situation
Home Page -- User clicks a link, which directs them to a JS-generated page, which may be time intensive
JS-page does some work and may display a "timer" saying work will be done in X seconds, and redirects user to a PDF
PDF page is shown to the user
Problem:
Once the user is done with PDF, they click "Back" button on the browser, hoping to go back to Home Page, but instead they go to JS page, as that's how browsers work -- they step back once. Naturally that displays the timer again and redirects users right back to PDF.
How do I structure my software so that when users are done with PDF, clicking Back (or some other simple way) takes them back to the Home Page?
Simple work-around is for users to click back twice in quick succession, but that's kind of inconvenient - breaks usability of this particular piece for the users and I don't want to do that.
EDIT For Code:
PHP side:
case "export-to-pdf":
$printpdf->generateCanvasInBrowser();
break;
HTML/JS side:
public function generateCanvasInBrowser()
{
//generate form with data
//submit form to PHP script
document.forms['form'].submit();
}
PHP-side:
//Takes and processes POST-ed data from form, and generates PDF
<?
echo printPDF();
EDIT For solution try:
I did a modal dialog with Java Script (https://stackoverflow.com/a/15582060/2883328), and now JS page shows up in an overlay div, but then also does the PDF. It shows up in the dialog box, not in the main browser. It looks fair enough, but still breaks expected functionality for the user as they are used to clicking back from PDF to home page. With this one I'll need to find a way to submit the form AND get out of the modal box.
(moving over from my comment, which seemed to fix the problem mostly)
The best way to fix this is to display the countdown on the home page itself. That would avoid the problem altogether, because then you wouldn't load any page in between. If you use a modal, for example, which contains the js-generated page, then you will need to make sure to submit the form to the top page. You can do that by adding target="_top" to your <form> tag.
I hope this works for you.
Generate the JS Page INSIDE A DIV in the Home page and work widh "visibility: collapse" to show or hide .if you use JQuery use ("#div").hide() and .show()
That should be a lot easier and solve your problem
Related
I have a link on my page which opens up a text file located on the file server. when user clicks on the link it opens up the text file as fetched from the file server but this file gets updated when user refreshes the page. subsequently when user clicks on the same link after refresh to open the file it displays the old file. but when did a ctrl+f5(server cache refresh) on the text file tab it then refreshes and displays the updated file. but end user doesn't do a force refresh. looking to see if there is any work around in JavaScript to do a force refresh of the text file page before loading.
I would suggest monitoring the anchor in the URL to avoid a reload,
that's pretty much the point of using anchors for control-flow. But
still here goes. I'd say the easiest way to force a reload using a
simple anchor-link would be to use
where in place of $random insert a random number (assuming "dummy" is
not interpreted server side). I'm sure there's a way to reload the
page after setting the anchor, but it's probably more difficult then
simply reacting to the anchor being set and do the stuff you need at
that point.
Then again, if you reload the page this way, you can just put
myanchor2 as a query parameter instead, and render your stuff server
side.
Edit
Note that the link above will reload in all circumstances, if you
only need to reload if you're not already on the page, you need to
have the dummy variable be more predictable, like so
I would still recommend just monitoring the hash though.
I was trying to make an application in SharePoint and wanted to make it so that if you click on a button, it redirects you to a page and when that page loads I wanted it to instantly redirect the user to another page. ( I couldn't get the button to just redirect to the page I wanted on click, so that's why I tried doing it this way. ) I did this using a jQuery / JavaScript script. I'm new to making scripts so I was just testing and I ended up making this script:
<script type="text/javascript">
$(document).ready(function(){
Redirect();
});
function Redirect(){
$(document).load("url");
}
</script>
My problem is now that whenever that page loads, it just loads a blank page. But I can't get to the edit screen because it instantly redirects me to a blank page. I tried turning off JavaScript in Google Chrome but even though I was able to load the page without redirecting, I wasn't able to get to the edit page because it's in a jQuery AJAX drop down menu which obviously also doesn't work if JavaScript is turned off.
I would appreciate any help
EDIT: When I say edit screen I mean the place where I can edit the script. To do that I have to press a button on the page, but I can't do that since the page instantly redirects to a blank page.
Use the webpart maintenance page which allows you to remove and manage web parts without visiting the page, the instructions are as below.
Lets say your page is example.com/sites/default.aspx add the query string ?contents=1 to the page it will take you to the manage web parts page you can remove the script editor web part from there.
The other way is to use SharePoint designer to remove the web part this will also help you achieve the same result.
I'm working with asp.net ASPX pages. I've put toastr.js on my MasterPage. It works properly. I'm using it on a page with a Save button that stays on the same page like so:
ScriptManager.RegisterStartupScript(this, this.GetType(), "toastr", "toastr.info("Save successful.");", true);
and a Save&Continue button that saves and loads the next page like so:
ScriptManager.RegisterStartupScript(this, this.GetType(), "toastr", "toastr.info("Save successful.");window.location='NextPage.aspx';", true);
But, when I click the Save&Continue button it flashes the notification but then the next page loads and it's gone. No persistence across changing pages.
Maybe I'm fuzzy on javascript specifics but is there some asynchronous way to load the toast notifications so they aren't specific to a page?
I don't know much about ASP.NET WebForms, but here are some things to consider:
The issue is that when you submit and process a form using server side code (C# in this case), the entire page reloads, including your javascript files. This is why the toastr disappears when you click Save&Continue.
The only thing that I can think of would be this:
The method that runs when you click Save&Continue, would need to pass the necessary information to the next page, so that page two would know to display the toastr instead of page1.
If you truly want to submit a record to the database, navigate away and have a toastr displaying the entire time, you may want to look into Single page applications (Allowing you to make asynchronous requests, with routing, while staying on the same page, allowing the JS to keep running without full page refreshes). Although this could mean rewriting your application, which might not be an option.
I am trying a new functionality for my web site. I want to do simple navigation by hiding/showing <div> elements.
For example, when a user clicks a "details" button on some product, I want to hide the main <div> and show the <div> containing the details for the product.
The problem is that to go back to the previous "page", I have to undo all the display/visibility style changes, which is ok if the user clicks the "close" button in the newly opened <div>. But most users will hit the BACK button.
Is there a way to make the BACK button go back to the previous "state" of the page i.e., undo the visibility/display changes?
Thanks.
Yes. What you're looking for is called AJAX browser history.
There are a few open implementations out there, like RSH as well as plugins/modules for frameworks like jQuery and YUI.
to answer the question of your title (that's what I was looking for)
Using the BACK button to revert to the previous state of the page
and from the link from #reach4thelasers's answer, you have to set up a timer and check again and again the current anchor:
//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
setInterval("checkAnchor()", 300);
});
because there's no Javascript callback triggered when the BACK button is pressed and only the anchor is changed ...
--
by the way, the pattern you're talking about is now known as Single Page Interface !
You need to add an anchor to the URL whenever a change is made
www.site.com/page.html#anchor1
This will allow the browser to maintain the pages in its history. I implemented it in my current site after following this tutorial, which works great and gives you a good understanding of what you need to do:
http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
Your example in the comments won't work, because it works like this:
Page Loaded
Page Changed, Add Anchor to URL (back button takes you back to back to 1)
Page Changed, Anchor Changed (back button button takes you back to 2)
Page Changed, Anchor Changed (back button button takes you back to 3)
.... and so on and so on..
If there is, it sounds like a pretty evil thing to do from a UX perspective. Why don't you design a "back" button into your application, and use design to make it obvious to the user that they should use your application's back button instead of the browser.
By "use design," I mean make your application look like a self-sufficient user interface inside of the browser, so the user's eye stays within your page, and not up on the browser chrome, when they are looking for controls to interact with your app.
You can do this with anchors, which is how it's done in a lot of flash applications, or other apps that don't go from page to page. Facebook uses this technique pretty liberally. Each time the user clicks on a link that should go in their history, change the anchor on the page.
So say my home page link is:
http://www.mysite.com/#homepage
For the link that works your javascript magic, do this:
My Other Page
This will send the user to http://www.mysite.com/#otherpage where clicking the back button will go back to http://www.mysite.com/#homepage. Then you just have to read the anchors with
window.location.hash
to figure out which page you're supposed to be on.
Take a look to this tutorial based on ItsNat a Java web framework focused on Single Page Interface web sites
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