Refresh DIV Content Without Reloading Page

Ok, Right now i am using iframes to refresh particular div. its working fine

<iframe width="780" height="720" scrolling="no" frameborder="0" src="live.php" allowTransparency="true"></iframe>

In live.php i am refreshing that page using jquery,like this-

<script>
$(function() {
  $("refresh").click(function() {
     $("#Container").load("live.php")
  })
})
</script>
<a href="live-photos.php"id="refresh"><img src="../images/control_refresh.png" alt="Refresh" border="0" /></a>
<div id="Container"></div>

When i come to my index.php and on hover of the refresh(link), i can see the link bellow in the path something like this

Quote

    mysitename/live.php

So now i don’t want people would know this file instead of that i would like to show something like this

    javascript:void(0)

Is this possible?:scratch:

  1. You are using JS so any one can look at the source and see what you are doing.

  2. All frames are bad, avoid using if you can. If you have to only then use an iframe. Being said that, in your case you can use ajax without any problem. I have tested above your example and my div got populated just fine.

http://www.ibm.com/developerworks/library/x-ajaxjquery.html

$('#stats').load('stats.html');

Check out Day 10
http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/
You can use it without append and i have changed the link to this and tested it and it works just great.

<a href="#">Load Favorite Movies</a>

I personally use this to pull the dynamic content created by the processing page. My code is on load and at that time the divs are hidden. I show these after these get populated. Tested these with a click and work great.

<script type="text/javascript">
var custIdentifier = '<&#37;=customerIdentifier%>';
$(document).ready(function() {
	$("#showAnnualReport").click(function()
	{
		$('#annualreportview').html('');
		$.get("annual-report-process.asp?customer="+custIdentifier,function(data){
		   $('#annualreportview').html(data);
		});
		return false;
	});
	$("#showSubReport").click(function()
	{
		$("#subreportview").html('');
		$.get("sub-report-process.asp?customer="+custIdentifier,function(data){
		   $("#subreportview").html(data);
		});
		return false;
	});
});
</script>

<div id="annualreportview"></div>
<a href="#" id="showAnnualReport">Show Annual Report</a>
<div id="subreportview"></div>
<a href="#" id="showSubReport">Show Sub Report</a>

Thanks a lot for your reply tahirjadoon,

You have shown your example with bit of ASP.NET. so i tried to change that with php. but its not working for me.

here is my code

index.php

<iframe id="editSectionFrame" frameborder="0" scrolling="no"
            style="display:block;width:100&#37;"
            onLoad="changeHeight(this);"
            src="live.php">
    </iframe>


live.php

<script type="text/javascript">
$(document).ready(function() {
	$("#refresh").click(function()
	{
		$('#Container').html('');
		$.get("live.php"){
		   $('#Container').html(data);
		});
		return false;
	});


});
</script>
<a href="#" id="refresh"><img src="../images/control_refresh.png" alt="Refresh" border="0" /></a>


<div id="Container">
//

</div>

This iframe is one of a part on my index.php.could you please check it and tell me what i am missing here?.

Ok, following code is working for me in Firefox and chrome

function changeHeight(iframe)
      {
        try
        {
          var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
          if (innerDoc.body.offsetHeight) //ns6 syntax
          {
             iframe.height = innerDoc.body.offsetHeight + 32; //Extra height FireFox
          }
          else if (iframe.Document && iframe.Document.body.scrollHeight) //ie5+ syntax
          {
             iframe.height = iframe.Document.body.scrollHeight;
          }
        }
        catch(err)
        {
          alert(err.message);
        }
      }

my iframe is like this

<iframe id="editSectionFrame" frameborder="0" scrolling="no"
            style="display:block;width:100&#37;"
            onLoad="changeHeight(this);"
            src="live.php" >
    </iframe>


Eariler i was using the following code which was only working in IE, and it was like this


//css
.iframe {height:expression(frames("myframe").document.body.scrollHeight);}


 <iframe id="myframe" src="live-photos.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" width="780" height="500" class="iframe"></iframe>

So my question is how can i add this

.iframe {height:expression(frames("myframe").document.body.scrollHeight);}

to my new JS function?

I tried something like this

function changeHeight(iframe)
      {
        try
        {
          var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
          if (innerDoc.body.offsetHeight) //ns6 syntax
          {
             iframe.height = innerDoc.body.offsetHeight + 32; //Extra height FireFox
          }
          else if (iframe.Document && iframe.Document.body.scrollHeight) //ie5+ syntax
          {
             iframe.height = expression(frames("editSectionFrame").document.body.scrollHeight);};
          }
        }
        catch(err)
        {
          alert(err.message);
        }
      }

Its working fine in Firefox and chrome. but again not with IE :injured: :sick: :eye:

Can anyone tell me how can i add that style into my JS?

Solved my problem!!!

Just you need to add the following

Css-

<style type="text/css">
    .iframe {height:expression(frames("editSectionFrame").document.body.scrollHeight);}
     </style>

And then JS-

<script>
function changeHeight(iframe)
      {
        try
        {
          var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
          if (innerDoc.body.offsetHeight) //ns6 syntax
          {
             iframe.height = innerDoc.body.offsetHeight + 32; //Extra height FireFox
          }

        }
        catch(err)
        {
          alert(err.message);
        }
      }
</script>

It will run in IE also besides Firefox and Chrome. :nanaman:

Hope this ll help someone. :slight_smile:

$(“#refresh”).click(function()
{
$(‘#Container’).html(‘’);
$.get(“live.php”){
$(‘#Container’).html(data);
});
return false;
});

You above syntex is wrong. You are missing red below.

$("#showAnnualReport").click(function()
	{
		$('#annualreportview').html('');
		$.get("annual-report-process.asp?customer="+custIdentifier,[COLOR=red]function(data){[/COLOR]
		   $('#annualreportview').html(data);
		});
		return false;
	});

Regarding ASP part, in the get i am passing a paramter to the page that i want to pull in the information from. You can change .asp to .php.

var custIdentifier = ‘<%=customerIdentifier%>’;

This is just getting the customer identifier from server side to the client side and then use it. You can replace this with PHP equivalent ‘<%=customerIdentifier%>’.

Are you pulling in the information from local file or another website? If it is another website then you’ll need to use iframe.

Do you use FireBug to actually see what is happening when you click the link? It will tell you exactally if there is some thing wrong with your JS or with other page, even if it has server side code error.

Hello tahirjadoon,

As you said all frames are bad. yeah you are right because anyone can see what we have put it into it. So which is best way to refresh only div on the particular page?

BTW, for time being i am solved with my problem. But really want to know if there is any other method is there to refresh only div or not?

I try to avoid frames as much as i can. With JQuery livequery plugin and JQuery live selector this has even become more easy as we can apply click, blur and change events very easily to the content being pulled and shown in the div rather than iframe.

My above code is a working code, my page shows content from 4 different products. On load i show classic ajax animated image (circular moving image) and then as content gets pulled and then put in the particular div, before making it visible i hide the animated image.

Try downloading firebug for firefox and before clicking your link, make it visible. You’ll see what is happening and will also see exact error that happened.

:agree:

But still haven’t find any other way yet.

Anyways,thanks a lot for sharing.:slight_smile: