?
Solved

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

Posted on 2014-01-31
9
Medium Priority
?
280 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 2

Accepted Solution

by:
pierrejeanes earned 2000 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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

If I have to fix slow responding website my first thoughts are server side optimizations: the database may not be optimized or caching is not enabled, or things like that. We often overlook another major part of our web application: the client. We o…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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…
Suggested Courses

777 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