AJAX back button history [duplicate] - javascript

This question already has answers here:
Getting Backbutton to work in single page website and implementing "speaking" URLs
(3 answers)
Closed 7 years ago.
Greets,
Before marking this question duplicate, I would like to tell that I have looked every question that could help me but neither of them does. I have a simple example below, your help will be appreciable.
Example:
Index.html page which gives 3 links to different pages, these links are not directed with href but with AJAX (without changing the URL). The content of the div is changed without refreshing the page and without changing the URL.
Problem:
I can not track the history, say I clicked page 2 -> page 3 -> page 2 -> page 1
Now, the client wants to go back to previous page (div content). How is this possible.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Back button/History Problem</title>
<style>
ul{
list-style: none;
}
li{
display: inline;
}
</style>
</head>
<body>
<!-- Menu for links to pages -->
<div id="menu">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<!-- HTML page is added without change in the URL address -->
<div id="content"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
/* Loads html page by AJAX in the content div */
function showPage(page){
$("#content").load("pages/page"+page+".html");
}
</script>
</body>
</html>
page1.html
<h1>Page 1</h1>
page2.html
<h2>Page 2</h2>
page3.html
<h3>Page 3</h3>

I have not tried this plugin https://rosspenman.com/pushstate-jquery/ but for what I've read this may help you...let me know if it can do the job :)

Related

Div suddenly became unresponsive

I am working on a project to explain jQuery to my students. I had a div that would slide on click and then added a second to hide. Then nothing worked so I removed all new code but the slide div no longer works.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
// slide function
$("#frog").click(function() {
$("#frog").animate({left: "200px"}, 500);
});
</script>
<style type="text/css">
#frog{
width: 100px;
height: 100px;
background-color: red;
position: relative;
left: 20px;
}
</style>
<title>I hate JS!</title>
</head>
<body>
<ul>
<h2>Programming Languages</h2>
<li>Python</li>
<li>Javascript</li>
<li>C++</li>
<li>C#</li>
<li>ruby</li>
</ul>
<ol>
<h2>Top 3 Best Animations</h2>
<h4><li>Slide</li></h4>
<div id="frog"></div>
</ol>
</body>
Your HTML is invalid. This can break any javascript as elements get rendered wrong. It should look like this:
<ul>
<h2>Programming Languages</h2>
<li>Python</li>
<li>Javascript</li>
<li>C++</li>
<li>C#</li>
<li>ruby</li>
</ul>
<ol>
<li><h2>Top 3 Best Animations</h2></li>
<li>
<h4>Slide</h4>
<div id="frog"></div>
</li>
</ol>
<script>//javascript here</script>
Also, it is strongly recommended to include your JS before your closing body tag. Because when the javascript initiates, the element it has to bind to, has to exist first! If the javascript renders before the element does, it will never be able to find it, therefore not work, so include javascripts at the end of your document, not the start.
You also need to wrap your javascript within a
$(function(){
//Javascript here
});
So that it will trigger on all browsers when the page has finished loading. (Not all browsers automatically trigger javascripts)
See this JS fiddle for a working example:
https://jsfiddle.net/5cxnLe4v/1/
-- also slightly important: make sure you close all your elements, like the </body> and </html>!

Automatically fill div from file

