Solved

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

Posted on 2014-01-31
9
273 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
  • 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
 
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Foolproof security solutions has become one of the key necessities of every e-commerce or Internet banking website. If you too own an online shopping site then its vital for you to equip your web portal with customer security features that can allow…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…

743 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now