SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Refresh DIV Content Without Reloading Page

    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:


    Code:
    <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. #2
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Bangalore / Patna, India
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by thatoneguy View Post
    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:


    Code:
    <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.

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm....after reviewing that page it appears we're trying to accomplish very different tasks (or maybe I missed something).

  4. #4
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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
    Code:
    <?php echo getList($currentpage, $highlight); ?>
    to an external file named data.php and calling it in the js to be refreshed every 10 seconds:

    Code:
    <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. #5
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    btt

  6. #6
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying something similar

    Code:
    <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. #7
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any suggestion?

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Um,

    Code:
    <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. #9
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #10
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Hi deepson,

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

    Code:
    <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>
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  11. #11
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

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

    But then its not working.

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

  12. #12
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    use a # link

    Code:
    <a href="#" id="refresh">click</a>
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  13. #13
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried this. its not working only.

  14. #14
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    SpikeZ pls enlighten... why does #mydiv work? Instead of #Container? In case I ever go into the whole jQuery thing...

  15. #15
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    ok, this works for me:
    Code:
    <!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
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  16. #16
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    it doesnt I cut and pasted and didnt change it!!!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  17. #17
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  18. #18
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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. #19
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    157 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    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.
    Exactly.
    What is on index.html?
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  20. #20
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello spike and stomme,

    I hope you guys are asking this question to me.

    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?

  21. #21
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, Right now i am using iframes to refresh particular div. its working fine



    Code:
    <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-


    Code:
    <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

    Code:
        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



    Code:
        javascript:void(0)

    Is this possible?

  22. #22
    Learning...
    Join Date
    Jan 2003
    Posts
    778
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/li...jaxjquery.html
    Code:
    $('#stats').load('stats.html');
    Check out Day 10
    http://blog.themeforest.net/screenca...-video-series/
    You can use it without append and i have changed the link to this and tested it and it works just great.
    Code:
    <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.
    Code:
    <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>
    Last edited by tahirjadoon; Nov 6, 2009 at 01:58. Reason: adding return false
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  23. #23
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

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

    Code:
    <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?.

  24. #24
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, following code is working for me in Firefox and chrome

    Code:
    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
    Code:
    <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

    Code:
    //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
    Code:
    .iframe {height:expression(frames("myframe").document.body.scrollHeight);}
    to my new JS function?

    I tried something like this
    Code:
    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

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

  25. #25
    SitePoint Guru deepM's Avatar
    Join Date
    Dec 2007
    Location
    India
    Posts
    705
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved my problem!!!

    Just you need to add the following

    Css-

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

    Code:
    <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.

    Hope this ll help someone.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •