[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

Posted on 2014-01-31
9
Medium Priority
?
281 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
Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

 
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

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…
Suggested Courses

656 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