6
How to switch pages internally without changing the user URL? Without using frames.
Example:
The user has entered my site: http://exemplo.com and clicked on the menu and went to the page "Contact".
Make the URL continue: http://exemplo.com, even though the current page is http://exemplo.com/contato.html
3
I recommend loading the page you want into a div
<div id='conteudo'>
And a button to trigger the charge event :
<div id='newConteudo'>
With the help of jquery:
$('#newConteudo').on('click', function(){
$('#conteudo').load('subPag.php')
});
in this case the file subPag.php will have the function mount the new subpage whereas the loaded subject will be part of a main page that will not be reloaded.
The archive subPag.php should be treated as a page snippet. You should not have the tags <head> or <body>, is an excerpt from your original page.
This has its advantages:
.on.I do not recommend loading too much script in the subpage, as it loads the main page and can easily generate conflicts.
There is another possibility with track loading $.post. In this option you use a button/link to activate the function, which in turn can send some data or even form fields to a PHP file. this PHP file, in turn, processes the data and returns a set of information via JSON. This information can be processed in the return function of the command $.post and directed to a div or other page location/element for changing the current page. This all without changing the top page URL.
Hello @SULBACH, welcome to SOPT, I edited your question to add code sample markup, which makes it easy to read the answer. For more information visit http://answall.com/helphelp help desk
1
Maybe you want to work with the exchange of links that if the page suffers a Reload.. I got it right?
The best advised for such cases is to work with Deep Linking
A great library to work with Deep Linking on JS is the SwfAddress asual
You navigate between pages through Ajax without your page undergoing a Reload and also placing a browsing history in your url that is worked as follows:
www.site.com.br
www.site.com.br/#/contact
whereas in /#/contato the call would be to your file contato.html
see an example of this navigation here
My question is not to show the "/" forward, the user will only see: site.com/
In that case... Forget Deep Linking, History, Angular Routing and anything else. If you don’t want to EVEN touch the URL, use pure Ajax or else the "technical repair" suggested by @Bacco in the comments of your question. But we’re back to provoking the discussion: do you really need to keep this URL static? Simple pages generally do not justify the use of AJAX, due to the additional complexity, problems with Search Engine Optimization and the user’s already mentioned history/favorite. It is one thing not to index the results of a query or other dynamic content, but static data (in the eyes of the user)?
1
The best way to do this is by using history.js
https://github.com/browserstate/history.js/
It’s robust and simple to implement. Just download it, add it to your Solution and then consume it into a javascript Function.
Here is a functional example of how to change your website URL after the user clicks on a button in the Contact menu:
HTML
<html>
<head>
<title>Teste de mudança de URL</title>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<button type="button" class="btn" id="btnAdd">exemplo 1</button>
</li>
<li>
<button type="button" class="btn" id="btnRem">exemplo 2</button>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
Javascript - in this case, loaded at the end of the HTML code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
<script src="jquery.history.js"></script>
<script type="text/javascript">
$('#btnAdd').click(function(){
History.pushState({state:1}, "State 1", "?state=1");
});
$('#btnRem').click(function(){
History.replaceState({state:2}, "State 2", "?state=2&user=beto");
});
</script>
-2
In native javascript to do so:
<script>
document.getElementById("id_da_div_ou_Body").innerHTML = '<object type="text/html" data="arquivo.php" ></object>';
</script>
Browser other questions tagged javascript c#
You are not signed in. Login or sign up in order to post.
With these specifications you gave only with ajax
– Erlon Charles
You can even simulate this with the history, but it will probably have unwanted side effects at some point. http://answall.com/a/16799/70
– Bacco
Ever tried to use Ember.js ? May be useful!
– Bruno Casali
As pointed out by @Erloncharles, it seems that Ajax is the case, if there is no concern with history (for the user) and SEO; after all, we do not want to go back to the Flash era, right! Hahaha! You could take a look at Angularjs. I believe it has two useful features in this case: templates and routing.
– Rui Pimentel
Other technical repair (1): is to use POST. So you would have buttons instead of links, and index would process the POST value to define the content. This one works even with JS off. 1. Gambiarra
– Bacco
NULL you have solved the problem?
– Jorge B.
A friend of mine said that he managed to find the solution using Rewrite URL, I will check with him.
– anon
Then it would be nice if you post the solution here if it actually works. But... Rewrite URL? Are you sure?
– Rui Pimentel