[SOLVED] On click refresh div

deepson2 · November 3, 2009

Hello,

There are so many script available for to auto refresh div. but i didnt find many of them for on click refresh div.

particularly i don't want to use any jquery or mootools but want to use simple JS function which can do that.

Can anyone tell me any resources or tell me how can i do that?

Thanks in advance.

ngreenwood6 · November 3, 2009

What do you mean by refresh div? What data are you trying to refresh? Is the data coming from a database? be a little more specific.

deepson2 · November 3, 2009

Thanks for your ngreenwood6,

The data is actually tweets which are coming from the search query.

If you check this link

http://search.twitter.com/search?q=helloween

and after 5 min if you come to that page again you ll find more tweets on this. once you click on the refresh button you ll be able to see those tweets. i just want that refresh button which is just refreshing that particular div.

Do you have any idea how can we do that?

ngreenwood6 · November 3, 2009

Without seeing some code it is going to be hard to help but what I would do is create a function where I actually get the tweets. Then you could just call that function when you want to display it. For example:

function displayTweets(){
document.getElementById("tweets").innerHTML = 'Here are some tweets';
}

Then you can create the html page:

<a href="javascript:displayTweets();">refresh</a>
<div id="tweets"></div>

Hopefully that will help you. If you need help with this I will need to see some code.

deepson2 · November 3, 2009

I tried your code but its not working for me.

but here is code which works with jquery and its working. For time being i want to keep it. but still the question's remaining cant we do that without jquery?

here is my code

<script>
$(function() {
  $("#refresh").click(function() {
     $("#Container").load("index.html")
  })
})
</script>

	<h2>Looking for</h2>


	<div id="Container"></div>
</div>
<a href="index.html"id="refresh">click</a>

Anyways thanks for your help.

ngreenwood6 · November 3, 2009

You can do it without jquery but jquery is a very powerful library. I dont see why you wouldnt want to use it. Also here is better code for that:

<script>
$(document).ready(function() {
     $("#refresh").bind("click", function() {
          $("#Container").load("index.html")
     });
});
</script>

      <h2>Looking for</h2>


      <div id="Container"></div>
   </div>
<a href="javascript:void(0);" id="refresh">click</a>

I am actually surprised that you werent getting redirected to index.html when you clicked the link.

deepson2 · November 3, 2009

Again its not working for me.

Just a thought-

$(document).ready(function() {

We use this in mootools right?

deepson2 · November 3, 2009

Hello again,

What i have done so far is refreshing the entire page on the click,but now i want to refresh only particular div on the page. so what i need to write instead of index.html in my JS function? I am trying it but it seems its not working only.

Can anyone please tell me how can i refresh only particular div on the page?

ngreenwood6 · November 3, 2009

you are only refreshing one div right now. Can you clarify more? try adding a ";" without the quotes to the end of the line with the load on it.

deepson2 · November 4, 2009

ngreenwood6,

Have you seen the search page of twitter? something like this

http://search.twitter.com/search?q=helloween

it shows the tweets related with the helloween, after few minutes if something new(tweets) comes up it shows only when we click on the refresh button only. It means only that particular div gets refreshed on click.

I just want to do something similar. could you please help me how can i do that?

deepson2 · November 4, 2009

<script>
$(document).ready(function() {
     $("#refresh").bind("click", function() {
          $("#Container").load("index.html")
     });
});
</script>

      <h2>Looking for</h2>


      <div id="Container"></div>
   </div>
<a href="javascript:void(0);" id="refresh">click</a>

i want to get it work because i don't want to show index.html when i hover on the link which showes me the path as well, but its not working.can anyone please tell me what i need to add here to get it work?

ngreenwood6 · November 4, 2009

i am trying to understand what you are trying to do. right now you are refreshing the Container div onclick which isnt refreshing your page. What I assume that you are talking about is that it is loading the whole index.html file when you click is that correct?

deepson2 · November 5, 2009

Ok, Right now i am using iframes to refresh(link) particular div. its working fine

 <iframe width="780" height="720" scrolling="no" frameborder="0" src="live.php" allowTransparency="true"></iframe>

and in live.php i am refreshing that page using jquery,like this-

<script>
$(function() {
  $("refresh").click(function() {
     $("#Container").load("live.php")
  })
})
</script>
<a href="live-photos.php"id="refresh"><img src="../images/control_refresh.png" alt="Refresh" border="0" /></a>
<div id="Container"></div>

When i come to my index.php and on hover of the refresh,i can see the link bellow in the path .something like this

mysitename/live.php

So now i don't want people would know this file instead of that i would like to show something like this

javascript:void(0)

Is this possible?

I hope you understand my issue now.

ngreenwood6 · November 5, 2009

yes that is very simple simply change the iframe code to this:

(just remove the src and add an id)

<iframe id="myIframe" width="780" height="720" scrolling="no" frameborder="0 allowTransparency="true"></iframe>

Then the other page should look like this:

<script>
$(document).ready(function() {
     //set the iframes original source
     $("#myIframe").attr("src","live.php");     

     //change the iframes source
     $("#refresh").click(function() {
           $("#Container").load("live.php");
     });
});
</script>

<a href="javascript:void(0);" id="refresh"><img src="../images/control_refresh.png" alt="Refresh" border="0" /></a>
<div id="Container"></div>

I think that should work

deepson2 · November 6, 2009

Thanks a lot being patient with me ngreenwood6 ,

Iframes is opening with this code as well, but its not getting refreshed when i click on the refresh button. I am gogooling a lot for this but didnt get anythnig yet.

Have you checked this code into your m/c?

ngreenwood6 · November 6, 2009

that should be working but you can try this:

<script>
$(document).ready(function() {
     //set the iframes original source
     $("#myIframe").attr("src","live.php");     

     //change the iframes source
     $("#refresh").bind("click", function() {
           $("#Container").load("live.php");
     });
});
</script>

<a href="javascript:void(0);" id="refresh"><img src="../images/control_refresh.png" alt="Refresh" border="0" /></a>
<div id="Container"></div>

If that doesnt work you should download firefox if your not using it and then get firebug. its an addon for firefox. Once it is installed you will see a little bug on the bottom right hand side. click the bug and it will pop up a window at the bottom. Then you should click on the console tab. Once it is open refresh your page. if there are any errors it will display them there. let me know what the error is. another good thing to have is the web developer toolbar.

ngreenwood6 · November 6, 2009

if that doesnt work you can always use regular javascript function like this:

<script>
$(document).ready(function() {
     //set the iframes original source
     $("#myIframe").attr("src","live.php");     

     //change the iframes source
     function changeSource(){
           $("#Container").load("live.php");
     }
});
</script>

<a href="javascript:changeSource();" id="refresh"><img src="../images/control_refresh.png" alt="Refresh" border="0" /></a>
<div id="Container"></div>

deepson2 · November 6, 2009

I am using new version for firefox and that is 3.5.4 and using latest version for IE and chrome as well,

Its not working. :'(

Getting these errors too.

Error: $ is not defined
Source File: mysite/live.php

Line: 2

Error: window.addEvent is not a function

Source File: mysite/live.php

Line: 91

ngreenwood6 · November 6, 2009

can you post your full code for the live.php file and the page that you are trying to update? or is there a url that i can see.

deepson2 · November 6, 2009

Live.php

<script>
$(document).ready(function() {
     //set the iframes original source
     $("#myIframe").attr("src","live.php");

     //change the iframes source
     function changeSource(){
           $("#Container").load("live.php");
     }
});
</script>

<a href="live.php" id="refresh"><img src="../images/control_refresh.png" alt="Refresh" border="0" /></a> 
<div id="Container">
		<h3>Pictures</h3>
		<?php
		ini_set( "display_errors", 0);

		$lines = file("http://search.twitter.com/search?q=+twitpic+OR+pic.gd+OR+yfrog+OR+tweetphoto+%23helloween&rpp=50");
					$html = join("",$lines);

					// remove all line breaks
					$html = str_replace("\n","",$html);
					// and put in a new line break behind every anchor tag
					$html = str_replace("</a>","</a>\n",$html);
					// split the string into single lines
					$lines = split("\n",$html);
					// $lines now is an array of lines and each line ends with an anchor tag
					// for every anchor tag, we now have an entry in $lines
					for($i=0;$i<count($lines);$i++)
					{
						// delete everything in front of the anchor tag
						$lines[$i] = eregi_replace(".*<a ","<a ",$lines[$i]);
						// now every line just consists of something like <a ...>...</a>

						// we extract the link within the href attribut ...
						eregi("href=[\"']{0,1}([^\"'> ]*)",$lines[$i],$regs);
						// and put it into the $lines array
						$lines[$i] = $regs[1];
						//echo $lines[$i];
						//echo "<br/>";

						preg_match_all("/http:\/\/pic.gd\/[a-zA-Z0-9 ]+$/", $lines[$i], $matches);
						$url=$matches[0][0];
						//echo $url;

							if(preg_match('/http:\/\/pic.gd/',$url))
							{
								$string=explode('http://pic.gd/',$url);
								//echo "$string[1]";
								//echo "<br/>";
								$commas = ",";
								$a[]=$string[1];
							}

						preg_match_all("/http:\/\/twitpic\.com\/[a-zA-Z0-9 ]+$/", $lines[$i], $match);

							$s=$match[0][0];

							if(preg_match('/http:\/\/twitpic\.com/',$s))
							{
							   $stringb=explode('http://twitpic.com/',$s);
							   $commas = ",";
							   $b[]=$stringb[1];
							}

						preg_match_all("/http:\/\/yfrog\.com\/[a-zA-Z0-9 ]+$/", $lines[$i], $matches1);
						$yurl=$matches1[0][0];

							if(preg_match('/http:\/\/yfrog\.com/',$yurl))
							{
								$ystring=explode('http://yfrog.com/',$yurl);
								$commas = ",";
								$c[]=$ystring[1];
							}

						preg_match_all("/http:\/\/tweetphoto\.com\/[a-zA-Z0-9 ]+$/", $lines[$i], $matches2);
						$turl=$matches2[0][0];

							if(preg_match('/http:\/\/tweetphoto\.com/',$turl))
							{
								$tstring=explode('http://tweetphoto.com/',$turl);
								//echo "$tstring[1]";
								//echo "<br/>";
								$commas = ",";
								$d[]=$tstring[1];
							}
						}

						$stringb1 = implode($b,",");
						//echo "$string1";
						$dataContainerb = array();
						$dataContainerb[] = $stringb1;
						$arrayb = explode(',', $stringb1);
						//print_r($arrayb);
						$resultb = array_unique($arrayb);
						//print_r($result);
						foreach($resultb as $strItemb)
						{

						   ?>

							 <a class="bthumbnail" href="http://twitpic.com/show/large/<?=$strItemb;?>.jpg" rel="lightbox[mando]" title=""><img src="http://twitpic.com/show/thumb/<?=$strItemb;?>.jpg" width="150" height="150" alt=" Photos" /></a>
						   <?
						}

						$string1 = implode($a,",");
						$dataContainer = array();
						$dataContainer[] = $string1;
						$array = explode(',', $string1);
						//print_r($array);
						$result = array_unique($array);
						//print_r($result);
						foreach($result as $strItem)
						{
						   ?>
							<a class="bthumbnail" href="http://TweetPhotoAPI.com/api/TPAPI.svc/imagefromurl?size=medium&url=http://pic.gd/<?=$strItem;?>" rel="lightbox[mando]" title=""><img src="http://TweetPhotoAPI.com/api/TPAPI.svc/imagefromurl?size=thumbnail&url=http://pic.gd/<?=$strItem;?>" width="150" height="150" alt="Photos" /></a>
						   <?
						}?>
						<script type="text/javascript">
							window.addEvent('domready',function(){
								Lightbox.init({descriptions: '.lightboxDesc', showControls: true});
							});
						</script>
						<?

						$stringy1 = implode($c,",");
						$dataContainery = array();
						$dataContainery[] = $stringy1;
						$arrayy = explode(',', $stringy1);
						$resulty = array_unique($arrayy);
						foreach($resulty as $strItemy)
						{
						   ?>

                           <a class="bthumbnail" href="http://yfrog.com/<?=$strItemy;?>:iphone" rel="lightbox[mando]" title="""><img src="http://yfrog.com/<?=$strItemy;?>.th.jpg" width="150" height="150" alt=" Photos" /></a>
						   <?
						}

						$stringt1 = implode($d,",");
						$dataContainert = array();
						$dataContainert[] = $stringt1;
						$arrayt = explode(',', $stringt1);
						$resultt = array_unique($arrayt);
						foreach($resultt as $strItemt)
						{

						   ?>


							<a class="bthumbnail" href="http://TweetPhotoAPI.com/api/TPAPI.svc/imagefromurl?size=medium&url=http://tweetphoto.com/<?=$strItemt;?>" rel="lightbox[mando]" title="""><img src="http://TweetPhotoAPI.com/api/TPAPI.svc/imagefromurl?size=thumbnail&url=http://tweetphoto.com/<?=$strItemt;?>" width="150" height="150" alt=" Photos" /></a>
						   <?
						}?>
				</div>
				<div class="clear"></div>
				<div>
				<div class="left">
					<?php
					/**
					 * Set up SimplePie with all default values using shorthand syntax.**
					 */
					$feed = new SimplePie('http://api.flickr.com/services/feeds/photos_public.gne?id=62773263@N00&album=72157612974776665');
					$feed->handle_content_type();


					/**
					 * What sizes should we use?
					 * Choices: square, thumb, small, medium, large.
					 */
					$thumb = 'square';
					$full = 'small';
		?>

index.php

 <iframe id="myIframe" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" width="780" height="500" class="iframe"></iframe>

ngreenwood6 · November 6, 2009

Well first of all I think you have those 2 pages backwards because you are trying to load live.php in the live.php file. Second of all that isn't all of the code because there is no button to click and there is no id Container anywhere.

I do have a question though. Is the Container div inside of the iframe? If so you cannot change a div inside of an iframe outside of the iframe. So the code would need to be inside the iframe to load it. Another question is are you including the jquery js file?

deepson2 · November 6, 2009

Is the Container div inside of the iframe? If so you cannot change a div inside of an iframe outside of the iframe. So the code would need to be inside the iframe to load it.

Yes, the container is inside of iframes.

Another question is are you including the jquery js file?

Yes, included this file

<script type="text/javascript" src="jquery-1.3.1.min.js"></script>

Could you please try my code at your machine and tell me what exactly happening?

ngreenwood6 · November 6, 2009

I will try it when i get off work and let you know how it works. sorry i was looking on my iphone and it wasnt showing all that code. i see it now.

ngreenwood6 · November 6, 2009

Here i got it working by doing this.

index.php

<html>
<title>Test</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
//change the iframes source
function changeSource(){
$("#myIframe").attr("src","live.php");
}
</script>
</head>
<body>

<a href="javascript:changeSource();" id="refresh"><img src="../images/control_refresh.png" alt="Refresh" border="0" /></a>
<br />
<iframe src="live.php" id="myIframe" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" width="780" height="500" class="iframe"></iframe> 

</body>
</html>

live.php

<div id="Container">
         <h3>Pictures</h3>
         <?php
         ini_set( "display_errors", 0);

         $lines = file("http://search.twitter.com/search?q=+twitpic+OR+pic.gd+OR+yfrog+OR+tweetphoto+%23helloween&rpp=50");
                  $html = join("",$lines);

                  // remove all line breaks
                  $html = str_replace("\n","",$html);
                  // and put in a new line break behind every anchor tag
                  $html = str_replace("</a>","</a>\n",$html);
                  // split the string into single lines
                  $lines = split("\n",$html);
                  // $lines now is an array of lines and each line ends with an anchor tag
                  // for every anchor tag, we now have an entry in $lines
                  for($i=0;$i<count($lines);$i++)
                  {
                     // delete everything in front of the anchor tag
                     $lines[$i] = eregi_replace(".*<a ","<a ",$lines[$i]);
                     // now every line just consists of something like <a ...>...</a>

                     // we extract the link within the href attribut ...
                     eregi("href=[\"']{0,1}([^\"'> ]*)",$lines[$i],$regs);
                     // and put it into the $lines array
                     $lines[$i] = $regs[1];
                     //echo $lines[$i];
                     //echo "<br/>";

                     preg_match_all("/http:\/\/pic.gd\/[a-zA-Z0-9 ]+$/", $lines[$i], $matches);
                     $url=$matches[0][0];
                     //echo $url;

                        if(preg_match('/http:\/\/pic.gd/',$url))
                        {
                           $string=explode('http://pic.gd/',$url);
                           //echo "$string[1]";
                           //echo "<br/>";
                           $commas = ",";
                           $a[]=$string[1];
                        }

                     preg_match_all("/http:\/\/twitpic\.com\/[a-zA-Z0-9 ]+$/", $lines[$i], $match);

                        $s=$match[0][0];

                        if(preg_match('/http:\/\/twitpic\.com/',$s))
                        {
                           $stringb=explode('http://twitpic.com/',$s);
                           $commas = ",";
                           $b[]=$stringb[1];
                        }

                     preg_match_all("/http:\/\/yfrog\.com\/[a-zA-Z0-9 ]+$/", $lines[$i], $matches1);
                     $yurl=$matches1[0][0];

                        if(preg_match('/http:\/\/yfrog\.com/',$yurl))
                        {
                           $ystring=explode('http://yfrog.com/',$yurl);
                           $commas = ",";
                           $c[]=$ystring[1];
                        }

                     preg_match_all("/http:\/\/tweetphoto\.com\/[a-zA-Z0-9 ]+$/", $lines[$i], $matches2);
                     $turl=$matches2[0][0];

                        if(preg_match('/http:\/\/tweetphoto\.com/',$turl))
                        {
                           $tstring=explode('http://tweetphoto.com/',$turl);
                           //echo "$tstring[1]";
                           //echo "<br/>";
                           $commas = ",";
                           $d[]=$tstring[1];
                        }
                     }

                     $stringb1 = implode($b,",");
                     //echo "$string1";
                     $dataContainerb = array();
                     $dataContainerb[] = $stringb1;
                     $arrayb = explode(',', $stringb1);
                     //print_r($arrayb);
                     $resultb = array_unique($arrayb);
                     //print_r($result);
                     foreach($resultb as $strItemb)
                     {

                        ?>

                         <a class="bthumbnail" href="http://twitpic.com/show/large/<?=$strItemb;?>.jpg" rel="lightbox[mando]" title=""><img src="http://twitpic.com/show/thumb/<?=$strItemb;?>.jpg" width="150" height="150" alt=" Photos" /></a>
                        <?
                     }

                     $string1 = implode($a,",");
                     $dataContainer = array();
                     $dataContainer[] = $string1;
                     $array = explode(',', $string1);
                     //print_r($array);
                     $result = array_unique($array);
                     //print_r($result);
                     foreach($result as $strItem)
                     {
                        ?>
                        <a class="bthumbnail" href="http://TweetPhotoAPI.com/api/TPAPI.svc/imagefromurl?size=medium&url=http://pic.gd/<?=$strItem;?>" rel="lightbox[mando]" title=""><img src="http://TweetPhotoAPI.com/api/TPAPI.svc/imagefromurl?size=thumbnail&url=http://pic.gd/<?=$strItem;?>" width="150" height="150" alt="Photos" /></a>
                        <?
                     }?>
                     <script type="text/javascript">
                        window.addEvent('domready',function(){
                           Lightbox.init({descriptions: '.lightboxDesc', showControls: true});
                        });
                     </script>
                     <?

                     $stringy1 = implode($c,",");
                     $dataContainery = array();
                     $dataContainery[] = $stringy1;
                     $arrayy = explode(',', $stringy1);
                     $resulty = array_unique($arrayy);
                     foreach($resulty as $strItemy)
                     {
                        ?>

                           <a class="bthumbnail" href="http://yfrog.com/<?=$strItemy;?>:iphone" rel="lightbox[mando]" title="""><img src="http://yfrog.com/<?=$strItemy;?>.th.jpg" width="150" height="150" alt=" Photos" /></a>
                        <?
                     }

                     $stringt1 = implode($d,",");
                     $dataContainert = array();
                     $dataContainert[] = $stringt1;
                     $arrayt = explode(',', $stringt1);
                     $resultt = array_unique($arrayt);
                     foreach($resultt as $strItemt)
                     {

                        ?>


                        <a class="bthumbnail" href="http://TweetPhotoAPI.com/api/TPAPI.svc/imagefromurl?size=medium&url=http://tweetphoto.com/<?=$strItemt;?>" rel="lightbox[mando]" title="""><img src="http://TweetPhotoAPI.com/api/TPAPI.svc/imagefromurl?size=thumbnail&url=http://tweetphoto.com/<?=$strItemt;?>" width="150" height="150" alt=" Photos" /></a>
                        <?
                     }?>
               </div>
               <div class="clear"></div>
               <div>
               <div class="left">
                  <?php
                  /**
                   * Set up SimplePie with all default values using shorthand syntax.**
                   */
                  $feed = new SimplePie('http://api.flickr.com/services/feeds/photos_public.gne?id=62773263@N00&album=72157612974776665');
                  $feed->handle_content_type();


                  /**
                   * What sizes should we use?
                   * Choices: square, thumb, small, medium, large.
                   */
                  $thumb = 'square';
                  $full = 'small';
         ?>

All i did was put the refresh button outside of the iframe. then i just changed the source on click of the refresh button. The window.addEvent error has to do with your lightbox or whatever you are trying to do. i would suggest using lytebox if you want to use an image pop up. all you have to do is include the files and give the image's a tag a rel attribute of lytebox. let me know if you have any questions

deepson2 · November 7, 2009

Yes its working now!

did was put the refresh button outside of the iframe. then i just changed the source on click of the refresh button.

Such dumb me! >:( Thanks a lot!!!!

All i The window.addEvent error has to do with your lightbox or whatever you are trying to do. i would suggest using lytebox if you want to use an image pop up. all you have to do is include the files and give the image's a tag a rel attribute of lytebox. let me know if you have any questions

Now the problem is, earlier i was showing my images into light box but now as i am putting this div into live.php the light box is opening in that div only. I wanted it to open it on index.php Tried with target="_top" thing. but no luck.

Anyways thanks for your help.

I just wanted your suggestion so waiting for your reply. As soon as you give me reply i ll mark this as solved thread.

Sign In

[SOLVED] On click refresh div

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information