• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3526
  • Last Modified:

javascript call url without page refresh

my rating system is set up so that when i click on one of the stars the page refreshes.  I would like the same links to be used, but for the page not to refresh.

is there any way to do this using the current code?

The current code uses html links that return the user to the current page.  instead of refreshing the page, i would like the link to be opened in  a div so that the music in the player on the page does not start from the beginning again.

the stars are supposed to rate the song, but rating the song causes the song to stop.  not ideal.

<ul class="star-rating">
<li style="width: 0%;" class="current-rating"/>
<li><a class="star1-rating" title="1" href="hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num=1"/></li>
<li><a class="star2-rating" title="2" href="hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num=2"/></li>
<li><a class="star3-rating" title="3" href="hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num=3"/></li>
<li><a class="star4-rating" title="4" href="hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num=4"/></li>
<li><a class="star5-rating" title="5" href="hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num=5"/></li>
</ul>

Open in new window

0
ussher
Asked:
ussher
  • 3
  • 2
  • 2
2 Solutions
 
scrathcyboyCommented:
You should be using an IFRAME for this, that is its purpose, to put one page content into your main page, without any total page refresh.  What you are asking for automatically happens with an iframe --

<IFRAME name="content" width="600" height="450" src="content.html" frameborder="0" margintop="0" marginbottom= "0" marginheight="0" marginwidth="0" scrolling="NO"></IFRAME>

Your target will be links like this --

A href="star1.html" target="content"> first star </A>

When you click the link your relevant page is loaded into the iframe called "content"  (the target).
These kinds of links are perfectly SEO friendly-- there is no loss of SEO functionality by using iframes with links like given here -- and there is no page refresh.
0
 
Michel PlungjanIT ExpertCommented:
You mean


A href="hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num=1" target="content"> first star </A>
A href="hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num=2" target="content"> second star </A>

or just put the complete rating html in the iframe.
0
 
ussherAuthor Commented:
Thanks for the suggestions.

Im trying to get it to work, but because an iframe loads content that is on another page, and the code that makes it go is generated by a function call its not so easy.

why, because to have the other iframe load another page, i first have to set up that page to have access to the function that created the code in the first place.

so, im trying.  its a good idea.  thanks.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Michel PlungjanIT ExpertCommented:
Actually no need for iframe

Try this and return a filled star in your php (remember to set header to image/gif)
<script>
function clickRate(idx) {
  for (var i=1;i<=5;i++) { // set the other images
    if (i!=idx) document.images['star'+i].src= 'star'+((idx >= i)?'_on':'_off'; 
  } 
  // call the script
  document.images[idx].src= 'hxxp://mysite.com/rating.php?mode=update_rating&amp;band_id=2&amp;type=band&amp;refresh=1&amp;rate_num='+idx
  return false; // cancel link
}
</script>
 
<ul class="star-rating">
<li style="width: 0%;" class="current-rating"/>
<li><a class="star1-rating" title="1" onClick="return clickRate(1)" href="#"><img name="star1" border="0" src="star_<? echo ($rate>0)?"on":"off"; ?>" /></a></li>
<li><a class="star2-rating" title="2" onClick="return clickRate(2)" href="#"><img name="star2" border="0" src="star_<? echo ($rate>0)?"on":"off"; ?>" /></a></li>
<li><a class="star3-rating" title="3" onClick="return clickRate(3)" href="#"><img name="star3" border="0" src="star_<? echo ($rate>0)?"on":"off"; ?>" /></a></li>
<li><a class="star4-rating" title="4" onClick="return clickRate(4)" href="#"><img name="star4" border="0" src="star_<? echo ($rate>0)?"on":"off"; ?>" /></a></li>
<li><a class="star5-rating" title="5" onClick="return clickRate(5)" href="#"><img name="star5" border="0" src="star_<? echo ($rate>0)?"on":"off"; ?>" /></a></li>
</ul>

Open in new window

0
 
scrathcyboyCommented:
"because an iframe loads content that is on another page, and the code that makes it go is generated by a function call its not so easy."

<A href="star1.html" target="iframe_name"> first star </A>

What could be easier than that?  It is the TARGET spec that sends the page into the iframe, it is SO easy.



0
 
ussherAuthor Commented:
The star rating system is generated by a smarty function.
The logic of behind the creation of the function is not mine and updates are received so i cant change the logic.
The page after the rating button is clicked contains music that starts automatically. (so opening it in an iframe could result in 2 songs playing, where the purpose is to smoothly continue listening.)

Thats the stuff that makes it difficult.

Thanks for your help, both solutions are correct answers to my question, even if my ability to implement them is a bit lacking.
0
 
ussherAuthor Commented:
Thanks.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now