Refresh DIV Content Without Reloading Page

JavaScript
1

Hi, first of all let me thank anyone willing to help out with this.

This will probably be easy to some of you, but I can’t seem to figure it out.

I’m trying to reload some dynamic content that is contained within div tags without refreshing the entire page. After some searching it appears that Ajax is my best bet, but I have never worked with JQuery before.

Here is the code snippet from the page containing the data I’m looking to refresh when a user click the “update” form button:

<div id="data">
			<table cellpadding="0" cellspacing="2">
				<tr>
					<th>column 1</th>
					<th>column 2</th>
					<th>column 3</th>
                                        <th>column 4</th>
				</tr>
                                <?php echo getList($currentpage, $highlight); ?>
                        </table>
                        </div>
			
<p><form method="link" action="javascript:document.location.reload()"><input type="submit" value="update" onClick="this.value = 'updating...'"></form></p>

As you can see I’m currently just reloading the entire page, which is weak. If anyone knows of an easy solution I would appreciate it, thanks again.

2

Here is the same thing I am doing with Jquery.
satya-weblog.com/2009/08/jquery-ajax-example-of-select-values.html
You will find a link there for doing same with simple Javascript and ajax.

3

hmmm…after reviewing that page it appears we’re trying to accomplish very different tasks (or maybe I missed something).

4

Please excuse and completely ignore my comments above, I rushed to post a question here without really thinking things through.

After doing more research, I’ve found what I believe is a better way to accomplish this task, but I can’t get it working.

I’m trying to auto-refresh the content inside a div tag using jQuery, and even found two great tutorials (can’t post the links, search for “jquery refresh div”, I read both brightcherry and 9lessons).

Looks straight forward enough, even for me. So I open the original code, which looks like:


<table cellpadding="0" cellspacing="2">
<tr>
<th>rank</th>
<th>website</th>
<th>traffic</th>
<th>change</th>
</tr>
<div id="data">
<?php echo getList($currentpage, $highlight); ?>
</div>
</table>

And modify as outlined in the lessons, moving

<?php echo getList($currentpage, $highlight); ?>

to an external file named data.php and calling it in the js to be refreshed every 10 seconds:


<script src="jquery.min.js"></script>

<script>
var auto_refresh = setInterval(
function()
{
$('#data').fadeOut('slow').load('data.php').fadeIn("slow");
}, 10000);
</script>
...........
<table cellpadding="0" cellspacing="2">
<tr>
<th>rank</th>
<th>website</th>
<th>traffic</th>
<th>change</th>
</tr>
<div id="data">
</div>
</table>

And it doesn’t work. At all. The PHP file doesn’t load and white space is displayed where the data should be. I’m at a loss here and think I’m just not seeing something, please help…

5

btt

6

I am trying something similar


<script>
$(function() {
  $("#refresh").click(function() {
     $("#mydiv").load("index.html")
  })
})
</script>

<div id="Container"></div>
	</div>
<a href="index.html"id="refresh">click</a>

But it refreshes the whole page. that i don’t want. I just want refresh the div “Container”

Can anyone tell me how can i do that?

Thanks in advance.

7

Any suggestion?

8

Um,


<script>
$(function() {
  $("#refresh").click(function() {
     $("#mydiv").load("index.html")
  })
})
</script>

<div id="Container"></div>
	</div>
<a href="index.html"id="refresh">click</a>

First, I wouldn’t be surprised if someone gets it wrong because you don’t have a space between “index.html” and id=“refresh”. Some browsers are picky that way.

Second, in your Javascript:
$(“#refresh”).click(function() { <– here you’ve got the anchor’s id
$(“#mydiv”).load(“index.html”) <–but here you say #mydiv… shouldn’t that be “#Container”?

I suck at JS but if this were my script I’d try fixing those things first and then see if it still didn’t work.

9

Thanks for your reply Stomme poes,

Surprisingly if i keep mydiv also its working while it should not have to. but you are right i need to put “container” instead of “mydiv”.

Still struggling with what i can do here. any more help?

10

Hi deepson,

you need a return false; in your function to stop the # link firing and reloading the page.


<script>
$(function() {
  $("#refresh").click(function() {
     $("#mydiv").load("index.html")
  
return false;
})
})
</script>

<div id="Container"></div>
	</div>
<a href="index.html"id="refresh">click</a>
11

Hi spike,

Thanks for your reply. Now its working. When i hover on the link which shows me the path as well,but i don’t want to show index.html in the path.

So i was trying add something like this.

<a href="javascript:void(0);" id="refresh">click</a>

But then its not working.:frowning:

Can you please tell me what i need to add here to get it work?

12

use a # link


<a href="#" id="refresh">click</a>

:slight_smile:

13

I have tried this. its not working only. :frowning:

14

SpikeZ pls enlighten… why does #mydiv work? Instead of #Container? In case I ever go into the whole jQuery thing…

15

ok, this works for me:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
$(document).ready(function() {

  $("#refresh").click(function() {
     $("#Container").load("index.html");
  
	return false;
	});
});

  </script>
  <style>body{ font-size: 11px; font-family: Arial; }</style>
</head>
<body>


<div id="Container"></div>

<a href="#" id="refresh">click</a>

<h2>Rest of the page</h2>
</body>
</html>

Use it as a test page

16

it doesnt :wink: I cut and pasted and didnt change it!!! :blush:

17

You mean to say that its not working for you. right?

I checked your code its showing me the following o/p

click
Rest of the page
click
Rest of the page

Its not refreshing the page,it just showing me the content again on the same page.:shifty:

18

Its not refreshing the page,it just showing me the content again on the same page.

But you said earlier you DON’T want refreshing of the page:

But it refreshes the whole page. that i don’t want. I just want refresh the div “Container”

in #Container you are calling all of index.html since you ask for it in your Javascript. So #Container should fill up with whatever text index.html has.

19

Exactly.
What is on index.html?

20

Hello spike and stomme,

I hope you guys are asking this question to me. :stuck_out_tongue:

Index page has lots of divs. so I just want to refresh this particular div only not entire page. The code i am having with me works great for me. but i just don’t want to show “index.html” name in my path which comes when i hover the link. So we were discussing that to put “#” instead of it. but then the functionality doesn’t work(div is not getting refreshed)

So the question is how to refresh particular div without showing entire page’s path or its not possible to do it?