I am very new to html but need to throw together something for work as a POC, so apologies if I am asking a question that have been answered before, the truth is I wouldn't even know how to go about looking for the question because I am not sure how to ask it myself
I have included a description of what the code is doing at the moment and what I am trying to get it to do. I have also included the code itself which I have stripped it down to it's most simple form and embedded it as a snippet so that you can see how it behaves in it's current state.
CURRENT STATE
click on a topic
div opens up and hard coded, default information gets displayed
click on the topic name again/on the hide link/on any other topic, do any of these three things and the div closes again. If I click on any of the topics again, the same information get's displayed as before (regardless of what topic was selected)
WHAT I WOULD LIKE IT TO DO
click on a topic
takes the topic id and then reads data in from a text file relating to that specific topic (each topic has it's own file, it will read the entire file)
opens up the div as before except now it populates with the data that it just read in
if I hit the same topic again I want the div to close
if I hit close, obviously I want the div to close
if I hit another topic, instead of closing the div, I want it to just read in the info for that topic from it's own specific file and repopulate the div with the new data
<!doctype html>
<html lang="en">
<head>
<title>HTML5 Skeleton</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
font-family: Verdana, sans-serif;
font-size:0.8em;
}
header,nav,section,article,footer {
border:1px solid grey;
margin:5px;
padding:8px;}
nav ul {
margin:0;
padding:0;
}
nav ul li {
display:inline;
margin:5px;
}
.slidingDiv {
height:300px;
padding:20px;
margin-top:10px;
}
.show_hide {
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
</head>
<body>
<header>
<h1 position="centre">Blah</h1>
</header>
<nav>
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
<li>Topic 3</li>
</ul>
</nav>
<section class="slidingDiv">
<h1>Main heading</h1>
<article>
<h2>Sub heading</h2>
<p>Blahblahblahblahblah</p>
</article>
hide</div>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Sounds like using a database instead of a text file might be more along the lines of what you would need. If you made a database that hosted the title, content, links, etc. related to each topic, you could fill each of the <article> tags from the database rows with a little bit of php.

How to get the content of a html page from another html page?

I am making an application where a header with some Menus and a footer will stay in all the pages.
Now one way to this is write the code for header and footer in every page, which is a bad option.
The other option is using iframe,which I am using. here is my code-
<div style="height:75%;width:98%;">
<iframe name="someFrame" id="someFrame" frameborder="0" scrolling="yes" width="98%" height="100%"></iframe>
</div>
In this iframe I am calling the the contents of the other pages. I have one home page with a header and footer, and the middle portion will change using iframe.
To achieve the overlapping of iframes perfectly I use a jquery function which is below.
<script>
$("a").click(function(e) {
e.preventDefault();
$("#someFrame").attr("src", $(this).attr("href"));
$("a").removeClass("active");
$(this).addClass("active");
})
</script>
Now what I need is - is there any other way to do it?? That I can make 2 different pages for header and footer, and get the contents in every page? using java?? or ajax or whatever.. Any help will be appreciable...
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.html",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
demo_test.html
<h1>I am not part of this page</h1>
There is another way to solve your difficulty.create a html file for menu named navbar_menu.html
navbar_menu.html
<ul>
<li>Home</li>
<li>About Us</li>
<li>Ticket Sales</li>
<li>Merchandise
<ul>
<li>Products</li>
<li>Shopping Cart</li>
</ul>
</li>
<li>Past Shows
<ul>
<li>Photo Gallery</li>
<li>Video Clips</li>
</ul>
</li>
</ul>
In another html page say index.html. In index.html page code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$.get("navbar_menu.html", function(data) {
$("#header").html(data);
});
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
The standard way to achieve this would be to use PHP. In the page where you want the header html included add in: <?php include 'header.html';?> Then change the extension of the pages you put this code into to .PHP instead of .HTML .
You can use jquery load function to load the content into a container div.This way we can have separate fragments for header and footer and be reused across pages
For example
$('#headercontainer').load('ajax/header.html #header')
Please see
[http://api.jquery.com/load][1]
Hope this helps
Why not just use Asp.net with master pages. You can have a desktop and a mobile master page where you write the header, menu and footer once, then you just add content pages.
It also gives you a programming language to use. C# will allow you to do way more than just HTML and JavaScript. Plus you can setup web user controls and black box your controls.
If youre interested check out the free microsoft IDE at http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx

jQuery Mobile create a panel

I'm trying to start with jQuery Mobile but I'm stuck when I'm trying to create a left panel with an overlay slide. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>- test-</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="panel" id="testPanel" data-theme="e" data-position="left" data-display="overlay">
<h3>Default panel options</h3>
<p>This panel has all the default options: positioned on the left with the reveal display mode. The panel markup is <em>before</em> the header, content and footer in the source order.</p>
<p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
</div>
<div data-role="header">
<h1>test</h1>
Contact
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
<h4>Copyright 2013 - All Rights Reserved -</h4>
</div>
</div>
</body>
</html>
It doesn't work, when I'm clicking on my link button I have this message "Error loading page" and the content of my panel is already shown in the page. Thanks for your help!
Seems like you're using outdated versions of both jQuery and jQuery Mobile frameworks. I would suggest updating to the latest release versions.
Here's a working demo with your same markup using jQuery 1.9.1 and jQuery Mobile 1.3.1
Sliding panels were introduced in JQM 1.3 version. So it won't work for other versions. USe jQuery 1.7.2- 1.9.1 for JQM 1.3
See the blog post for more details : http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/
If this is not your index page then you are most probably navigate to it through an <a href="yourpage.html>Page</a> in this case jquery uses Ajax request to navigate from one page to another the ajax request does not load the whole content of your page , it only loads the content of the <body> tag i.e any scripts that you are writing inside the <head> tag will not be loaded thus the page will not work properly and you will face error
to solve this you need to use data-ajax="false" inside the <a> attribute to prevent jquery mobile to use Ajax call to load your page.
if it is your index page then please past the js code so we can check it
in all cases check these link
for loading jqm pages and this link problem of ajax call in jqm

adding a new tab on onclick event on content of first tab

Seems my question is too difficult or I am unable to explain my issue properly!!
I am using barelyfitz tabifier.
My html is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple Tabber Example</title>
<script type="text/javascript" src="tabber.js"></script>
<link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="example-print.css" TYPE="text/css" MEDIA="print">
<script type="text/javascript">
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the class is changed
to "tabberlive" and it will appear. */
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function loadDetails()
{
alert("here");
document.getElementById('myTab').tabber.tabShow(1);
alert("not here");
}
</script>
</head>
<body>
<h1>Tabber Example</h1>
<div class="tabber" id="myTab">
<div class="tabbertab">
<h2>Tab 1</h2>
<A href="#" onclick="loadDetails()";>Banana</A>
</div>
<div class="tabbertabhide">
<h2>Tab 4</h2>
<p>Tab 4 content.</p>
</div>
</div>
</body>
</html>
As clear, tab 4 is initially hidden as its class is tabbertabhide.
And tab 1 is having a text banana with onclick reference to loadDetails method.
What I want to do is, on clicking banana, I want tab 4 to become visible.
However, document.getElementById line in loadDetails method does not have any effect.
Can any one please help me with this specific technical issue!!
Below is the same issue I asked before in a generalized manner!!
Issue:
I have a webapplication with a search form on the index page which searches for fruits.
Based on the search criteria entered, the result will have a list of fruits. Each member of this will have a call back link to a javascript function. Something like:
<html>
<head>
<script type="text/javascript">
//Function to load further details on fruits
function loadDetails(){
//this will do a call back to server and will fetch details in a transfer object
}
</script>
</head>
<body>
<form method="post">
<A href="#" onclick="loadDetails('banana')";>Banana</A>
<A href="#" onclick="loadDetails('apple')";>Apple</A>
</form>
</body>
</html>
Now my issue is, I want to show the details on a tab which gets generated in a loadDetails function.
Something in the lines of www.barelyfitz.com/projects/tabber/
But dynamic tab generation on the onclick event in the content of first tab.
In other words, first tab will have the clickable list of fruits and on clicking a fruit, a new tab will get opened with more details on that fruit fetched from database.
Is it possible using simple javascript ??
Also, is it possible to do this in jquery without AJAX. I can not use ajax.
I am extremely extremely new to javascript. So I dont know how well am able to describe my question. But have tried my best.
Hope to get some help!!
Can you post this on a fiddle?
Also try the jQuery way of doing it which would be:
function loadDetails()
{
$('.tabbertabhide').show(); //make it appear without any animation OR
$('.tabbertabhide').fadeIn(); //make it to fade in.
}
The above code uses a class selector- in this case your selecting the items with class "tabbertabhide" and making them appear. Similarly you could also use an ID selector if you wanted.

Categories

Resources