Is there any possibility how to change HTML (.jsp) page without refreshing it?

Usecase is that user writes something to textarea then hits some button and I need then to add some object ie picture to previously defined place in my page ~~~> I need to change HTML code without refreshing the page (without the loss of the text in the textbox). I really need to change the HTML code, so pls don't advice any solution without changing the HTML code.

I'm not very into frontend technologies, so I don't know if it's even possible, so excuse me pls, if this is a stupid question.

I can use only frontend technologies.

Is there any possibility how to change HTML (.jsp) page without refreshing it?

Usecase is that user writes something to textarea then hits some button and I need then to add some object ie picture to previously defined place in my page ~~~> I need to change HTML code without refreshing the page (without the loss of the text in the textbox). I really need to change the HTML code, so pls don't advice any solution without changing the HTML code.

I'm not very into frontend technologies, so I don't know if it's even possible, so excuse me pls, if this is a stupid question.

I can use only frontend technologies.

• javascript
• html
• web-applications
• frontend

• 1 This is so general that it describes a great deal of the JavaScript from the last ~10 years. I suggest you take a look at JQuery - it will probably help with what you need. – penguat Commented Apr 4, 2013 at 10:13
• 1 oh..thanks...as I've said - I usually write backend in java, so I don't have a clue, what frontend technologies provide and what are the possibilities. I'll check this out :) – Martin Dvoracek Commented Apr 4, 2013 at 10:15
• Look into javascript event handlers and dynamic DOM element creation / CSS display attribute. – Xavi López Commented Apr 4, 2013 at 10:16
• 4 Honestly, I'm voting this up. Yes it's vague, but I think there would be many frontend-beginners out there who would search these exact words when trying to acplish something like this. This is a great opportunity to help point future beginner visitors in the right direction. – Jace Commented Apr 4, 2013 at 10:24

5 Answers 5

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./

jQuery load():
http://api.jquery./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).

Maybe this will work for you.

<div id="mydiv"></div>
<a id="refresh">click</a>

<script>
$(function() {
  $("#refresh").click(function() {
     $("#mydiv").load("yourdomain./file.php")
  })
})

also see this:

http://woork.blogspot.nl/2007/10/how-to-change-text-using-javascript.html

Use JavaScript so you can make changes to the Document Object Model It is very easy to learn and very powerful.

You should use the javascript function document.getElementById (DIV THAT YOU WOULD LIKE TO PLACE IN).innerHTML = YOUR_TEXT;.

If you need a response from the server without reloading the page (you will still have to load, but the client will not notice), try using AJAX.

Yes, this is possible. You should use JavaScript to change the HTML used to display the page.

You will probably find it useful to use a library such as JQuery.