Change HTML code without refreshing the page
Using jQuery
(a JavaScript library) you can utilize the load()
function to load the contents of another HTML file on your server and place it anywhere you want on the current page without refreshing (so you can even replace the current HTML if you like).
jQuery:
http://jquery.com/
jQuery load():
http://api.jquery.com/load/
Alternative Suggestion:
However, I know you say you can't refresh the page, but, if the only reason is because you need to keep the text in the textbox, you could use a form to POST
that text to another .jsp
page (or even the same .jsp
page, depending on how you go about it) where it will be available to you to use at your own discretion (to put it in another textbox, for example).
How do I modify the URL without reloading the page?
This can now be done in Chrome, Safari, Firefox 4+, and Internet Explorer 10pp4+!
See this question's answer for more information:
Updating address bar with new URL without hash or reloading the page
Example:
function processAjaxData(response, urlPath){
document.getElementById("content").innerHTML = response.html;
document.title = response.pageTitle;
window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
}
You can then use window.onpopstate
to detect the back/forward button navigation:
window.onpopstate = function(e){
if(e.state){
document.getElementById("content").innerHTML = e.state.html;
document.title = e.state.pageTitle;
}
};
For a more in-depth look at manipulating browser history, see this MDN article.
How to change URL without refreshing the page?
I think you might be looking for history.pushState
history.pushState([data], [title], [URL]);
Using your example of https://featurepoints.com/
history.pushState(null, 'FeaturePoints Login', 'https://featurepoints.com/login');
Source and more details https://css-tricks.com/using-the-html5-history-api/
Related Topics
How to Pass Data from Flask to JavaScript in a Template
Running Functions One After Other in React
How to Use Zindex in React-Native
Preventing Viewport Resize of Web Page When Android Soft Keyboard Is Active
How to Change Image Source on Hover Using Javascript, But Applies to Each Individual Photo
Stop Chrome Back/Forward Two Finger Swipe
Generate Child Row Under a Parent Row in HTML Table
Remove Duplicate Objects from Json Array
How to Replace All Words of Length Less Than 3 in a String With " " (Space) in JavaScript
How to Modify Chartjs Tooltip So I Can Add Customized Strings in Tooltips
How to Format Numbers by Prepending 0 to Single-Digit Numbers
Reverse Strings Without Changing the Order of Words in a Sentence
Reactjs - Multiple If Conditions Inside Map Function
Jquery Ui Tabs - How to Get Currently Selected Tab Index
Typescript Module Has No Exported Members - React
Connecting to Tcp Socket from Browser Using JavaScript
Ng2-Smart-Table Bind 'Add New' Button Event to an External Button