Change HTML Code Without Refreshing the Page

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



Leave a reply



Submit