• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 283
  • Last Modified:

How do I autorefresh a button without refresting the whole page?

Hi, I have the following code on a webpage:
<span id="button"></span>
<script type="text/javascript" src="button.js"></script>

Open in new window

On pageload the JavaScript acts on the button span does stuff to either display the button, or not.

It works great, with each page refresh, but I want that to happen every 5 or 10 seconds, but I don't want to refresh the whole page.

Everything is on the same server (Linux)

I came closest using SetInterval, but no luck, I must be missing something. Any ideas?
0
dbch68
Asked:
dbch68
  • 5
  • 4
1 Solution
 
pierrejeanesCommented:
On pageload     call some function like this one:



function buttonchanger(){
setInterval(yourFunctionfrombutton.js-here, 10000);
}


Instead of calling your function from your button.js call a function like the above so it will run the .js function every 10 seconds
0
 
dbch68Author Commented:
Thanks for the suggestion, it was a good idea and I tried to do it, but the script needs to be in the right place and uses it's location to do some tests. So it just wouldn't work. I was able to call a function every few seconds, no problem, it's just that having that javascript in a different context broke it.

So I am back to my thought that perhaps the best thing to do, if it's possible is refresh that little part of the web page instead of the whole thing.So it seems like an AJax type deal, which I am not terrible knowledgeable in.

Can anyone give me some code examples of how I might refresh a javascript call on a page? Maybe put it in a div or a span and then refresh those?

So this is what I need to refresh
<script type="text/javascript" src="button.js"></script>

Open in new window

0
 
dbch68Author Commented:
OK let me give some more detail, this works fine IF I simply have it load with the pageload. If an admin logs in the button shows up, if they don't it does not. But if someone logs in and an admin logs in afterwards, it does not show up until after them change pages, etc.

I don't want to autorefresh the p[age because that's annoying and unnecessary load on the server and database. The site is made up of a bunch of modules, javascripts and css files.

In the header file (this is not successfully auto refreshing):
<script src="jquery-latest.js"></script>
<script type="text/javascript">
function LoadMyJs(scriptName) {
                var docHeadObj = document.getElementsByTagName("head")[0];
                for (item in docHeadObj.children){
                   a = docHeadObj.children[item];
                    tagname = a.tagName;
                        var src= a.src;
                        if(!src) continue;
                        var same =src.indexOf(scriptName);
                        if(same !=-1){
                            a = 0;
                        }
                        if(tagname =='SCRIPT' && same!=-1) {
                            delete a;
                        }
                }
                var dynamicScript = document.createElement("script");
                dynamicScript.type = "text/javascript";
                dynamicScript.src = scriptName;
                docHeadObj.appendChild(dynamicScript);
                
                }
		function buttonchanger(){
			
			setInterval(function(){doStuff()},5000);
		}
		function doStuff(){
			//alert('oh snap!');
			LoadMyJs('https://www.thesite.com/buttonfiles/button.js');
		}
  </script>
<body onload="buttonchanger();">

Open in new window




on the content page:
<!--<p>&nbsp;<br><br></p>-->
<span id="thebuttonn"></span><script type="text/javascript" src="https://www.thesite.com/buttonfiles/button.js"></script>

Open in new window


If it helps the main page is index.php, header is header.php

Also is it organized like this:

public_html --> index.php (calls files below)
public_html --> folder -->folder --> index.php (all the modules, etc)
public_html --> buttonfiles --> button.js
0
Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

 
pierrejeanesCommented:
How about putting the button inside a <iframe> so you autorefresh only the iframe instead of the whole page.
0
 
dbch68Author Commented:
Hi, thanks, that is a good idea! I was able to do that and it enabled me to refresh, however, now the window.open call to open up a window of a specific size does not work, so it opens maximized. Is there some special thing to do when calling window.open from within an iframe, to allow the resulting window to be sized as specified?
0
 
pierrejeanesCommented:
Can you give an example code of the window.open call you are using?
0
 
pierrejeanesCommented:
You can put an id to the iframe and  from the parent window call that iframe and resize it.
0
 
dbch68Author Commented:
Thanks very much! Yes I am calling like this:
onclick=window.open('chatwindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=550,height=500');

Open in new window

... I think what I was seeing was simply a matter of cache. At first when I was refreshing the iFrame I had the URL wrong and was inserting error pages into that frame, and I think I jsut got some stuff saved to cache that interferred, because a while later I tested again and it was fine. Even so I put this in the bottom of the window code for good measure:
this.window.resizeTo(550, 500);

Open in new window


Anyway, thanks very much for the input, I totally wans't thinking of iframes and spent hours trying all sorts of things. Then within a few minutes of messing around with iframes, it was working fine (and that caching issue sorted itself)!
0
 
dbch68Author Commented:
You gave me an option that I wasn't even considering and it really helped! thanks very much!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now