jQuery Mobile page implementation and hash navigation conflict - javascript

I am using jQuery 1.9.1 and jQuery Mobile 1.4.2.
I have a problem with my jQM site that causes data-rel="back" links to break. Originally I thought this was some other problem but I have found the cause of this.
My website consists of an index page which contains the header and the body, which looks like:
<div data-role="header">
</div>
<div data-role="page" id="login">
</div>
<div data-role="footer">
</div>
The login page does contain login forms and other elements but that is not important for this problem.
The other pages are simply html files that have:
<div data-role="page" id="pageId">
content
</div>
My javascript file then loads those files into the DOM:
$("body").pagecontainer("load", "page.html");
Then, all links do their usual navigation:
Link
And that performs normally.
The problem is that if you refresh on a page, for example #pageThree, the site reloads, and takes you to the login page, but the URL keeps #pageThree, but since it doesn't exist at load time it is ignored. This is my desired behavior. However, I then use the link
Link
to go to #pageFour which has a link:
Back to pageThree
Now, if I press that "back" button, it should take me to #pageThree, however since I refreshed on that page, the back button takes me back to the login page.
So in short: If I refresh on a page with a hash navigation, any back buttons that point to that page redirect to the initial login page instead.
I may have done an improper implementation of pageload and am open to suggestions, as long as it makes back buttons work properly.

Related

Refresh (not reload) iFrame

