Solved

javascript call url without page refresh

Posted on 2008-10-02
7
3,459 Views
Last Modified: 2012-05-05
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
Comment
Question by:ussher
  • 3
  • 2
  • 2
7 Comments
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 250 total points
ID: 22630697
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22631698
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
 
LVL 1

Author Comment

by:ussher
ID: 22631743
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 250 total points
ID: 22631798
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
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22635891
"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
 
LVL 1

Author Comment

by:ussher
ID: 22639554
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
 
LVL 1

Author Closing Comment

by:ussher
ID: 31502296
Thanks.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

920 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

15 Experts available now in Live!

Get 1:1 Help Now