Solved

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

Posted on 2014-01-31
9
277 Views
Last Modified: 2014-02-03
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
Comment
Question by:dbch68
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 2

Expert Comment

by:pierrejeanes
ID: 39824590
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
 

Author Comment

by:dbch68
ID: 39825753
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
 

Author Comment

by:dbch68
ID: 39826295
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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
LVL 2

Accepted Solution

by:
pierrejeanes earned 500 total points
ID: 39827511
How about putting the button inside a <iframe> so you autorefresh only the iframe instead of the whole page.
0
 

Author Comment

by:dbch68
ID: 39828247
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
 
LVL 2

Expert Comment

by:pierrejeanes
ID: 39828497
Can you give an example code of the window.open call you are using?
0
 
LVL 2

Expert Comment

by:pierrejeanes
ID: 39828893
You can put an id to the iframe and  from the parent window call that iframe and resize it.
0
 

Author Comment

by:dbch68
ID: 39828987
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
 

Author Closing Comment

by:dbch68
ID: 39828989
You gave me an option that I wasn't even considering and it really helped! thanks very much!
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

There is a huge demand for CodeIgniter among the PHP web developers due to its dynamic features and benefits these days. It is one of most popular and agile open source PHP framework for creating robust web applications in PHP web development field.…
Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question