I'm trying to figure out how to refresh the contents of an iFrame on a page. I did quite a bit of Googling and hunting around through old posts, but all of the solutions offered are for reloading an iFrame to the initial src URL, and not the active URL.
For example, I have an iFrame that contains my Freshdesk client portal embedded into my main website. If I click around to a couple of different pages within the iFrame, I then want to be able to intercept a page refresh and simply refresh the iFrame to the active page.
Current Behavior:
Freshdesk Home --> Knowledgebase --> New Ticket --> Refresh --> Back to home
Desired Behavior:
Freshdesk Home --> Knowledgebase --> New Ticket --> Refresh --> Back to new ticket screen (the last page visited in the iFrame before triggering the refresh)
The refresh doesn't have to be triggered by an f5 refresh, I can use an inline button on the page, but it needs to reload the iFrame to the same page that it was last on, not the original src URL. I tried the following code, but it refreshes to the home page of my Freshdesk every time:
document.getElementById('iframeid').src = document.getElementById('iframeid').src
and
document.getElementById('some_frame_id').contentWindow.location.reload();
So, how can I refresh my iFrame without restarting back to the original src URL?
You can use the onbeforeunload event https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload to detect that the page is going to be closed or refreshed.
So you can then compare the active src and the original src of the iframe to know if the user navigated to some page inside the iframe.
Then choose your favourite message passing system to make sure the portal has a way to know that src after it loaded again: url parameter, local storage, cookie, something else...
With the help of Shilly and a bit of brainstorming, I figured out a solution to my problem, and am posting it here for anyone else in my situation. Turns out that Freshdesk (the website inside the iframe) allows you to use custom javascript. Using this functionality, I came up with the following:
1) use parent.postMessage on first page load to send the URL of the currently active page to my main website.
2) use sessionStorage to store the URL of the current Freshdesk page on my website
3) on first page load of my main website, check to see if a sessionStorage value is set, and if so, set the iFrame's src to this value.
It's not quite a true "only on refresh" solution, however it does make the last iFrame page visited persist throughout the remainder of the user's session, which means they won't lose their place if refreshing or navigating away temporarily. Thanks to the use of sessionStorage, this will also reset back when the user closes the page, meaning on their next visit they'll restart at the Freshdesk home page (or whatever other website you're hosting inside the iFrame).

display parent back history in iFrame

I want to display a users previously visited page in an iframe on my page. For example: if a user is on cnn.com, and then they type in mysite.com an click on a button on my page, I was the iframe on my page to display cnn.com.
I have read several solutions online but none have fixed my issue. My current implementation is as follows:
index.html:
<body>
<div>
<h1>Welcome to mysite!</h1>
<h3>Click the button to see a site you have previously visited</h3>
<button id="button">magic</button>
</div>
<br>
<p>This is a site you visited previously</p>
<iframe id="myIFrame" height="500px" width="100%" class="netframe" src="example.com"></iframe>
</body>
script.js:
$(document).ready(function(){
$("#button").click(function(e){
document.getElementById("button").style.color = "red";
$("#myIFrame").attr('src', parent.history.back());
});
});
The issue I am having is that when I click the button, the entire page goes back, and it is not shown in the iframe. So in my example when I click the button, my entire page goes from mysite.com to cnn.com. Id like the parent page to remain the same, and the iframe to load cnn.com within it.
I have read up on some of the quirks regarding how history is different depending on how you load up an iframe, but none of that has helped me.
If there a way to do what I want to do?
No, this isn't a thing that you can do. The contents of the user's browser history are generally treated as a secret; you cannot cause the browser to reveal them to you.
In situations where the user navigated to your page by clicking a link on the previous page, you can determine what that page was by checking document.referrer. However, this will not be the case if the user entered your page's URL manually, as you describe in your question.
In any case, methods like history.back() do not return a value; they cause the frame to navigate to the previous page in its history. There is no way to determine what this page is, and doing so will generally cause your script to stop running (as your page is no longer active).

jQuery tab with multiple web forms

I am trying to navigate multiple web pages using jQuery tab like below
<div id="tabs">
<ul>
<li>General</li>
<li>Education</li>
<li>Employment</li>
</ul>
</div>
this is working fine, when I navigate through tab click. But, if any post back happens within the pages, they are popping out of the tab(with out tab). I tried using the tab in a Master Page, it is showing the tab properly in Master page, but showing the ul markup again in the child pages.
Since I have lot of condition checks in every page, I am trying with separate pages, rather than putting everything into one single page.
Currently I am using User Control as the menu, to navigate between these pages. I am just curious to try the same with jQuery tab. Can anyone help me out to resolve this issue. Thanks in advance.
Because Your web forms are targeting the same master page (this result in render the whole page including html and head... tags)!
So, to solve this issue, you need to replace webforms by partial views (as of MVC) or simple user controls (as of WebForm) or webForm not having a master page, nor html tag
<div id="tabs">
<ul>
<li>General</li>
<li>Education</li>
<li>Employment</li>
</ul>
</div>

How to hide a transient web page once it's been used?

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

Select Remote View Programmatically

I'm trying out Kendo Mobile. I'm really impressed with it so far. I've read this tutorial and am modifying it a bit for my needs.
I've added an additional element to the tabstrip to include a "login" view. Because my login form is long and complex, I don't want the actual code in index.html. So, I've included it in a separate html file : login.html.
Now, when the user clicks on the login icon on the tabstrip, the GUI automatically transitions to the login form. All good.
When the GUI loads, I am using JS to detect if the user is logged in our not. If not, I want the GUI to automatically load the login page. I'm able to do that using Kendo's "navigate" function. Unfortunately, that takes the user out of the layout from the main application page. Is there anyway to have an external html page that when navigated to will contain the main applications layout?
<footer data-role="footer">
<div data-role="tabstrip" id="defaultTabStrip">
Home
Home
Foo
Home
</div>
</footer>
This properly loads the login.html page, but I have no GUI around it. I'd like to navigate to this content, but inside my main layout.:
if ( ! loggedIn ) {
app.navigate("login.html");
}
So ... this is awkward.
Now, when I use this :
if ( ! loggedIn ) {
app.navigate("login.html");
}
It all works properly. I didn't do anything at all. I just tried again later and the login page loaded properly within the GUI layout. So, I guess we can consider this solved.

Categories

Resources